[css]文字の行間を調整する方法について

今回は、文字の行間を調整する方法についてご紹介したいと思います。
長文を読んでいるときに、行間が狭い場合もう読むのいいかな？って思う方がいらっしゃるかと思います。せっかく一生懸命作ったコンテンツを読んでいただけないの非常に残念なので、ちょっとでも読みやすいページを目指すためにcssで行間を広げて読みやすいページを作っていきましょう。

文字の行間をコントロールするためのHTMLを準備しよう

文字の行間をcssでコントロールするために、htmlを準備してみましょう。
行間がどう変化するか見るために、３種類ほどサンプルを用意してみましょう。

<p>文字の行間が１emの時</p>
<div class="lt1em">文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。</div>
<hr>
<p>文字の行間が１.5emの時</p>
<div class="lt15em">文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。</div>
<hr>
<p>文字の行間が2emの時</p>
<div class="lt2em">文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。</div>

上記のように、３つのクラスを用意してcssで行間の調整を行っていきましょう。

CSSで文字の行間を調整してみよう

上記のHTMLの３種類のクラスに1つずつクラスを当てていこうと思います。
cssで行間を調整するためには、line-heightというものを使用します。
このline-heightを上手に調整することで、文字の行間をコントロールすることができ、見やすさをコントロールできます。
下記にサンプルコードとその実装例を記述します。

<p>文字の行間が１emの時</p>
<div class="lt1em">文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。</div>
<hr>
<p>文字の行間が１.5emの時</p>
<div class="lt15em">文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。</div>
<hr>
<p>文字の行間が2emの時</p>
<div class="lt2em">文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。</div>

文字の行間をコントロールしたサンプルの実装例

文字の行間が１emの時

文字の行間が１.5emの時

文字の行間が2emの時

上記のように、1emではだいぶ間隔が詰まっていたものが2emにするにつれて広がっていっているのがわかります。1emでは非常に読みにくいので、1.5emくらいが見やすいですね。上記のサンプルではそこまで行間を広く取っていませんが、あまりに広すぎると違う情報のように感じたりすることがありますので、気をつけてください。

まとめ

今回は、cssを使って行間を調整する方法をご紹介させていただきました。あなたのサイトに書いてある情報を読みやすくする大切な設定だと思います。
情報は書いてあっても読んでもらわなければ意味がありません。我々も読みやすくし、読んでもいいかなと思われるサイト作りを目指していきます。あなたのサイトがよりよくなるお手伝いができれば幸いです。