MENU
  1. ホーム
  2. CSS
  3. text-decorationプロパティ

text-decorationプロパティ

CSS
2023.07.14

text-decorationプロパティは、文字の傍線を指定できます。

text-decorationについての図
属性簡易説明
none装飾なし
underline下線
line-through取り消し線
overline上線
underline overline上下線
underline solid 色指定色の下線
underline double二重下線
underline dotted点線の下線
underline dashed破線の下線
underline wavy波線の下線
font-styleプロパティとtext-decorationプロパティ
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>テキストデコレーションについて</title>
    <link rel="stylesheet" href="./main.css" />
</head>
<body>
    <p>text-decoration : none</p>
    <p class="text-underline">text-decoration : underline</p>
    <p class="text-line-through">text-decoration : line-through</p>
    <p class="text-overline">text-decoration : overline</p>
    <p class="text-underline-overline">text-decoration : underline overline</p>
    <p class="text-underline-solid">text-decoration : underline solid 色</p>
    <p class="text-underline-double">text-decoration : underline double</p>
    <p class="text-underline-dotted">text-decoration : underline dotted</p>
    <p class="text-underline-dashed">text-decoration : underline dashed</p>
    <p class="text-underline-wavy">text-decoration : underline wavy</p>
</body>
</html>
.text-underl {text-decoration: underline}
.text-line-through {text-decoration: line-through}
.text-overline {text-decoration: overline}
.text-underline-overline {text-decoration: underline overline}
.text-underline-solid {text-decoration: underline solid red}
.text-underline-double {text-decoration: underline double}
.text-underline-dotted {text-decoration: underline dotted}
.text-underline-dashed {text-decoration: underline dashed}
.text-underline-wavy {text-decoration: underline wavy}
出力結果

text-decoration : none

text-decoration : underline

text-decoration : line-through

text-decoration : overline

text-decoration : underline overline

text-decoration : underline solid red

text-decoration : underline double

text-decoration : underline dotted

text-decoration : underline dashed

text-decoration : underline wavy

CSS