文字情報を整えるその３
行間と文字間

矢野りん／ライター

2006.07.11

　見出しとリストの2大書式をマスターした後は、まとまった文字量の本文に読みやすいスタイルを適用してみよう。ポイントは余裕のある行間設定だ。

行間設定法

　見出しと本文の段落を持つ文字情報のかたまりをレイアウトした例を見て欲しい。

--------------------------------------------------------------
サンプルページ
list.html
（サンプルページは別ウィンドーで開いてください。ブラウザのソースを見るコマンドでコードを確認してください。）
--------------------------------------------------------------

　最初の例は大きな見出しと本文のサイズの差がはっきりしているレイアウトだ。見出しサイズが大きい場合、本文との間を見出しの高さサイズと同じくらいしっかりと空けると読みやすくなる。本文の段落もゆったりと読めるように、1.8emという広めの行間を取った。ニュースリリースのように文字数の多いページでは、作例のような余裕のあるスタイルに整えると読みやすくなる。

　ちょっとCSSのポイントを付け加えたい。

　行間設定はCSSのline-heightというプロパティで調整するものだ。段落部分のスタイルは

--------------------------------------------------------------
#sample1 p{
color: #727272;
font-size: 0.9em;
font-family: "ＭＳゴシック";
line-height: 1.8em;
margin-top: 0;
padding-top: 0 }
--------------------------------------------------------------

　上記のような指定を行っている。しかしながら、見出しだけは見出しタグが本来持っている行間があるので、line-heightプロパティで段落ブロックとの間隔を調整できない。そこで見出し部分だけは

--------------------------------------------------------------
#sample1 h2 {
color: #646464;
font-size: 1.5em;
font-family: "ＭＳゴシック";
font-style: normal;
font-weight: bold;
margin-bottom: 0.5em;
padding-bottom: 0 }
--------------------------------------------------------------

　上記のように下の余白（margin-bottom）の設定で調整した。この設定をコントロールするには段落部分の上部のマージンを0に設定しておく必要もある。また、表示の際適用されるフォントによっては、フォントデータそのものが適度な行間設定を持っているものもある。できるだけ多くの環境で同じくらいの行間設定を実現したい時は、使用フォントをあらかじめ指定しておくことをおすすめする。特にWindows標準フォントのMSゴシックと、MacOS標準フォントのヒラギノゴシックは行間のサイズがかなり異なる。

情報量に応じてバランスよく

　次に先ほどのサンプルに併記した、見出しと本文サイズにあまり差のないスタイル例を見て欲しい。

　この場合は文字のブロック全体がぎゅっと凝縮されたようなレイアウトになる。見出しと本文、さらに本文の段落の行間も、先の例より若干狭いくらいがちょうど良い。

　このようなスタイルは、文字量があっても中見出しを多く取ってひと息付ける構成に向いている。また、見出しの拾い読みがしやすいように、見出し部分の文字間を0.2emに設定して段落部分としっかり差別化した【図１】。２つの作例とスタイルなしのテキストを比較してみよう。適切な行間があると、かなり読みやすく、好ましさが高まると理解できるだろう。