CSS -行揃え・幅・行の高さ-
行揃え
ブロックレベル要素内の行を揃える場合には、text-alignプロパティを使用します。
text-alginプロパティを使用することで、ブロックレベル要素内のテキストを左揃え、右揃え、中央揃え、均等配置のいずれかを指定できます。
ブロックレベル要素自体の行そろえはおこなうことはできません。
text-align:center;
値 | 説明 |
---|---|
left | 左揃えで配置(日本語ブラウザでは標準) |
center | 中央揃え配置 |
right | 右揃えで配置 |
justify | 均等に割りつけて配置 英文の単語間のスペースで調整。日本語で均等に割りつけるにはtext-justifyプロパティも必要です。 |
横幅
ブロックレベル要素の横幅を指定する場合は、widthプロパティを使用します。
一般的なブラウザでは、横幅の値としてautoが自動的に設定されています。
width : 250px;
値 | 説明 |
---|---|
auto | ブラウザに依存した値(横幅いっぱいに広がる。基本的に100%と同じ) |
数値指定 | pxなどの単位つき数値 |
割合指定 | %などの単位つき割合(100%だと元のサイズ) |
行の高さ
行の高さを設定する場合は、line-heightプロパティを使用します。
ほとんどのブラウザでは、行の高さの初期値はブラウザとフォントが最初から 持っている値を指定するnormalが設定されています。
line-height : 1.8;
値 | 説明 |
---|---|
normal | ブラウザとフォントが持っている初期値 |
倍率 | 単位なしの倍率。テキストの高さを1とする |
割合 | %を使った割合。テキストの高さを100%とする |
一般的に読みやすい行間隔はフォントサイズの1.5倍くらいです。
メイリオの表示は、他のフォントに比べて、標準で1.5倍程度の行の高さが設定されています。
line-heightプロパティをpxやptのような数値で指定する場合は、文字サイズを拡大したり、フォントサイズの 違う要素が混在したりといった状況になった場合に行間が、詰まり過ぎてしまいますので、あまりお勧めできません。 単位つきの割合での指定も同様です。以上の理由から、行間は倍率で指定することが望ましいと言われています。
インデント
text-indentプロパティを使用するとブロックレベル要素に含まれるテキストの1行目のインデントを指定することが できます。
インデントとは、段落の最初の1文字分あける字下げのことです。
text-indent : 1em;
値 | 説明 |
---|---|
normal | ブラウザの初期値を指定(一般的なブラウザでは0px) |
数値 | 単位つきの数値で指定 |
割合 | %を使った割合で指定 |