CSSでWEB上の文章の行間を狭くしたいor狭くしたい場合

HTML/CSS

今回はHTMLで書いた文章をCSSで行間を調整して、読み易い文章にする方法を紹介します。

今回使うCSSプロパティは「line-height」です。

こんな場合に使用

  • 読みやすさを考えて行間を調整したい
  • 幅を合わせた

line-heightで行間を調整

line-heightは、テキストの行間を調整する際に使用するCSSプロパティです。

line-heightプロパティは基本的に単位無しで指定します。単位無しで指定する事で、その行で使用されているフォントサイズを1とした倍率で1行の高さを指定できます。

例えば、<p>のフォントサイズが17pxに設定されている場合、line-heightを1.5と設定した場合の行間の高さは「17×1.5=25.5px」となります。

幅の調整をします。
line-heightは1.5です。

幅の調整をします。
line-heightは2です。

通常のWEBサイトはline-heightを1.5〜1.8程度に設定されている事が多いです。見出しなど通常のテキストよりも大きくその分line-heightが広がってしまう部分は1.0〜1.5と低い数値にする事が一般的です。

<p">幅の調整をします。<br>line-heightを1.5です。</p>
<style>
p {
line-height: 1.5;
}
</style>

以上が「CSSでWEB上の文章の行間を狭くしたいor狭くしたい場合」でした。

HTML/CSSCSS,WEB

Posted by KT