CSS テキスト

テキストのフォーマット

このテキストには、テキストフォーマットプロパティのうちのいくつかを使用してスタイルを設定しています。見出しは、text-align、text-transform、color プロパティを使用しています。段落は、indent、align、文字間のスペースを指定しています。この色付きの "Try it Yourself" リンクからはアンダーラインを削除しています。

テキスト色

color プロパティは、テキストの色を設定するときに使用します。

CSS による色は、多くの場合、次により指定します:

色名 - 例："red"
HEX値 - 例："#ff0000"
RGB値 - 例："rgb(255,0,0)"

使用可能な色の値の完全なリストについては、CSS 色値をご覧ください。

ページのデフォルトのテキスト色は、body セレクタで定義します。

例

body {
color: blue;
}

h1 {
color: green;
}

Try it Yourself ❯

注: W3C 準拠の CSS 用：color プロパティを定義する場合は、background-color も定義しなければなりません。

テキストの位置揃え

text-align プロパティは、テキストの横方向の位置揃えに使用します。

テキストは、左揃え、右揃え、中央揃え、均等割りにすることができます。

text-alignを、"justify"（均等割り）に設定した場合、各行が等しい幅を持つように引き伸ばされ、左右のマージンは（雑誌や新聞ように）一直線になります。

次の例は、テキストの中央揃えと左右揃えを示しています（デフォルトでは、テキストの方向が左から右の場合は左揃えに、テキストの方向が右から左の場合は右揃えです）：

例

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

Try it Yourself ❯

text-align プロパティに "justify"（均等割り）に設定した場合、各行が等しい幅を持つように引き伸ばされ、左右のマージンは（雑誌や新聞ように）真直ぐ揃います：

例

div {
text-align: justify;
}

Try it Yourself ❯

テキストの装飾

text-decoration プロパティは、テキストへの装飾設定や削除に使用します。

値 text-decoration: none; は、多くの場合、リンクからアンダーラインを取り除くために使用します:

例

a {
text-decoration: none;
}

Try it Yourself ❯

その他の text-decoration の値は、テキストの装飾のために使用します：

例

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

Try it Yourself ❯

注:リンク以外のテキストに下線を引くのは、ユーザが混乱するのでお勧めしません。

テキストの変換

text-transform プロパティは、テキストの文字を大文字や小文字に指定する際に使用します。

このプロパティは、文字全体を大文字や小文字にしたり、単語の先頭文字だけを大文字にするために使用します。

例

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

Try it Yourself ❯

テキストのインデント

text-indent プロパティは、テキスト先頭行の字下げを指定するときに使用します。

例

p {
text-indent: 50px;
}

Try it Yourself ❯

文字間隔

letter-spacing プロパティは、テキストの文字の間にスペースを指定するために使用します。

次の例は、文字間のスペースを増加または減少する方法のデモです：

例

h1 {
letter-spacing: 3px;
}

h2 {
letter-spacing: -3px;
}

Try it Yourself ❯

行の高さ

line-height プロパティは、行間隔を指定するために使用します：

例

p.small {
line-height: 0.8;
}

p.big {
line-height: 1.8;
}

Try it Yourself ❯

テキストの方向

direction プロパティは、要素のテキストの方向を変更するために使用します：

例

div {
direction: rtl;
}

Try it Yourself ❯

単語の間隔

word-spacing プロパティは、テキスト中の単語の間にスペースを指定するために使用します。

次の例は、単語間のスペースを増加または減少する方法のデモです：

例

h1 {
word-spacing: 10px;
}

h2 {
word-spacing: -5px;
}

Try it Yourself ❯

その他の例

要素内テキストの折り返しの無効化
この例は、要素内の折り返しを無効にする方法のデモです。

画像の縦位置揃え
この例は、テキストおける画像の縦位置揃えを設定する方法のデモです。

テキストへ影を追加
この例は、テキストへ影を追加する方法のデモです。

練習問題で確認テスト！

Exercise 1 ❯ Exercise 2 ❯ Exercise 3 ❯ Exercise 4 ❯ Exercise 5 ❯

全ての CSS テキスト・プロパティ

プロパティ	説明
color	テキストの色を設定する
direction	テキストの方向/書字方向を指定する
letter-spacing	テキストにおける文字間のスペースを増減する
line-height	行の高さを設定する
text-align	テキストの横位置揃えを指定する
text-decoration	テキストに加える装飾を指定する
text-indent	テキストブロックの先頭行にインデントを指定する
text-shadow	テキストに影の効果を指定する
text-transform	テキストの大文字化を制御する
unicode-bidi	同一文書内で、複数言語サポートをオーバーライドする必要があるかどうかを設定または返すために、 direction と一緒に使用する
vertical-align	要素の縦位置揃えを設定する
white-space	要素内の空白の処理方法を指定する
word-spacing	テキストにおける単語間のスペースを増減する

❮ 前章へ次章へ ❯