コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
単位のない数値
このレッスンでは、単位のない数値の 扱いについてご説明します。 CSSのプロパティ値として、 単位のない数値を扱える場合があります。 今回2つご紹介しようと思うんですが、 「margin」や「padding」、 「0」の場合には単位がなくてもいいです。 それから「line-height」と いうのがあるんですが、 現行に対する倍率として 使うことができます。 まずは margin と padding ですね。 0px、もちろんこれで 正しいんですけれども、 なくても大丈夫です。 さらに結果が分かりやすいように、 この 10px 取ってしまいましょう。 そうすると、全部 0 と いうことになりますね。 それから、こちらも px 取ります。 こっちは残しておきましょう。 さらにもっと分かりやすいように、 body にボーダーをつけましょう。 border で、1px の solid で black とします。 これで保存して、確かめてみます。 ボーダーが左右と上に ぴったりくっついていますね。 下はまあしょうがないです、余白ですから。 確認できたので、 body の margin、 左右は戻しましょう。10px です。 そして、今度は line-height ですね。 行の高さということになります。 それが分かりやすいように、 ちょっと段落を入れましょう。 p要素ですね。 テスト用に id をつけておきます。 id で test というふうにしましょう。 そして閉じます。 さて、適当な文章を入れたいんですが、 Emmet というツールの入っている エディタであれば簡単にそれができます。 このDreamweaverもEmmetが入ってるので、 どうするかというと、lorem と打って、 Tab キーを入れると、 どこの言語ともわからない、 それらしい文章が入ります。 これ、全然意味ありません。 ただ値として入れる文章ですね。 これに対して設定をしようと思うんですが、 line-height の前に 確認をしておきたいと思いますので、 # の test に対して背景色つけましょう、 分かりやすいように。 background-color、 薄めの色にしたいので aquamarine を選びましょう。 そして line-height を設定する前に デフォルトですね。…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。