CSS テキスト装飾
テキスト装飾
この章では、次のプロパティについて学習します。
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 テキスト装飾プロパティ
|
財産 |
説明 |
|---|---|
| テキスト装飾 | 1 つの宣言ですべてのテキスト装飾プロパティを設定します |
| 文字装飾色 | テキスト装飾の色を指定します |
| テキスト装飾線 | 使用するテキスト装飾の種類を指定します (下線、上線、 等。） |
| テキスト装飾スタイル | テキスト装飾のスタイルを指定します (実線、点線など)。 |
| 文字装飾の太さ | 文字飾り線の太さを指定します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。