テキストの装飾

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 22/76。

CSSにおいて、text-decorationプロパティは、HTML要素内のテキストに装飾を追加したり、削除したりするために使用されます。このプロパティを使用すると、テキストに下線、上線、または打ち消し線を引くことができ、視覚的な強調を加えたり、特定の状態を示したりすることができます。

text-decoration の一般的な値には、以下のようなものがあります：

none: テキスト装飾をすべて削除します。これはデフォルト値です。

underline: テキストに下線を追加します。

overline: テキストの上に上線を追加します。

line-through: テキストの中央に線を追加します（取り消し線）。

例えば：

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.strike {
    text-decoration: line-through;
}

チャレンジ

簡単

アンカー（<a>）要素を含む段落（<p>）と、ディビジョン（<div>）が含まれるHTMLドキュメントが与えられています。あなたのタスクは、text-decorationプロパティを使用してこれらの要素をスタイリングすることです。以下の手順に従ってください。

すべての<a>要素をターゲットにするCSSルールを記述します。デフォルトの下線を削除するために、text-decorationをnoneに設定してください。
<p>要素に、値が"underline"のclass属性を追加します。
クラスがunderlineであるすべての要素をターゲットにするCSSルールを記述します。text-decorationをunderlineに設定してください。
<div>要素に、値が"strike"のclass属性を追加します。
クラスがstrikeであるすべての要素をターゲットにするCSSルールを記述します。text-decorationをline-throughに設定してください。

チートシート

text-decoration プロパティは、HTML要素内のテキストに装飾を追加または削除します。

一般的な値:

none: テキストの装飾をすべて削除します（デフォルト）
underline: テキストに下線を追加します
overline: テキストの上に上線を追加します
line-through: 取り消し線を追加します

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.strike {
    text-decoration: line-through;
}

自分で試してみよう

<html>
<head>
    <title>Text Decoration</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <p>This is a paragraph with a <a href="#">link</a>.</p>
    <div>This is a division.</div>
</body>
</html>