line-heightプロパティでフォントサイズが変わっても行間の比率を同じにする方法

line-heightプロパティは行間を指定するプロパティですが、同じHTML内で均一の行間にしている場合、h1要素とp要素などの要素で見え方に違いがでる場合はないですか?全て共通の値にる場合フォントサイズによって見え方が変わり、それはpxや%などの値で指定した場合に起こります。その場合解決方法を記録します。

CONTENTS

1.line-heightをpxや%で指定した場合

行間をpxや%などの単位をつけて指定した場合は以下のようになります。

pxで指定した場合

h1要素がフォントサイズ24pxでline-heightが13pxに指定しているので当然改行した場合、文字が重なります。

見出し
見出し

説明説明
説明説明説明

%で指定した場合

%で指定した場合はフォントサイズが10pxの場合130%にすると13pxになります。結果はさきほどのpx指定と同じような表示になります。

見出し
見出し

説明説明
説明説明説明

2.line-heightを数値のみで指定する

今度は同じ内容を数値のみで指定してみたいと思います。数値のみとは単位を入れずに数字だけを記入します。

見出し
見出し

説明説明
説明説明説明

line-heightを単位なし数値のみで指定することでどのサイズでもおなじ比率で行間を指定することができました。指定のフォントサイズ×全体のline-height=指定のline-heightの値になります。いかがでしょうか。この方法だとline-heightをいちいち場所によって変更する必要がないので、基本単位なしで使うのがいいとおもいます。ぜひ活用されてみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Related Posts

〜PHPのコードを書くルール〜

背景だけ透過させて文字だけ透過させない方法

これを覚えるとデザインの幅が広がる!CSS擬似クラスと擬似要素