text-decoration-styleプロパティの使い方・サンプルコード
Sara
text-decoration-style
text-decoration-styleプロパティは、text-decoration-line で指定した線のスタイルを指定します。
線の種類は text-decoration-lineプロパティ、線の色は text-decoration-color プロパティを使用します。
線の種類・スタイル・色をまとめて指定する場合は text-decorationプロパティを使うことができます。
使用できる値
セレクタ {
text-decoration-style: ここに値を指定;
}
| 値 | 表示サンプル | |
|---|---|---|
| solid | 1本 | あいうえお |
| double | 2本 | あいうえお |
| dotted | 点線 | あいうえお |
| dashed | 破線 | あいうえお |
| wavy | 波線 | あいうえお |
使用例
例① テキストの下に赤い波線を引く
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-color：テキストに引く線の色を指定
- text-decoration-line：テキストに引く線の種類を指定
Subscribe
0 Comments
ABOUT ME
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィールはこちら
>> 書籍を出版しました！
>> お問い合わせはこちら
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィールはこちら
>> 書籍を出版しました！
>> お問い合わせはこちら
