[CSS]読みやすさのポイントは縦のリズム、見出しのレベルがひと目で分かるようにスタイルするチュートリアル

読みやすいウェブページの大切なポイントの一つは、縦のリズムです。ウェブにおける縦のリズムはfont-size, line-height, margin(padding)の3つの要因からなっています。
この3つの要因とデザインを組み合わせ、見出しのレベルがひと目で分かるようにデザインされた見出しを実装するスタイルシートのチュートリアルを紹介します。

Heading Set Styling with CSS

各見出しは、Lv.1, Lv.2, Lv.3, Lv.4 の4つのレベルからなっています。

• 1. 見出しのレベルをシンプルに明示
• 2. 見出しのレベルを背景で明示
• 3. 見出しのレベルをデザインの継承で明示
• 4. 見出しのレベルにアイコンを使ってみる
• 5. 見出しのレベルをカウンターで明示
• 6. 見出しのレベルをカラーで明示

1. 見出しのレベルをシンプルに明示

まずは見出しのレベルをシンプルに表現したものです。

Demo 1

Lv.1～4はサイズによって表現しています。
Lv.1はサイズが大きいだけでなくtext-shadowを使用してより強調しており、Lv.3では文字のサイズが小さくなるためletter-spacingで文字間を調整します。

2. 見出しのレベルを背景で明示

見出しのスタイルに背景を加えて、そのレベルを表現したものです。

Demo 2

Lv.1では背景に画像を使用し目立たせています。Lv.2ではベタの背景、Lv.3ではライン、Lv.4では無しです。

実装時に気をつけたいポイントとしては、十分な余白を確保することです。

使用する画像とテキストが衝突しないように、paddingを設定します。

3. 見出しのレベルをデザインの継承で明示

デザインのスタイルを少しずつ変化させることで、レベルを表現したものです。

Demo 3

Lv.1では美しいブルーをテキストのカラーに使用し、Lv.2以下にはそのカラーを少しずつ変化させてテキストの頭にバーティカルバーとして使用します。

このバーはborder-leftで作成した矩形ではありません。

この実装は疑似要素を使い、バーの四隅は角丸になっています。

4. 見出しのレベルにアイコンを使ってみる

アイコンを使った遊び心のあるデザインの見出しです。

Demo 4

背景の木目に負けないよう見出しのデザインをしています。使用しているアイコンはFontAwesomeです。

Lv.2以下に使用しているボーダーはborderではありません。

borderを使用してしまうと幅がセットできないため、疑似要素で実装しています。

5. 見出しのレベルをカウンターで明示

この見出しが最もレベルを明示しているといってもよいでしょう。

Demo 5

このカウンターはテキストの数字ではありません。CSS2.1のcounter(counter-reset, counter-increment)を使用して、自動で数字を割り当てています。

CSS

.demo-5 .main {
    counter-reset: section-1, section-2, section-3, section-4;
}
.demo-5 .main h1 {
    counter-increment: section-1;
    counter-reset: section-2 section-3 section-4;
}
.demo-5 .main h2 {
    counter-increment: section-2;
    counter-reset: section-3 section-4;
}

6. 見出しのレベルをカラーで明示

上位の見出しほど常に重いデザインにする必要はありません。ここではLv.1は細いウエイトで明るいカラーにしています。

Demo 6

Lv.2以下はサイズを小さくし、カラーを暗くしています。