行間を広くする - 行の高さを指定する - CSS
CSSを利用して、行間を広くする。行の高さを指定するコードを紹介します。
概要
行間を変更するには、行の高さを明示的に指定します。行の高さはCSSのline-heightプロパティで指定できます。
コード:絶対値を指定する場合
以下のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="LineHeight.css" />
<meta charset="utf-8" />
</head>
<body>
<div class="TextFrame">「今ではサーバーやPCを自作するよりも、メーカ製のPCを安く購入しCPUやメモリを増設/換装するほうがトータルコストは安くなってしまいました。今回もサーバーの増設が必要となりメーカー製のサーバーを購入することとなりました。なるべく安価なサーバーを探したところ今回は、HP ProLiant ML110 G6(ディスクレス、メモリ1GB)がほぼ30,000円で購入できることがわかり、これをベースにメモリの増設とCPUの換装をしてサーバーを構築することにしました。」</div>
</body>
</html>
.TextFrame {
line-height:48px;
width:480px;
}
実行結果
上記のHTMLファイルを表示します。Webブラウザで下図の画面が表示されます。
行間が広くなっていることが分かります。
LineHeight.cssのline-heightを変更し、24pxにします。
LineHeight.css
.TextFrame {
line-height:24px;
width:480px;
}
上記に変更した後、Lineheight.htmlをWebブラウザで開きます。行間が狭くなったことが確認できます。
LineHeight.cssのline-heightをさらに狭くし、8pxにします。
LineHeight.css
.TextFrame {
line-height:8px;
width:480px;
}
上記に変更した後、Lineheight.htmlをWebブラウザで開きます。行間を狭くしすぎると、手前の行と重なってしまうことが分かります。
コード:相対値を指定する場合
先の行の高さをピクセルや他の単位での絶対値で指定する方法以外に、フォントの値の相対値を指定することもできます。
LineHeight.css
.TextFrame {
line-height:1.0;
width:480px;
}
単位を指定せずに数値を記述すると、フォントのサイズに対する相対値になります。1.0の場合はフォントの高さが行の高さになります。
上記のCSSに変更し、Lineheight.htmlをWebブラウザで開きます。下図の画面が表示されます。行の高さが、フォントの高さと同じになるため、行間がほとんどなくなります。
.TextFrame {
line-height:1.2;
width:480px;
}
CSSを上記に変更します。変更後、Lineheight.htmlをWebブラウザで開きます。下図の画面が表示されます。行の高さがフォントの高さの1.2倍になるため、行間が開きます。
.TextFrame {
line-height:2.0;
width:480px;
}
CSSを上記に変更します。変更後、Lineheight.htmlをWebブラウザで開きます。下図の画面が表示されます。行の高さがフォントの高さの2倍になり、1行分の行間が開きます。
CSSを利用して行間を変更できました。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
