CSSのテキスト装飾（text-decoration）の使い方を徹底解説
CSSのテキスト装飾とは
CSSでテキストに下線や上線などの装飾を加えるには、text-decorationプロパティを使用します。このプロパティは、以下の個別プロパティをまとめて指定できるショートハンド（一括指定）プロパティとして機能します。
text-decoration-line text-decoration-color text-decoration-style
それぞれの役割は次のとおりです。
- text-decoration-line： 装飾線の種類と位置（下線・上線・取り消し線など）を指定します。
- text-decoration-color： 装飾線の色を指定します。
- text-decoration-style： 装飾線のスタイル（実線・二重線・点線・破線・波線など）を指定します。
例1：ショートハンドで一括指定する
まずは、text-decorationプロパティを使って上線と下線を同時に設定する基本的な例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>
出力結果
このように、overline underlineと指定することで、対象のテキストに上線と下線が同時に表示されます。
例2：個別プロパティで細かく指定する
次に、各値を個別のプロパティで指定する例を紹介します。縦書きモード（writing-mode: vertical-rl）のテキストに対して、赤い波線の上線を設定しています。
<!DOCTYPE html>
<html>
<head>
<style>
p {
writing-mode: vertical-rl;
text-decoration-line: overline;
text-decoration-color: red;
text-decoration-style: wavy;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is demo text.</p>
</body>
</html>
出力結果
個別プロパティを使えば、線の位置・色・スタイルを自由に組み合わせられます。たとえば上記の例では、wavy（波線）とred（赤色）を組み合わせることで、目立つ装飾表現が可能になります。
まとめ
シンプルな装飾ならtext-decorationのショートハンドで十分ですが、デザインの自由度を高めたい場合は、text-decoration-line・text-decoration-color・text-decoration-styleの個別指定が便利です。用途に応じて使い分けましょう。
-
HTMLの<s>タグとは？取り消し線テキストの使い方を解説
HTMLの<s>タグは、もはや関連性がなくなったテキスト（正確ではなくなった内容）を示すために使用される要素です。このタグはHTML5で再定義され、「不正確になったテキスト」を表す意味を持つようになりました。それでは、<s>要素の実装例を見ていきましょう。サンプルコード<!DOCTYPE html> <html> <body> <h2>Exam Results</h2> <p><s>Result would be announced on
-
HTMLテキストフォーマットとは？主要な書式設定タグ10選と使い方を解説
HTMLのテキストフォーマット（書式設定）とは、HTML文書内でテキストの見た目や意味を整えるために特別に用意された要素のことです。これらのタグを使いこなすことで、太字・斜体・ハイライトなど、さまざまなテキスト表現が可能になり、文章の可読性や伝わりやすさが大きく向上します。 基本構文 テキストフォーマット用タグの基本的な書き方は以下のとおりです。 <tagname>content</tagname> 主なテキストフォーマットタグ一覧 HTMLで使われる代表的なテキストフォーマットタグは、以下の10種類です。 番号タグと説明 1<b>テキストを太字に