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;
サンプル: ブロック要素