今回は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狭くしたい場合」でした。
