CSS text-decoration
text-decoration
この章では、次のプロパティについて学習します。
text-decoration-linetext-decoration-colortext-decoration-styletext-decoration-thicknesstext-decoration
テキストに装飾線を追加する
text-decoration-lineプロパティは、テキストに装飾線を追加するために使用されます。
ヒント：上線と下線のように、複数の値を組み合わせて、テキストの上と下の両方に線を表示できます。
例
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p {
text-decoration-line: overline underline;
}
注：リンクではないテキストに下線を引くことは、読者を混乱させることが多いため、お勧めしません。
飾り線の色を指定する
text-decoration-colorプロパティを使用して装飾線の色を設定します。
例
h1 {
text-decoration-line: overline;
text-decoration-color: red;
}
h2 {
text-decoration-line: line-through;
text-decoration-color: blue;
}
h3 {
text-decoration-line: underline;
text-decoration-color: green;
}
p {
text-decoration-line: overline underline;
text-decoration-color: purple;
}
装飾線のスタイルを指定する
text-decoration-styleプロパティは装飾線のスタイルを設定するために使用されます。
例
h1 {
text-decoration-line: underline;
text-decoration-style: solid;
}
h2 {
text-decoration-line: underline;
text-decoration-style: double;
}
h3 {
text-decoration-line: underline;
text-decoration-style: dotted;
}
p.ex1 {
text-decoration-line: underline;
text-decoration-style: dashed;
}
p.ex2 {
text-decoration-line: underline;
text-decoration-style: wavy;
}
p.ex3 {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}
飾り線の太さを指定する
text-decoration-thicknessプロパティを使用して装飾線の太さを設定します。
例
h1 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}
h2 {
text-decoration-line: underline;
text-decoration-thickness: 5px;
}
h3 {
text-decoration-line: underline;
text-decoration-thickness: 25%;
}
p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}
一括指定プロパティ
text-decorationプロパティは、次の一括指定プロパティです。
text-decoration-line（必要）text-decoration-color(オプション)text-decoration-style(オプション)text-decoration-thickness(オプション)
例
h1 {
text-decoration: underline;
}
h2 {
text-decoration: underline red;
}
h3 {
text-decoration: underline red double;
}
p {
text-decoration: underline red double 5px;
}
小さなヒント
HTML内のすべてのリンクには、デフォルトで下線が引かれています。リンクが下線のないスタイルになっていることがあります。text-decoration: none;次のように、リンクから下線を削除するために使用されます。
すべてのCSS text-decoration
|
プロパティ |
説明 |
|---|---|
| text-decoration | 1つの宣言ですべてのtext-decorationプロパティを設定します |
| text-decoration-color | テキスト装飾の色を指定します |
| text-decoration-line | 使用するテキスト装飾の種類を指定します (下線、上線、 等。） |
| text-decoration-style | テキスト装飾のスタイルを指定します(実線、点線など)。 |
| text-decoration-thickness | 文字飾り線の太さを指定します |