Title

text-decorationとは

text decoration とは次の二つの語句からなるCSSのプロパティです。

text

読み: テキスト
意味: 文字、文章

decoration

読み: デコレーション
意味: 飾り付け、装飾、勲章

目次に戻る

text-decorationプロパティの概要

このプロパティはHTML文書中のテキストにライン装飾を施すために用いられます。

text-decorationプロパティはテキスト装飾の一括プロパティであり、派生する個別プロパティに以下の3つが存在します。

• text-decoration-color
• text-decoration-line
• text-decoration-style

つまり、この個別プロパティの設定値を半角スペースで区切りながら指定することで、複数の装飾値を一括で設定することができるということになります。

ブロックレベル要素に設定した場合、その要素に含まれる全てのインライン要素に適用され、 インライン要素に設定した場合、その要素が生成する全てのボックスに適用されます。

なお、値を一括で指定した場合に旧型のブラウザでは表示されない場合があります。

目次に戻る

実機サンプルとサンプルコード

このプロパティは、設定値を個別指定、または半角スペース区切りで複数の値を同時に指定することができます。 省略された値は初期値になります。

構文

この構文で記載している各値は、設定する順番が入れ替わっても問題ありません。

• text-decoration-color
• text-decoration-line
• text-decoration-style

セレクター{text-decoration: color値 line値 style値}

初期値: currentColor none solid

初期値の1つ目であるcurrentColorはブラウザ既定のラインカラーが選択されます。次のnoneはラインの種類のことです。 最後のsolidは使用されるラインのスタイルのことです。各値は省略することができますので、その場合はここで説明している初期値が 自動的に設定されるということになります。

それでは実際にサンプルで見ていきましょう。 サンプルはdiv要素を使って検証を行っていきます。

div{
	text-decoration: currentColor none solid;
}	

サンプルには、全く何も装飾がありません。これは種類であるtext-decoration-lineの指定値がnoneのためであり、 この設定を変えるだけでライン装飾が目視できる状態になります。ということで次のサンプルからは、種類に関する設定値 から見ていきたいと思います。

目次に戻る

キーワード値: underline

このキーワードはテキストに下線を引くことができます。text-decoration-lineの設定値です。

div{
	text-decoration: underline;
}	

目次に戻る

キーワード値: overline

テキストの上部に線を引くことができます。text-decoration-lineの設定値です。

div{
	text-decoration: overline;
}	

目次に戻る

キーワード値: line-through

テキストにの真ん中に線を引くことができ、取り消し線の意味で使われています。text-decoration-lineの設定値です。

div{
	text-decoration: line-through;
}	

目次に戻る

サンプル: テキストの上下に線を引く

例えば、text-decoration-lineの設定値を組み合わせると、テキストの上下に線を引くことも可能です。

div{
	text-decoration: underline overline;
}	

目次に戻る

キーワード値: dotted

テキストに点線をを引くことができます。text-decoration-styleの設定値です。

div{
	text-decoration: dotted underline;
}	

目次に戻る

キーワード値: wavy

テキストに波線をを引くことができます。text-decoration-styleの設定値です。

div{
	text-decoration: wavy underline;
}	

目次に戻る

キーワード値: dashed

テキストに破線をを引くことができます。text-decoration-styleの設定値です。

div{
	text-decoration: dashed underline;
}	

目次に戻る

キーワード値: double

テキストに二重線をを引くことができます。text-decoration-styleの設定値です。

div{
	text-decoration: double underline;
}

目次に戻る

線の色の指定

テキストの下部に線を引き赤色を指定したサンプルです。 色の指定方法については、カラーの名称や16進数、RGBコードやRGBAコードなどが使用できます。 詳しくは、色見本 (カラーサンプル) を参考にして下さい。

div{
	text-decoration: red underline;
}

目次に戻る

サンプル: 個別プロパティの使用方法

個別プロパティは、装飾ラインのcolor、line、styleを個別に設定するためのプロパティです。

このサンプルでは、下記の要領で装飾ラインを指定しています。

• text-decoration-colorで赤色
• text-decoration-lineで取り消し線
• text-decoration-styleで二重線

div{
	text-decoration-color: red;
	text-decoration-line: line-through;
	text-decoration-style: double;
}	

目次に戻る

グローバル値

text-decorationプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のcurrentColor none solidに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

div{text-decoration: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承する

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

text-decoration: currentColor none solid;

text-decoration: underline;

text-decoration: overline;

text-decoration: line-through;

text-decoration: underline overline;

text-decoration: dotted underline;

text-decoration: wavy underline;

text-decoration: dashed underline;

text-decoration: double underline;

text-decoration: red underline;

text-decoration: #00F underline;

目次に戻る