line-heightプロパティでフォントサイズが変わっても行間の比率を同じにする方法
Web coding basic
Tags:CSS
line-heightプロパティは行間を指定するプロパティですが、同じHTML内で均一の行間にしている場合、h1要素とp要素などの要素で見え方に違いがでる場合はないですか?全て共通の値にる場合フォントサイズによって見え方が変わり、それはpxや%などの値で指定した場合に起こります。その場合解決方法を記録します。
CONTENTS
1.line-heightをpxや%で指定した場合
行間をpxや%などの単位をつけて指定した場合は以下のようになります。
pxで指定した場合
h1要素がフォントサイズ24pxでline-heightが13pxに指定しているので当然改行した場合、文字が重なります。
見出し
見出し
説明説明
説明説明説明
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="line-height-example"> <h1>見出し<br>見出し</h1> <p>説明説明<br>説明説明説明</p> </div> <style> .line-height-example{ font-size:10px; line-height:13px; } .line-height-example h1{ font-size:24px;//line-heightは13px margin-top:30px; } .line-height-example p{ font-size:12px;//line-heightは13px } </style> |
%で指定した場合
%で指定した場合はフォントサイズが10pxの場合130%にすると13pxになります。結果はさきほどのpx指定と同じような表示になります。
見出し
見出し
説明説明
説明説明説明
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="line-height-example2"> <h1>見出し<br>見出し</h1> <p>説明説明<br>説明説明説明</p> </div> <style> .line-height-example2{ font-size:10px; line-height:130%; } .line-height-example2 h1{ font-size:24px;//line-heightは13px margin-top:30px; } .line-height-example2 p{ font-size:12px;//line-heightは13px } </style> |
2.line-heightを数値のみで指定する
今度は同じ内容を数値のみで指定してみたいと思います。数値のみとは単位を入れずに数字だけを記入します。
見出し
見出し
説明説明
説明説明説明
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="line-height-example3"> <h1>見出し<br>見出し</h1> <p>説明説明<br>説明説明説明</p> </div> <style> .line-height-example3{ font-size:10px; line-height:1.3;//line-heightは10px×1.3なので13px } .line-height-example3 h1{ font-size:24px;//line-heightは24px×1.3なので31.2px margin-top:30px; } .line-height-example3 p{ font-size:12px;//line-heightは12px×1.3なので15.6px } </style> |
line-heightを単位なし数値のみで指定することでどのサイズでもおなじ比率で行間を指定することができました。指定のフォントサイズ×全体のline-height=指定のline-heightの値になります。いかがでしょうか。この方法だとline-heightをいちいち場所によって変更する必要がないので、基本単位なしで使うのがいいとおもいます。ぜひ活用されてみてください。