「line-height」「text-align」行の高さやテキストの位置を調節する

Webページを読みやすい状態にするには、行間を調節することが大切です。適度に行間が空いていないと、テキストが詰まって読みづらくなります。また、目も疲れやすくなりますから、ユーザーの負担も大きくなります。なので、行間の幅を調節して、読みやすい状態にしてください。

また、テキストの位置なども、場所によっては調整した方が良い場合があります。通常だと左寄せとなりますが、中央寄せや右寄せにすることで読みやすくなったりするわけです。なので、Webページに合わせて調節するようにしましょう。

ここでは、CSSでの行間や表示位置の調節について紹介します。

 

行の高さを調節する(line-height)

テキストが入る行の高さは、「line-heightプロパティ」で調節します。行の高さから文字の大きさを差し引いたものが行間となります。line-heightプロパティの値としては、「px」「em」「%」などの単位を付けて記述可能です。

また、数値のみで記述すると、「em」と同じ扱いとなります。つまり、{line-height: 2;}とすれば、2文字分の行の高さとなるわけです。pxなどの絶対指定よりも、数値のみの相対指定の方が融通が利く場合が多いですね。

たとえば、文字サイズを拡大した時に、pxで行の高さを指定していると上の行と重なってしまうことがあります。でも、数値のみの相対指定だと、文字サイズに合わせて高さも変更されるので、上の行と重なることはありません。だから、一般的には、行の高さは数値のみで指定されることが多いです。

 

文字列の横位置を調節する(text-align)

見出しや段落の横位置を調節するには、「text-alignプロパティ」を使用します。記述する値としては、「left(左寄せ)」「center(中央寄せ)」「right(右寄せ)」の3つがあります。

【CSS】
p.left-al {text-align: left;}
p.center-al {text-align: center;}
p.right-al {text-align: right;}

【HTML】
<p class=”left-al”>左寄せ</p>
<p class=”center-al”>中央寄せ</p>
<p class=”right-al”>右寄せ</p>

上記の記述をすると、以下のような表示となります。表示位置が変わっていますよね。状況に合わせて、使い分けるようにしましょう。

左寄せ

中央寄せ

右寄せ

 

文字の開始位置を調節する(text-indent)

日本語の文章では、段落の初めの部分が一文字ほど下がりますよね。これをWeb上で行うには、「text-indentプロパティ」を使用します。{text-indent: 1em;}とすれば、テキストの開始位置を一文字下げることが出来ます。

また、マイナスの値も指定できるので、{text-indent: -1em;}とすれば、開始位置を一文字前にすることも可能です。

【CSS】
p.indent-min {text-indent: 1em;}
p.indent-plu {text-indent: -1em;}

【HTML】
<p class=”indent-min”>一文字下げる</p>
<p class=”indent-plu”>一文字上げる</p>

上記の記述をすると、以下の表示となります。テキストの開始位置を変えることで、段落にメリハリが出ます。

一文字下げる

一文字上げる

 

以上、行間やテキストの表示位置の調整方法を紹介しました。読みやすいWebページにするためには、必要不可欠なことだといえます。なので、しっかりと覚えておくようにしてください。

サブコンテンツ

このページの先頭へ