記事本文を見やすくする CSS

基礎知識

記事を見やすくするテクニックの一つ。
line-heigt

この記事の主役。
marginの相殺に関しても少し触れている。
margin

記事の上部を整える

  1. 記事タイトル。
  2. 投稿者名などheader情報。
  3. 記事本文。

このような順に並んでいるとして、2と3の間のmarginを考える。
当然に一定値でなければならないが、headerの方でmargin調整するようにした。

記事本文のmargin-topは0にしたい。
marginの相殺という性質はあるが、明示的に0指定した方がいいだろう。
記事の最上部にいずれの要素が来るかは不明だ。
その場合でも次のプロパティを使用することで解決できる。
first-child

記事主文のmargin

記事本文の主な構成は、p要素およびH系要素であろう。
H系要素は、H2のみを使用すると仮定する。

pやH2など主文のmarginだが、横方向は0でよいとして縦をどうするかである。
例外的にpre・imgなどを使用する場合もあり、その時でも一定marginをとりたい。
主文のmarginが0指定だと崩れる可能性が高い。

pの上下と、H2の下は、同数値とることにした。
H2のmargin-topに限って広めにとることで、段落にメリハリが出るだろう。

単位だが、remをベースにしたらいいと思う。
クラス指定は次のような感じだ。

.entry-content  p {~}