TOP 色々なCSS ≫テキストに関するスタイル(行間の設定)

テキストに関するスタイル

ここではテキストに関するスタイルについて説明していきます。
テキストは「フォント」と同じ意味で捉えられがちですが、「フォント」が文字そのものを指すのに対して、「テキスト」は文書を指す、という違いがあります。
例えば、「文章の左寄せ・中央ぞろえ・右寄せ」や「行間隔・文字間隔」なんかがテキストのスタイルに当ります。

行間のスタイル(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」や「%」などで指定をすることもできますが、レイアウトが崩れる可能性があるので単位はつけずに数字のみで指定するのが推奨されています。

前ページに戻る 次ページへ進む 次ページへ進む
特集

HP作成ソフト徹底比較

ホームページビルダー・ドリームウィ―バー徹底比較

HP作成ソフトの代名詞であるホームページビルダーと、プロご用達の本格派、ドリームウィ―バーについて徹底比較してみました。

inserted by FC2 system