行の間隔【line-height】：CSS入門
CSS入門（19）
今回は、line-heightを使って、行の間隔を調整します。
お話は、次の順番で進みます。
行の間隔（line-height）を設定する
1：前回までのお話
（01）
前回は、text-indentを使って、段落をインデントさせました。
以下、前回までのCSSコードです。
2：行の間隔（line-height）を設定する
（02）
行の間隔は、どこか分かるでしょうか？行の間隔なので、行と行の間になります。段落の間隔とは違うので、誤解なきようよろしくお願いします。
（03）
line-heightは、例えば次のように書きます。
p { line-height: 140%; }
140%というのは、「文字の高さを100%とすると、40%分を行間にしますよ」ということです。例えば、200%にすれば、1行分の行間があくことになります。
それでは、追加しておきましょう。
（04）
ブラウザで表示してみましょう。最適な行間に設定しておくと、読みやすくなるんだなぁ。
あ、そうそう。ブラウザを全画面表示していると、文章が折り返さないので、適当に縮めてみてください。
最適な行間とは？
あまり、行間が狭くても、広くても良くありません。一般的に最適と言われている行間というものがあるので、ご紹介しておきます。
スペースが限られている場所 | 130% |
|---|---|
一般的な設定範囲 | 140%〜150% |
最高限度 | 160% |
「どうやって数値を決めるのか？」と言えば、次の要項などをもとにして、検討します。
- ターゲットユーザ
- フォントの種類
- 文字の大きさ
- 文字の間隔
- ブラウザ
- ひと段落の文章の長さ
当り前ですけれども、読んでくれる より多くの人が、読みやすいと感じてくれることが大切です。
次回予告
次回は、文字の間隔をあける【letter-spacing】について書く予定です。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
15：まとめ
作成日：2008/05/01 更新日：2008/05/01
« 「段落のインデント【text-indent】」｜「文字の間隔【letter-spacing】」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/285-9ca7da68
