CSS テキスト装飾

CSSでは、テキストに「装飾線」を追加することで、さまざまなカスタマイズが可能です。
これらのラインはテキストの下、上、あるいはテキストを貫通するように表示させることができ、リンクの明示、完了済みアイテムのマーク、古い情報の提示など、多岐にわたる目的で使用されます。

1. text-decoration プロパティを理解する

text-decoration プロパティは、テキストにさまざまな装飾線を追加するために使用されます。これは複数の値を組み合わせることができるショートハンドプロパティですが、まずは最も一般的な用途である「装飾線の種類の定義」に焦点を当てていきましょう。

1.1 下線 (underline)

underline は、テキストのすぐ下に線を引きます。これはおそらく最も馴染みのある装飾で、主にハイパーリンク（HTMLの <a> タグ）を識別するために使用されます。デフォルトでは、Webブラウザはリンクがクリック可能であることを示すためにアンダーラインを適用します。

構文：

selector {
  text-decoration: underline;
}

実戦での応用と削除：
アンダーラインはリンクに有用ですが、特定のデザイン美学（ホバー時のみ表示させるなど）を実現するために、デフォルトの下線を削除したい場合があります。下線を消すには、text-decoration を none に設定します。

示例：下線の適用と削除

/* デフォルトのリンク下線を削除し、カスタムクラスで制御します */
a {
  text-decoration: none; /* すべてのリンクからデフォルトの下線を削除 */
  color: #007bff; /* 視認性を高めるために青色を設定 */
}

a:hover {
  text-decoration: underline; /* ホバー時のみ下線を表示し、インタラクティブなフィードバックを提供 */
}

/* クラスセレクターを使用して特定の段落に下線を適用 */
.special-feature {
  text-decoration: underline; /* 明示的に下線を適用 */
  color: #333;
}

この例では、まずすべての <a> タグのデフォルトの下線を削除しています。その後、ユーザーがリンクにマウスを重ねた（ホバーした）ときだけ再表示させています。これは現代のWebデザインにおける非常に一般的で洗練されたパターンです。

1.2 上線 (overline)

overline は、テキストのすぐ上に線を引きます。この装飾は、一般的なデザインでは underline や line-through ほど頻繁には見られませんが、ユニークなスタイル効果を作ったり、特定のタイトルやコンテンツブロックに注目を集めたりする際に役立ちます。

構文：

selector {
  text-decoration: overline;
}

示例：見出しに上線を設定

<header>
    <h2 class="section-title">最新ニュース</h2>
</header>

/* 特定の見出しに上線を適用 */
.section-title {
  text-decoration: overline; /* テキストの上にラインを追加 */
  font-family: 'Arial', sans-serif;
  color: #4CAF50; /* 緑色の見出し */
  padding-top: 10px; /* 上線とテキストの間にスペースを確保 */
}

ここでは、「最新ニュース」というタイトルの上に緑色のラインが表示され、独特なビジュアルスタイルを演出しています。

1.3 取り消し線 (line-through)

line-through は、テキストの中央を貫通する線を引きます。この装飾は、アイテムが削除されたこと、利用不可であること、あるいはプロモーション中の「元の価格」を示すなど、意味を伝える際に非常に効果的です。

構文：

selector {
  text-decoration: line-through;
}

1.4 示例：特別価格と完了済みタスクの表示

タスクリストと製品説明のテキストを使って、実際の活用方法を見てみましょう。

<div class="task-list">
    <h3>マイToDoリスト</h3>
    <ul>
        <li class="completed">CSSレッスンのコンテンツを完成させる</li>
        <li>モジュール構造を見直す</li>
        <li class="pending">来週のタスクを計画する</li>
    </ul>
</div>

<div class="product-offer">
    <h3>スペシャルオファー！</h3>
    <p>通常価格: <span class="old-price">$59.99</span></p>
    <p>特別価格: <span class="new-price">$39.99</span></p>
</div>

/* 完了済みタスクのスタイル */
.completed {
  text-decoration: line-through; /* 完了したタスクに取り消し線を引く */
  color: #999; /* 文字色を薄くして視覚的に優先度を下げる */
}

/* キャンペーン中の元価格のスタイル */
.old-price {
  text-decoration: line-through; /* 元の価格に取り消し線を引く */
  color: #d9534f; /* 削除/無効を示すために赤系の色を使用 */
}

/* 新価格のスタイル */
.new-price {
  color: #5cb85c; /* 新価格は緑色を使用 */
  font-weight: bold; /* 価格を際立たせる */
  font-size: 1.1em; /* テキストを少し大きくする */
}

効果の解析：

• タスクリスト (task-list): completed クラスを持つ項目には取り消し線が表示され、完了状態であることが一目でわかります。
• 製品オファー (product-offer): .old-price に line-through を使うことで、元の価格が無効であることを示し、強調された新価格との鮮明なコントラストを生んでいます。

2. text-decoration の値を組み合わせる

underline、overline、line-through は単独で使うのが一般的ですが、必要に応じて1つの要素に複数の値を組み合わせて適用することも可能です。

2.1 構文

text-decoration プロパティの中に、必要な値をスペースで区切って並べるだけです。

selector {
  text-decoration: underline overline; /* 下線と上線を同時に適用 */
}

2.2 示例：装飾の組み合わせ

<p class="highlighted-text">
    重要なお知らせ！ 注意深くお読みください。
</p>

.highlighted-text {
  text-decoration: underline overline; /* 上下にラインを作成 */
  font-weight: bold;
  color: #8A2BE2; /* バイオレット色 */
}

これにより、テキストの上下にラインが表示され、非常に目立つ要素になります。

3. 実戦総合例：ブログ記事のプレビュー

これまでのコンセプトをすべて組み合わせた、ブログ記事のプレビューをシミュレーションしてみましょう。

<article>
    <h2 class="article-title">CSSテキストスタイリングの探求 (下書き)</h2>
    <p>
        この記事では <a href="#fonts">フォント属性</a>、<span class="current-topic">テキスト装飾</span> などをカバーします。
    </p>
    <div class="product-ad">
        <h3>期間限定セール！</h3>
        <p>元価格: <span class="old-price">$29.99</span></p>
        <p>現価格: <span class="new-price">$19.99</span></p>
    </div>
    <ul class="task-list">
        <li class="done">text-decoration 技術をリサーチする</li>
        <li>内容をレビューする</li>
    </ul>
</article>

/* リンクのデフォルト下線を削除 */
a {
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
}

/* ホバー時に下線を追加 */
a:hover {
    text-decoration: underline;
}

/* 下書きの見出しに上線を適用してマーク */
.article-title {
    text-decoration: overline;
    padding-bottom: 5px;
}

/* 現在のトピックを強調するために下線を明示 */
.current-topic {
    text-decoration: underline;
    font-style: italic;
    color: #28a745;
}

/* 旧価格と完了済みタスクに取り消し線を適用 */
.old-price, .done {
    text-decoration: line-through;
    color: #6c757d;
}

この総合例では、text-decoration を通じて複数の目的を達成しています：

1. ユーザーインターフェースの改善: リンクのデフォルトの下線を消し、ホバー時にのみ表示させることで、モダンでクリーンなデザインを実現しました。
2. ステータスの可視化: 「下書き」タイトルに overline を、完了済みタスクや古い価格に line-through を適用することで、追加の説明なしにステータスを伝えています。
3. 強調表示: underline を特定のキーワードに使用し、読者の注意を現在のトピックへ誘導しました。