狼読

 
2020/05/29

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

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

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

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

<p>文字の行間が1emの時</p>
<div class="lt1em">文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。</div>
<hr>
<p>文字の行間が1.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>

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

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

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

<p>文字の行間が1emの時</p>
<div class="lt1em">文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。</div>
<hr>
<p>文字の行間が1.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>

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

文字の行間が1emの時

文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。

文字の行間が1.5emの時

文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。

文字の行間が2emの時

文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。文字の行間をcssでコントロールします。この文字はサンプルです。

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

まとめ

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

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

投稿カレンダー

2020年10月
 1234
567891011
12131415161718
19202122232425
262728293031  

Technology

category

©狼読