インデントと行間の指定

今日はホームページの中で、文章を書いていく部分に必要な指定を解説します。

「インデント（段落の文字頭落とし）と行間」
作文などの文章を書く時には、段落の始めを一文字落として書く「インデント」をよく使います。しかしホームページでは、さほど気にする事はないと思います。
ただしメニュー等の部分で、文字の左余白を決める時には結構使います。また、行間指定は必須と言える指定になります。

＜インデント＞
ホームページは基本横書きですから、一行の左側に余白をとる方法です。

本文となる文章を書くと先頭文字だけが「1em」分、字下げされて表示されます。

「この部分の始めの文字に‘1em’分（約一文字分）のインデントを入れて表示させなさい」という指令です。
もちろんこの‘em’は‘px’でも指定できます。

複雑になりますが、四角いボタン画像（menu.gif）に一文字分の余白を空けて文字を書き、メニューボタンとする場合はこのようになります。
トップページへ

CSSで指定する場合はこのようになります。
＜HTML側＞
トップページへ

＜CSS側＞
.menu {
font-size: 12px;
text-indent: 1em;
background-image: url(images/menu.gif);
}

＜行間＞
ホームページでは行間指定というものを、行の高さで指定します。例えば文字サイズが12pxで、行の高さが20pxの場合、上下に4pxずつの余白が出来ます。
つまり行の間に上下余白分8px（4px+4px）が余白として出来る事になります。
行の高さに指定する単位は、主にpx、em、%が使われますが、指定方法はこのようになります。

一行目の文章を書く ← 改行のタグ
二行目の文章

この行間（行の高さ）指定は、本文を読みやすくするためには必須の指定です。大抵は‘%’で指定して、その値を160～180%にすると比較的見やすくなるでしょう。
詰まった文字は非常に読みづらく、空きすぎても締まりがなくなります。いろいろ試しながら全体のバランスを考えてみるとスッキリまとまります。