行間(行の高さ)を指定するプロパティです。
line-height:
小さい文字で、行間もくっついて読みにくいサイト様に出くわすことがあります。私はそれだけで、直帰!
行間は、ある程度の余裕を持たせた方が読みやすいですね。
それでは、行間を変える方法です。行間を変えるということは改行幅が変わるという事です!!
????????
ページ全体の行間を指定
htmlに直接記述する場合は、<head>と</head>の間に下記のタグを入れます。ページ全体に適用されます。
例 ↓↓ ページ全体を150%の行間にする場合
<style type="text/css">
<!--
body {line-height: 150%;}
-->
< /style>
line-height: 数値
line-heightの後には数値が入りますが、指定できる主な数値には
px、%、em などがあります。
px ピクセル | 絶対的単位 | 1px = 画面上の1ピクセル |
% パーセント | 相対的単位 | 親要素の文字サイズに対する割合 |
em エム | 相対的単位 | 1em = 1文字分の長さ ブラウザの文字基準を1emとした値 親要素の文字サイズで変化する |
相対的単位は親要素のフォントサイズを基準に対する比率です。
親要素に何も指定しなかった場合、1emは16px 100%は16pxになります。
外部スタイルシートで行間の指定
cssに記述することによって、段落・指定した範囲など部分的に行間を変えることもできます。さらにhtmlがスッキリするのでメリットが大きいですネ。
cssのbodyに記述することで、ページ(サイト全体)全体の行間を指定します。
css
body { line-height: 150%; }
<p>段落要素の行間を変える。
css
p { line-height: 150%; }
指定した範囲の行間を変える。<div> <p> にクラス名を割り当てる
css
.sample { line-height: 150%; }
html
<div class="sample">ここへ文章</div>
html
<p class="sample">ここへ文章</p>
改行幅のウェブ上での見え方をご確認ください。
????????