font-variant-numericプロパティの使い方・サンプルコード
Sara
Code for Fun
text-decoration-colorプロパティの使い方・サンプルコード
Sara
目次
text-decoration-color
text-decoration-colorプロパティは、text-decoration-line プロパティで指定した線の色を指定します。
線の種類は text-decoration-lineプロパティ、線のスタイルは text-decoration-styleプロパティを使用します。
線の種類・スタイル・色をまとめて指定する場合は text-decorationプロパティを使うことができます。
使用できる値
セレクタ {
text-decoration-color: ここに値を指定;
}
| 値 | |
|---|---|
| 色の指定 | キーワード, HEX形式, RGB形式などで色を指定します。 |
キーワードで指定する場合
セレクタ {
text-decoration-color: red;
}
HEX形式で指定する場合
セレクタ {
text-decoration-color: #ff0000;
}
RGB形式で指定する場合
セレクタ {
text-decoration-color: rgb(255, 0, 0);
}
使用例
例① テキストの下に赤い波線を引く
HTML
<p>あいうえお<span class="spelling">かくきけこ</span>さしすせそ</p>CSS
.spelling {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
実行結果
あいうえおかくきけこさしすせそ
例② テキストの中央に青い二重線を引く
HTML
<p>ここに<span class="lineblue">青い二重線</span>を引きます。</p>CSS
.lineblue {
text-decoration-line: line-through;
text-decoration-style: double;
text-decoration-color: blue;
}
実行結果
ここに青い二重線を引きます。
対応ブラウザ
関連するHTML要素
関連するCSSプロパティ
- text-decoration：テキストに線を引く
- text-decoration-line：テキストに引く線の種類を指定
- text-decoration-style：テキストに引く線のスタイルを指定
0 Comments
ABOUT ME
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。