本文中に使われるフローコンテント要素の一覧
HTML5 においてフローコンテントに分類される要素の内、現実的に、本文中で使われるであろう要素だけを抜粋しました。 CSS で余白を調整する場合には、これらを対象としておけば良いと思います。
選考基準は次の通りです。
- フローコンテントでありフレージングコンテントである要素は積極的に除く。
- 例えば b 要素などは除きました。普通は p 要素などに含まれるためです。
- kbd, samp 要素は、それらを利用する Web サイトが限定的である他に除きました。
- audio, img, video などのメディアはフローコンテントとして扱う。
- テキスト中に含める方が稀であると判断した。
a, article, aside, audio, blockquote, canvas, div, dl, embed, figure, footer, h1, h2, h3, h4, h5, h6, header, hr, iframe, img, map, nav, object, ol, p, pre, section, svg, table, time, ul, video
CSS で指定する場合
本文が含まれるフローコンテントのクラス名を .main-content とするとき、
隣接するフローコンテントとの余白 (margin) を指定しようとすると、次のようになります。
これは a 要素を例にしたパターンですが、実際には article, aside … とすべての組み合わせを記述する必要があります。
ただし、ここで挙げたすべての組み合わせを定義すると、(すべて改行した場合に) 1000 行を超えてしまいます。 CSS が長くなり、可読性も低下しますが、それを回避するためには全称 (Universal / *) セレクタ を使うしかありません。 (全称セレクタを使うパターンは後に続いて掲載しています)
全称セレクタはパフォーマンスを低下させる原因の 1 つですが、膨大な量の定義によるデータサイズの増加の方が、 パフォーマンスに対する影響が大きいと思われます。ここで紹介する定義の場合は、圧縮したとしても 25KB を超過します。
.main-content a + a,
.main-content a + article,
.main-content a + aside,
.main-content a + audio,
.main-content a + blockquote,
.main-content a + canvas,
.main-content a + div,
.main-content a + dl,
.main-content a + embed,
.main-content a + figure,
.main-content a + footer,
.main-content a + h1,
.main-content a + h2,
.main-content a + h3,
.main-content a + h4,
.main-content a + h5,
.main-content a + h6,
.main-content a + hr,
.main-content a + iframe,
.main-content a + img,
.main-content a + map,
.main-content a + nav,
.main-content a + object,
.main-content a + ol,
.main-content a + p,
.main-content a + pre,
.main-content a + section,
.main-content a + svg,
.main-content a + table,
.main-content a + time,
.main-content a + ul,
.main-content a + video
… article へ続く全称セレクタを使った場合は次のようになります。先のすべての組み合わせを表記するパターンとは異なり、これで完結しています。 CSS が短くなり、可読性も向上します。多少の描画速度の低下につながりますが、 すべての組み合わせを指定する場合と比較してファイルサイズが小さくなるので、 最終的なパフォーマンスは変わらないか、寧ろこちらの方が良いと思います。
処理コストの大きい子孫セレクタ > を使わないような指定をしていますが、これが問題を起こす可能性があります。
例えば p 要素などに含まれる a 要素の後に、異なる別の要素が続くと描画の不具合を起こす可能性があります。
また、当然ですが、すべての要素に一律の余白を指定することはないでしょう。 例えば私の場合には見出し (h1 ~ h6) は、余白を大きめにとっています。
.main-content a + *,
.main-content article + *,
.main-content aside + *,
.main-content audio + *,
.main-content blockquote + *,
.main-content canvas + *,
.main-content div + *,
.main-content dl + *,
.main-content embed + *,
.main-content figure + *,
.main-content footer + *,
.main-content h1 + *,
.main-content h2 + *,
.main-content h3 + *,
.main-content h4 + *,
.main-content h5 + *,
.main-content h6 + *,
.main-content hr + *,
.main-content iframe + *,
.main-content img + *,
.main-content map + *,
.main-content nav + *,
.main-content object + *,
.main-content ol + *,
.main-content p + *,
.main-content pre + *,
.main-content section + *,
.main-content svg + *,
.main-content table + *,
.main-content time + *,
.main-content ul + *,
.main-content video + *