CSS設計について

絶対値を多用しない

はじめに

コーデイングをしていく際にデザインカンプのフォントサイズと行間の値を測った後に、制作中のサイトに対してCSSで適応していく流れになると思います。その際に絶対値を無意識に使うことはないでしょうか。
今回はフォントサイズと行間における、絶対値指定ではなく、相対値指定をするメリットをご紹介します。

今回のポイントを最初にまとめます。

1. lline-heightは相対値にすることで、フォントサイズが変更された場合でも同じ倍率を保持する。
2. line-heightは親要素の値を子要素に継承するため、line-heightを再度設定する必要がない。
3. 相対値で設定されたline-heightプロパティ値の単位は、極力省くようにする。

今回の例はdivの中に二つの段落があり、比較しやすいように最初の段落はリード文として扱います。
※注１　リード文にはclassが追加されています。
※注２　文章（Pタグ）にはわかりやすいように背景色を追加しています。

では、上記で挙げたポイント１、２の例を説明します。
下記【例１】は、リード文と通常の文章の行間が、両者とも1.5倍に設定されているのですが、行間の設定が絶対値指定になっています。

【例１】

　<div class="introduction">
　　<p class="lead">こちらはリード文です。</p>
　　<p>この文章サンプルです。</p>
　</div>

　.introduction {
　　line-height: 27px;
　　font-size: 18px;
　}
　.lead {
　　font-size: 36px;
　　line-height: 54px;
　}

こちらを下記【例２】のようにコードをリファクタリングすることで、コード量が減るだけでなく、仮にフォントサイズが変更された場合でも倍率が保持されます。
また、line-heightが継承されることをうまく利用できています。

　※他にも親要素から子要素へ継承されるプロパティはあります。
　下記サイトが参考になります。
　参考サイト：https://www.webprofessional.jp/css-inheritance-introduction/
【例２】

 <div class="introduction">
  <p class="lead">こちらはリード文です。</p>
  <p>この文章サンプルです。</p>
 </div>

 .introduction {
  line-height: 1.5;
  font-size: 18px;
 }
 .lead {
  font-size: 36px;
 }

そして最後のポイント３を悪い例を使って説明します。
絶対値や単位を必要としない限り、極力単位はつけない方が好ましいです。絶対値および絶対単位でなく、「em」や「%」といった相対単位も存在するためです。
下記の例３では意図通りの行間の設定にはなりません。なぜならリード文に、親要素で設定されている相対単位の「1.5em」が継承されているためです。その結果、行間27pxが反映されています。
【例３】

　<div class="introduction">
　　<p class="lead">こちらはリード文です。</p>
　　<p>この文章サンプルです。</p>
　</div>

　.introduction {
　　/* 計算後のline-height: 27px; が継承されてしまう */
　　line-height: 1.5em;
　　font-size: 18px;
　}
　.lead {
　　font-size: 36px;
　}

最後に

今回取り上げた例もかなり極端ではありますが、階層が深くなるにつれて複雑なコードになっていきます。そのため、ちょっとした修正をするだけであっても体裁崩れが生じてしまい、どこが原因になっているのか特定することに多くの時間を取られてしまいます。こうなるのことを防ぐために、今回紹介したことをふまえ、修正しやすいCSSを書くことを常に意識してコーディングしていきたいと思います。

【参考書籍】

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法