HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


行間を調整する

CSSの書き方

line-height:値 ;

CSSの詳細情報
プロパティ名 line-height 読み方 ライン・ハイト
初期値 normal 意味 行間調節
サイズ指定/パーセント指定
対象 すべての要素
CSSレベル CSSレベル1 対応ブラウザ Windows MAC
継承 する IE 5.0以上/FF1.0/NS7.1/OP8.0 SF/IE5.0

解説

行間を調節するスタイルシートです。サイズまたはパーセントによる指定が可能です。

サイズ(数値)による指定

「14px」などサイズ(数値)で指定した場合は、そのサイズが行の高さとなります。実際に表示されている文字がこの指定した数値より小さい場合は、行間が空き、逆に大きい場合には、行と行が重なり合って表示されます。

パーセント(相対的な数値)による指定

パーセントなど相対的な数値で行間を指定した場合、基準となる長さは「line-height」プロパティを指定した要素の文字の大きさです。

例えば、スタイルシートを設定しない状態で、文字が10ピクセルで表示された文章に150%の行間を与えた場合、行間は「10×(150-100)÷100」で、5ピクセルの間隔が空くことになります。従って、パーセントで指定した場合の初期値は「100%」になります。

CSS/HTMLサンプル

p.line { line-height:150%; }

段落要素の文字列の行間をクラス指定で文字サイズの50%にする サンプル