テキストの装飾
CoddyのHTMLジャーニー「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に設定します。
自分で試してみよう
<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>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
CSSによるスタイリングのすべてのレッスン
自分で練習してみよう: Webプレイグラウンド