line-heightプロパティ
line-heightは、CSSのプロパティで、行の高さを指定するために使います。
行の高さとは、文字の大きさとその上下の余白の合計のことです。
line-heightを使うと、テキストの行間を調整したり、縦方向の中央揃えをしたりすることができます。
line-heightの書き方は以下のようになります。
|
1 2 |
line-height: 値; |
値には、以下のような種類があります。
- normal: ブラウザが自動的に行の高さを決めます。この値は、フォントや言語によって異なります。²
- 数値: 行の高さを文字の大きさの倍数で指定します。例えば、
line-height: 1.5;とすると、行の高さは文字の大きさの1.5倍になります。この場合、単位は必要ありません。³ - 単位付きの数値: 行の高さをpxやemなどの単位で指定します。例えば、
line-height: 24px;とすると、行の高さは24pxになります。この場合、単位は必要です。 - %: 行の高さを文字の大きさの割合で指定します。例えば、
line-height: 150%;とすると、行の高さは文字の大きさの150%になります。この場合、単位は必要です。
行間をフォントサイズによって調整する。font-sizeが14pxでline-heght:1.5であれば、14×1.5=21で21px行間が開くことになる。
line-heightの例をいくつか見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* 行の高さをブラウザに任せる */ p { line-height: normal; } /* 行の高さを文字の大きさの2倍にする */ p { line-height: 2; } /* 行の高さを30pxにする */ p { line-height: 30px; } /* 行の高さを文字の大きさの200%にする */ p { line-height: 200%; } |
以上が、line-heightの詳しい説明と例です。
text-alignプロパティ
text-alignは、CSSのプロパティで、ブロック要素や表のセル内のインライン要素の水平方向の配置を設定します。¹ 以下のような値があります。
- left: 左寄せにします。
- right: 右寄せにします。
- center: 中央寄せにします。
- justify: 両端揃えにします。つまり、行の幅に合わせて単語間のスペースを調整します。
- start: 行の先頭に寄せます。文字の方向によって左寄せまたは右寄せになります。
- end: 行の末尾に寄せます。文字の方向によって右寄せまたは左寄せになります。
- match-parent: 親要素の方向に合わせてstartまたはendの値を適用します。
text-alignは、ブロック要素に対して指定する必要があります。インライン要素に直接指定しても効果がありません。²
text-alignの例をいくつか見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* テキストを左寄せにする */ p { text-align: left; } /* テキストを右寄せにする */ p { text-align: right; } /* テキストを中央寄せにする */ p { text-align: center; } /* テキストを両端揃えにする */ p { text-align: justify; } |
以上が、text-alignの詳しい説明と例です。
text-indentプロパティ
text-indentは、CSSのプロパティで、テキストの一行目に字下げをするために使います。
字下げとは、段落の最初の文字を右にずらすことです。
text-indentを使うと、文章の見た目を整えたり、見出しやリストの記号との間隔を調整したりすることができます。
text-indentの書き方は以下のようになります。
|
1 2 |
text-indent: 値; |
値には、以下のような種類があります。
- normal: ブラウザが自動的に字下げの幅を決めます。この値は、フォントや言語によって異なります。²
- <length>: pxやemなどの単位で字下げの幅を指定します。正の値であれば右に、負の値であれば左に字下げします。
- <percentage>: 包含ブロックの幅の割合で字下げの幅を指定します。正の値であれば右に、負の値であれば左に字下げします。
- each-line: 強制的な改行の後の各行も、ブロックコンテナーの先頭行と同様に字下げします。ただし、自動折り返しの次の行は字下げしません。
- hanging: インデントされる行が逆になります。つまり、先頭行以外のすべての行を字下げします。
text-indentの例をいくつか見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/* テキストに5pxの字下げをつける */ p { text-indent: 5px; } /* テキストに10%の字下げをつける */ p { text-indent: 10%; } /* テキストに-1emの字下げをつける */ p { text-indent: -1em; } /* テキストに2emの字下げをつけて、強制改行の後の行も字下げする */ p { text-indent: 2em each-line; } /* テキストに2emの字下げをつけて、先頭行以外の行を字下げする */ p { text-indent: 2em hanging; } |
以上が、text-indentの詳しい説明と例です。
letter-spacing
letter-spacingは、CSSのプロパティで、テキストの水平方向の字間のスペースに関する挙動を設定します。
この値はテキストを描画する際に文字間の自然な空間に追加されます。
正の値の場合は、文字と文字の間が開きます。負の値の場合は、文字と文字が互いに近づきます。
letter-spacingの書き方は以下のようになります。
|
1 2 |
letter-spacing: 値; |
値には、以下のような種類があります。
- normal: ブラウザが自動的に字間の幅を決めます。この値は、フォントや言語によって異なります。
- <length>: pxやemなどの単位で字間の幅を指定します。正の値であれば右に、負の値であれば左に字間をずらします。
- <percentage>: 包含ブロックの幅の割合で字間の幅を指定します。正の値であれば右に、負の値であれば左に字間をずらします。
letter-spacingの例をいくつか見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* テキストに5pxの字間をつける */ p { letter-spacing: 5px; } /* テキストに0.1emの字間をつける */ p { letter-spacing: 0.1em; } /* テキストに-0.05emの字間をつける */ p { letter-spacing: -0.05em; } |
以上が、letter-spacingの詳しい説明と例です。