記事は読んでもらってナンボです。読みやすくするには空間、行間が非常に大切です。デフォルトでは行間が狭かったり広かったりで、どうも読みづらいことがあります。CSSで行間を詰めたり広げる方法を解説します。行間を詰めたいのに変わらない(効かない)場合は下記を参照してください。【CSS】line-heightが効かない原因と解決方法4選line-heightは行間を調整するCSSです。「line-heightを指定したのに行間が変わらない!?」ine-heightが効かない原因と解決方法を4つ紹介します。【結論】line-heightを指定する行間を詰めたり広げるには「line-height」を指定します。2」を指定した例です。class="example">テキストテキスト<br>テキストテキスト<br>テキストテキスト</p>line-heightで指定した数値が大きいほど行間が開き、小さいほど詰まります。高さが確保され、その上下中央に文字が置かれます。よって1行の上下の隙間は次のような式になります。{(指定した数値-1)÷2}×文字サイズややこしいですが、指定した数値が1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。2行以上になったとき、上と下分の隙間となるため、2なら0.5文字+0.5文字で1文字分開くことになります。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む単位をつけるかつけないか結論から言うと単位はつけないことをおススメします。line-heightは指定した値の文字数分高さを確保するのでemをつけても基本的には同じ結果になります。文中で文字サイズを変えたとき違いがでます。2emテキストテキストテキスト大きい文字テキストテキストテキスト単位をつけない場合、大きい文字サイズに合わせて行間にゆとりができますが、単位emをつけた場合ゆとりがなくなります。【非推奨】pxで指定すると固定pxで指定すると文字サイズに関わらず行間を一定にできます。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト文字サイズが変わると行間が開きすぎたり、文字が重なることもあります。ユーザーによっては文字サイズを変えていることもあるため、pxでの指定はオススメしません。下記は1.25~2の4段階の行間の例です。1.25の文章はこんなかんじです。h2やliなど、多くても3行程度になる要素をまとめる場合に適切でしょう。1.5の文章はこんなかんじです。tdのように、幅が狭いためよく改行されるが、ある程度まとめたいという要素におススメです。1.75の文章はこんなかんじです。長文でも読みやすい行間であり、メインとなるブログ部分や記事、読ませる文章部分におススメです。2の文章はこんなかんじです。1.75よりさらに行間があきます。文字サイズを考慮しつつ、よりゆとりを持たせたい場合におススメです。サイトのデザインやデザイナーの考えにもよりますが、私は記事部分の行間は1.75を指定しています。marginやpaddingでの行間調整line-heightで行間を指定すると1行の上と最後の行の下は0.5文字分だけ開き、それ以外の行では1文字分だけ開くという状況になります。tdなど枠線があるときはとくに顕著になります。これを回避するためpaddingで調整しましょう。0を指定テキストテキストテキストテキストテキストテキストこのように指定すると常に1文字分開いているように見せることができます。line-heightはhtml要素内の文字の行間を指定できます。html要素同士の隙間を空けるにはmarginやpaddingで調整しましょう。当サイトではpタグにline-heightもmarginも指定しています。pタグとpタグの間に隙間ができることで1文がわかりやすくなり、読みやすくしています。タグ別オススメの値line-heightは子孫要素へ継承します。そのためbodyに指定すれば、すべてのタグで同じ行間にすることもできるのですが、line-heightはhtmlタグによって値を変えることをおすすめします。行間が広いことで読みやすくなることもあれば、ある程度一塊感を出した方がいいことがあるためです。デザインにおいて上下にpaddingではない隙間ができるため高さの調整をしたいときに邪魔になることもあります。【小さめの値(1.25)推奨】h1~h6、li、tdh1やliは2~3行で一塊となる要素です。行間を狭くすることで一塊感がでて一瞬で把握できます。その代わり前後の要素とは別の塊であることを表すため、marginかpaddingで離してあげみましょう。tdはマスが小さくなりがちです。行間より左右のpaddingが小さいとバランスが悪くなります。行間を狭くして一塊感を出すとともに、表が縦伸びすることを防ぐことができます。td内が文章になる場合は1.5くらいの値でもいいかもしれません。【大きめの値(1.75)推奨】ppタグは文章を表示させます。文章はある程度行間があるほうが読みやすくなります。それだけではなく、2~4行ごとにさらに行をあけるともっと読みやすくなります。以上、CSSで行間を詰めたり広げる方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。