テキストに関するスタイル
ここではテキストに関するスタイルについて説明していきます。
テキストは「フォント」と同じ意味で捉えられがちですが、「フォント」が文字そのものを指すのに対して、「テキスト」は文書を指す、という違いがあります。
例えば、「文章の左寄せ・中央ぞろえ・右寄せ」や「行間隔・文字間隔」なんかがテキストのスタイルに当ります。
- line-height (行間の設定)
- letter-spacing (文字間隔の設定)
- text-align (行揃えの設定)
- vertical-align (縦揃えの設定)
行間のスタイル(line-height)
文字の行間を設定するにはこのスタイルを使用します。
ホームページの文章というのは、見てくれる人が読みやすいようなレイアウトにする必要があります。そこで、このline-heightによって、行間を設定してあげるのが一般的になっています。
現在は単位をつけず、数字で指定してあげるのが主流です。
<記述例>
行間0.5
p{line-height:0.5}
行間1.0
p{line-height:1}
行間1.2
p{line-height:1.2}
<表示例>
行間”0.5”
これが行間”0.5”です。
文字が重なって読みにくいですね・・
行間”1”
これが行間”1”です。
少し文字がくっつぎすぎでしょうか
行間”1.2”
これが行間”1.2”です。
これぐらいがちょうどいいかな?
行間は”1”を基準として、1より小さくなると狭くなり、大きくなると広くなるようになっています。
この他にも「em」や「%」などで指定をすることもできますが、レイアウトが崩れる可能性があるので単位はつけずに数字のみで指定するのが推奨されています。