text-decoration : 文字列の装飾線 CSSプロパティ
このページで解説するコードの実行結果。
文字列を装飾する線
sample1
sample2
sample3
なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。
概要
文字列の装飾線を設定する。
| プロパティ | 設定内容 |
|---|---|
text-decoration | 下記の３項目をまとめて指定 |
text-decoration-line | 下線underline、取り消し線line-throughなど |
text-decoration-style | 実線solid、点線dottedなど |
text-decoration-color | 赤red、緑greenなど |
CSS2までは text-decoration のみであったが、CSS3では線の種類（ 実線solid、点線dottedなど ）や色（赤red、緑greenなど ）を指定できるようになった。
CSS2の text-decoration はtext-decoration-line と同じであり、CSS3ではtext-decorationは３項目をまとめて設定するためのプロパティになった。(borderや text-emphasisと似ている)
| 目的 | 全体 | 個別 |
|---|---|---|
| 文字列の装飾線 | text-decoration | text-decoration-linetext-decoration-styletext-decoration-color |
| 境界線 | border | border-styleborder-widthborder-color |
text-decoration
text-decoration-line、text-decoration-style、text-decoration-colorをまとめて指定できる。（それぞれの設定値は後述）
CSS : auto
.sample1 { text-decoration: underline overline solid red; } .sample2 { text-decoration: underline wavy purple; } .sample3 { text-decoration: line-through double green; }
HTML : 適用するHTML
<div class="sample1"> sample1 </div> <div class="sample2"> sample2 </div> <div class="sample3"> sample3 </div>
実行結果
sample1
sample2
sample3
なお、設定の順番を変えても問題ない。
CSS : 設定の順番を変える
.sample1 { text-decoration: underline solid red; } .sample2 { text-decoration: solid red underline; } .sample3 { text-decoration: red underline solid ; }
実行結果
sample1
sample2
sample3
text-decoration-line
| 設定値 | 線 | デフォルト |
|---|---|---|
none | なし | ○ |
underline | 下線 | |
overline | 上線 | |
line-through | 取り消し線 |
複数の設定値を同時に指定することもできる。
なお、文字列を点滅させる設定値「blink」は廃止予定であり、ほとんどのブラウザではnoneとして扱われる。
まず、text-decoration-lineの設定が無い場合の結果。（デフォルト値のnoneと同じ結果）
HTML : 適用するHTML
<div class="sample"> text-decoration </div>
実行結果
text-decoration
none
CSS : none
.sample { text-decoration-line: none; }
線なし
text-decoration
underline
CSS : underline
.sample { text-decoration-line: underline; }
下線
text-decoration
overline
CSS : overline
.sample { text-decoration-line: overline; }
上線
text-decoration
line-through
CSS : line-through
.sample { text-decoration-line: line-through; }
取り消し線
text-decoration
複数設定
CSS : 上下
.sample { text-decoration-line: underline overline; }
複数設定
text-decoration
CSS : 上下 ＋ 取り消し線
.sample { text-decoration-line: underline overline line-through; }
複数設定
text-decoration
text-decoration-style
solid : 実線
CSS : solid
.sample { text-decoration-line: underline; text-decoration-style: solid; }
実線
text-decoration
double : 二重線
CSS : double
.sample { text-decoration-line: underline; text-decoration-style: double; }
二重線
text-decoration
dotted : 点線
CSS : dotted
.sample { text-decoration-line: underline; text-decoration-style: dotted; }
点線
text-decoration
dashed : 破線
CSS : dashed
.sample { text-decoration-line: underline; text-decoration-style: dashed; }
破線
text-decoration
wavy : 波線
CSS : wavy
.sample { text-decoration-line: underline; text-decoration-style: wavy; }
波線
text-decoration
text-decoration-color
カラーコードで指定する。
デフォルト値は文字列と同じ色になる。
CSS : red
.sample { text-decoration-line: underline; text-decoration-color: red; }
赤線
text-decoration
CSS : green
.sample { text-decoration-line: underline; text-decoration-color: green; }
緑線
text-decoration
borderプロパティとの併用
ごちゃごちゃになるので避けた方が良い。
CSS : border
.sample { text-decoration: underline solid green; border: 4px solid red; }
ごちゃごちゃ
text-decoration
なお、太さを指定したいなら、border-bottomを使うとtext-decoration: underline;のようになる。（ただし、波線wavyはできない）
CSS : border-bottom
.sample { border-bottom: 4px solid green; }
border-bottomを使った例
text-decoration
Emmet : td
| 記述 | Visual Studio Code |
|---|---|
td | text-decoration: none; |
tdu | text-decoration: underline; |
tdo | text-decoration: overline; |
tdl | text-decoration: line-through; |