font-weightプロパティの使い方・サンプルコード
Sara
Code for Fun
text-decorationプロパティは、テキストに引く線の種類・スタイル・色を指定します。
セレクタ {
text-decoration: -line -style -color
}
指定できる値は
プロパティと同じです。
値 | 表示スタイル | |
---|---|---|
normal | 標準 | あいうえお |
underline | 下線 | あいうえお |
overline | 上線 | あいうえお |
line-through | 中央線 | あいうえお |
詳しいサンプルはこちら:text-decoration-line プロパティ – CSS サンプル・リファレンス
値 | 表示スタイル | |
---|---|---|
solid | 1本 | あいうえお |
double | 2本 | あいうえお |
dotted | 点線 | あいうえお |
dashed | 破線 | あいうえお |
wavy | 波線 | あいうえお |
詳しいサンプルはこちら:text-decoration-style プロパティ – CSS サンプル・リファレンス
値 | 表示スタイル |
---|---|
色の指定 | キーワード, HEX形式, RGB形式などで色を指定します。 |
詳しいサンプルはこちら:text-decoration-color プロパティ – CSS サンプル・リファレンス
ここではテキストの下に赤い二重線を引くサンプルを紹介します。
text-decoration プロパティでまとめて指定しても、種類・スタイル・色を別々に指定してもどちらも同じ結果になります。
HTML
<p>ここに<span class="line1">テキスト</span>が入ります。
ここに<span class="line2">テキスト</span>が入ります。</p>
CSS
.line1 {
text-decoration: underline double red;
}
.line2 {
text-decoration-line: underline;
text-decoration-style: double;
text-decoration-color: red;
}
実行結果