【css】line-heightのルールはこれでOK

\ 知らないうちに損してる? /

Amazonポイント最大2.5%還元キャンペーン

駿河屋スタッフ募集中

line-heightのルール付け

px基準に条件付けせずに、クラス基準にしていくとシンプルに分岐できる。

考え方

  • 見出し用の共通クラスと文章用のクラス設計を分ける
  • フォントサイズに関わらず見出しは line-height: 2、文章は line-height: 1.5 を基準とする
  • 基準を持ちながら個別に拡張スタイリングしていく

良い例

// 見出し用共通クラス(h1とかでもいい)
.head {
line-height: 2;
margin-bottom: 24px;
}
// 文章用共通クラス(というかpでいい)
p {
line-height: 1.5;
margin-bottom: 24px;
}
// バリエーションを作成する
.text-xs {
font-size: 0.7rem;
line-height: 1.75; // 例えば
}

marginは適当。

悪い例

font-size: 20px 以下は line-height: 1.5
font-size: 20px 以上は line-height: 2

font-sizeごとに指定しようとすると混乱する。

最初にデザインガイドラインを作成しておくべき

そもそも、コーディングをする前に、文字サイズのパターンがどれだけあるか、ルール化しておくことをおすすめする。

こんな感じの

プロおすすめの関連商品

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

幼少期、絵描きになりたくて毎日絵を描く。地元の写生大会で金賞受賞。
高校生の頃からバンドを組み、作詞・作曲・編曲・映像を担当。ライブで知り合ったバンドマンとは今でも仲良し。

25歳から独学でデザイン・ウェブ制作を0から学習し、ウェブデザイナーとして中途入社。自分だけの武器を探し、デザイン、マークアップ、企画、マーケティング、SNS、広告など片っ端から勉強。
今はその知識を活かしてPdMを担当。

その傍ら数々の副業(イラスト制作、アフィリエイト、古着転売、ハンドメイド、作曲)をして、現在30代に突入。

東海在住。
運営ブログ「シュマリ」は月間3万PV。
読んだ漫画は4万冊。