• トップページ
  • CSS編
  • テキスト表示関連(text-align、text-decoration、line-height、white-space)プロパティの仕様と使い方

テキスト表示関連(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-linetext-decoration-styletext-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

本格的なスキルを身につける

オンラインによるWebプログラミングスクールの無料レッスンを受けてみたい方はTechAcademyの無料体験がおすすめですよ。

CSS編に戻る

「CSS編」に関する他の手順
「CSS編」に関するTips

「CSS編」に関するTipsはありません。

このページのトップに戻る