line-height
まとまった文章の区切りとして、空の行を入れることがあります。⇩
そうすることで、内容のまとまりをはっきりさせる、文章の区切りをより明確にすることができます。
しかし、一行分まるまる空いていると⇧、前の文章とのつながりがなんとなく途切れてしまう気になります。しかし、空きは欲しい、⇩
この広すぎる空き具合をどうにかしたい!
⇧そこで、空行の高さを調節するCSSセレクタの登場となります。
行の高さを設定するCSSプロパティ
高さの設定値は長さを使う
CSS プロパティ
line-height: 0.5;
line-height: 50%;
line-height: 0.5em;
line-height: 8px;
いずれも、もとの行の高さ(16px)を半分にします。☞ 値の詳細
埋め込みコード
HTML
<p> まとまった文章の区切りとして、空の行を入れることがあります。</p>
<p style="line-height: 0.5;"> </p>
<p> そうすることで、内容のまとまりをはっきりさせる、文章の区切りをより明確にすることができます。</p>
<p style="line-height: 0.5;"> </p>
<p> しかし、一行分まるまる空いていると、前の文章とのつながりがなんとなく途切れてしまう気になります。</p>
表示
まとまった文章の区切りとして、空の行を入れることがあります。
そうすることで、内容のまとまりをはっきりさせる、文章の区切りをより明確にすることができます。
しかし、一行分まるまる空いていると、前の文章とのつながりがなんとなく途切れてしまう気になります。
☞ CSS埋め込み
高さの設定値の詳細
normal
初期設定値です。見ている人のPCブラウザに依存します。
数値のみ(単位なし)
文字(text)の高さに数値をかけた分の高さになります。計算はその時使われているフォントを基にします。
長さ(単位付き)
行の高さを長さで指定します。
割合(%)
文字(text)の高さに対して割合で指定します。計算はその時使われているフォントを基にします。