テキスト表示関連（text-align、text-decoration、line-height、white-space）プロパティの仕様と使い方
カテゴリ：CSS編
テキスト表示関連プロパティ
このページではテキスト関連のプロパティを解説したいと思います。
テキスト表示の定義で主に使用されるプロパティは以下となります。
| プロパティ名 | 説明 |
|---|---|
| text-align | テキストの行の揃え位置 |
| text-decoration-line | テキストの傍線 |
| text-decoration-style | テキストのスタイル | text-decoration-color | テキストの色 | text-decoration | text-decoration-line、text-decoration-style、text-decoration-colorをまとめて指定 |
| line-height | テキストの行の高さ |
| white-space | テキストのホワイトスペース・改行 |
text-align
記事などの文書は左揃えで表示しますが、画像のキャプションなど中央揃えで表示したい場合は、text-alignプロパティを使用して揃え位置を指定します。
左揃え：
article {
text-align: left;
}中央揃え：
p.caption {
text-align: center;
}text-alignに指定可能なキーワード
text-alignに指定可能なキーワードは以下となります。
| キーワード | 説明 |
|---|---|
| start | ラインボックスの始端に揃える |
| end | ラインボックスの終端に揃える |
| left | ラインボックスの左端に揃える |
| right | ラインボックスの右端に揃える |
| center | ラインボックスの中央に配置 |
| justify | text-justifyプロパティで指定された方法に従ってテキストを揃える |
| justify-all | text-align-allとtext-align-lastの両方と最後の行をjustify揃えにする |
text-decoration-line
テキストに傍線を引きたい場合にはtext-decoration-lineプロパティを使用します。
例）
span.underline {
text-decoration-line: underline;
}<p>明日の遠足は<span class="underline">雨具を忘れない</span>ようにしてください。</p>明日の遠足は雨具を忘れないようにしてください。
text-decoration-lineに指定可能なキーワード
text-decoration-lineに指定可能なキーワードは以下となります。
| キーワード | 説明 |
|---|---|
| none | テキストを装飾しない |
| underline | テキストに下線を引く |
| overline | テキストに上線を引く |
| line-through | テキストに中線を引く |
| blink | テキストを点滅させる |
text-decoration-style
テキストの傍線にスタイルを適用したい場合にはtext-decoration-styleプロパティを使用します。
text-decoration-styleに指定可能なキーワード
text-decoration-styleに指定可能なキーワードは以下となります。
| キーワード | 説明 |
|---|---|
| solid | 直線 |
| double | 二重線 |
| dotted | 点線 |
| dashed | 破線 |
| wavy | 波線 |
例）
span.underline {
text-decoration-line: underline;
text-decoration-style: wavy;
}<p>明日の遠足は<span class="underline">雨具を忘れない</span>ようにしてください。</p>明日の遠足は雨具を忘れないようにしてください。
text-decoration-color
テキストの傍線に色を付けたい場合にはtext-decoration-colorプロパティを使用します。
文字色をカラーネームもしくはカラーコードで指定します。
カラーネーム、カラーコードについてはカラーネーム・カラーコード一覧をご参照ください。
span.underline {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}<p>明日の遠足は<span class="underline">雨具を忘れない</span>ようにしてください。</p>明日の遠足は雨具を忘れないようにしてください。
text-decoration
text-decorationプロパティにtext-decoration-line、text-decoration-style、text-decoration-colorをまとめて指定することも可能です。
例）
span.underline {
text-decoration: underline wavy red;
}<p>明日の遠足は<span class="underline">雨具を忘れない</span>ようにしてください。</p>明日の遠足は雨具を忘れないようにしてください。
line-height
テキストの行の高さ（行間）を変更したい場合は、line-heightプロパティを使用します。
文字のサイズに合わせて相対的に行間が決定されるように、単位としてemを用いて指定することをお勧めいたします。
使用できる単位についてはCSSで使用できる単位をご参照ください。
p.article {
line-height: 3.0em;
}<p class="article">
最近はディスプレイ解像度の向上により、文字サイズと共に行間も広めにとるデザインが主流になってきています。また、一般的にPCとスマートフォンでは最適な行間が異なるため、それぞれ見やすい高さに調整することが望まれます。
</p>最近はディスプレイ解像度の向上により、文字サイズと共に行間も広めにとるデザインが主流になってきています。また、一般的にPCとスマートフォンでは最適な行間が異なるため、それぞれ見やすい高さに調整することが望まれます。
white-space
文章の折り返しの方法を変更する場合はwhite-spaceプロパティを使用します。
white-spaceに指定可能なキーワード
white-spaceに指定可能なキーワードと振る舞いは以下となります。
| キーワード | 自動改行 | ホワイトスペースの扱い | 改行の扱い |
|---|---|---|---|
| normal | ボックスサイズに合わせて自動改行 | 無視 | 半角スペースに変換 |
| pre | 自動改行しない | そのまま表示 | そのまま表示 |
| nowrap | 自動改行しない | 無視 | 半角スペースに変換 |
| pre-wrap | ボックスサイズに合わせて自動改行 | そのまま表示 | そのまま表示 |
| break-spaces | ボックスサイズに合わせて自動改行 | 無視 | そのまま表示 |
word-wrapプロパティとの違い
自動改行を定義するプロパティとしてword-wrapというプロパティも存在します。
キーワードにbreak-allを指定した場合は自動改行させる、keep-allを指定した場合は自動改行させないようにできます。
しかし、break-allキーワードはCJK （中国語、台湾語、日本語、韓国語）には適用されないという罠があります。
日本語Webサイトの製作者は通常、日本語の自動改行もなされることを想定しているため、混乱が生じる恐れがあります。
一方、keep-allキーワードは日本語にも適用されます。
なお、white-spaceプロパティのキーワードはすべて日本語も含めて適用されます。
そのため、自動改行させたい場合にはwhite-spaceプロパティ、自動改行させたくない場合はword-wrapプロパティを使用するように使い分けるようにしましょう。
公開日時：2019年06月29日 15:02:09
