文章を読みやすくするための余白調整と行間の調整

文章の読みやすさって、ほとんどは文章の構成や作り方で決まりますが、それ以外のところでも読みやすくすることができます。

それが「文字と文字の余白や行間の調整」です。

今回はそんな文章の余白や行間の調整をcssで簡単に調整する方法を紹介します。

コピペで簡単に反映させた後、お好みの値に調整してみてください。

コピペで簡単！文章を読みやすくするための余白調整と行間の調整

本文の余白調整（letter-spacing）

まずは本文の余白調整から紹介します。

cssはこちら。

 body{
     letter-spacing: .1rem;
 }

上記例だと body 指定にしているので、全体的な余白調整となります。

あまりしないかもしれませんが、pタグだけに対してもOKです。お好みでどうぞ。

行の高さ変更（line-height）

文章が少し長くなるとタグ内で折返しが発生し、2行になったり3行になったりします。

そんなときの行間調整を紹介します。

cssはこちら。

 body{
     line-height:1.6;
 }

こちらも body 指定にしたので、全体的な行間調整となります。

文字サイズが大きくなると行間指定が他と同じサイズだとすごいことになってしまったりするので、そういうときにも使えます。

全体は line-height:1.6; とかにしておいて、 h1,h2 とかだけを line-height:1; とかにしておくとか。そういった使い方もできます。

行間の余白（pタグ等の上下margin）

こちらは文章＝pタグとして、その上下にmarginを指定しておき行間に余白を持たせる方法を紹介します。

cssはこちら。

 p{
     margin:1.5rem 0 0 0;
 }

上記例では、上下にmargin指定ではなく、上部だけにmarginを1.5rem指定する形にしました。

というのも、上下にmargin指定をすると上部と下部どちらも余白の計算をしなければならなくなり大変になりがち。

その他のところも基本ベースを上部に余白を持たせるとすれば計算が単純になっていくので作りやすくなっていきます。

見出し等は上下の余白を微調整したりしてあげたほうが良いですが、基本はこの形で良いかなと思います。

ちなみにmarginの指定は、

margin:上 右 左 下;

の順で指定となっています。

その他にも

margin:上 左右 下;

margin:上下 左右;

margin:上下左右;

と言った指定方法があります。半角スペースで区切ったもので、上から順に値を4つ指定3つ指定2つ指定1つ指定となっています。

まとめ

今回は「コピペで簡単！文章を読みやすくするための余白調整と行間の調整」ということで、文章を読みやすくするためにできることを紹介しました。

面倒なデザインのテクニックをコピペで簡単に、という紹介ではありませんが「文章を読んでもらうためにできること」として、文章の間隔や余白等もデザインの一部として考えたとき、これもデザインのうちだよね。ということで紹介しました。

WordPressならテンプレートを利用して、そのテンプレートの初期設定もあるかと思いますが、その初期設定が文字間隔が詰まっていてもう少し広げたいなぁとか、1からLPやサイトを作っていて初期設定として指定したりだとか、そういったときに利用してもらえればなと思います。

　

良きWEBデザインをっ！

▷WEBデザインカテゴリをチェック