CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのtext-decorationプロパティ徹底解説！テキスト装飾の基本と実践例

Webページでテキストをデザインする際、文字に装飾を加えたい場面はよくあります。例えば、重要な単語に下線を引いたり、古い情報に打ち消し線を付けたりするケースが挙げられます。

そんなときに活躍するのが、CSSのtext-decorationプロパティです。このプロパティを使えば、下線（underline）、上線（overline）、打ち消し線（line-through）など、テキストブロックにさまざまな線を追加できます。

本記事では、具体的なコード例を交えながら、text-decorationプロパティとその3つのサブプロパティを使ってテキストを装飾する方法を詳しく解説します。読み終える頃には、プロのようにテキスト装飾を扱えるようになっているはずです。

CSSテキストデコレーションとは

テキストに下線や打ち消し線、上線などを加えることは、Webページ上の重要なコンテンツへユーザーの注意を引きつけるための有効な手段です。

例えば、下線が引かれたテキストは「ここを読む価値がある」というサインとしてユーザーに伝わります。また、テキスト装飾はアクセシビリティの観点からも重要な要素です。

色だけに頼った視覚的な訴えかけでは、色覚に障害を持つ方などすべてのユーザーに情報が伝わるとは限りません。下線や打ち消し線、上線を組み合わせることで、テキストの一部が強調されていることに気づいてもらいやすくなります。

CSSでは、text-decorationというショートハンド（一括指定）プロパティでテキストへの装飾を定義できます。このプロパティは、以下の3つの個別プロパティの一括指定版です。

  • text-decoration-line（必須）：線の種類を指定
  • text-decoration-color（任意）：線の色を指定
  • text-decoration-style（任意）：線のスタイルを指定

これらを個別に書く代わりに、text-decorationプロパティを使えば次のような構文でまとめて指定でき、コードをより効率的に記述できます。

text-decoration: 線の種類 色 スタイル;

値を記述する順番に決まりはありません。

それでは、基本を理解したところで、実際のコード例を見ていきましょう。このチュートリアルでは、地元のベーカリー店が自社サイトを構築するというシナリオを例に進めます。

text-decorationプロパティの実例

サイトを制作しているベーカリー店から、「各ページの見出しを目立たせてほしい」という要望を受けたとします。

例えば「About（私たちについて）」ページでは、About Usというタイトルに下線を引き、ユーザーの注意を引きつけたいケースです。各見出しには水色の一本の下線を付け、線の太さは2pxにしたいとしましょう。このような見出しは、次のコードで実現できます。

<html>
<h1>About Us</h1>
<style>
h1 {
	text-decoration: lightblue solid underline;
}

HTMLコードでは、<h1>タグを使って「About Us」というテキストを表示する見出しを定義しています。続くCSSコードでは、ページ内のすべての<h1>要素に適用されるルールを作成しました。このルールでは、text-decorationプロパティを使って次のような下線を作っています。

  • 水色で表示（lightblueで指定）
  • 一本の実線（solidで指定）
  • 下線スタイルを使用（underlineで指定）

これは、text-decorationプロパティで下線を作るシンプルな例です。次に、text-decorationを構成する各プロパティを詳しく見ていきましょう。

text-decoration-line：線の種類を指定する

text-decoration-lineプロパティは、適用先のテキストに表示する線の種類を設定します。指定できる主な値は以下の通りです。

  • underline：テキストの下に線を表示します。
  • overline：テキストの上に線を表示します。
  • line-through：テキストの中央を貫通する打ち消し線を表示します。
  • blink：テキストを点滅させます（非推奨の値です）。

このプロパティを他の装飾なしで単独で使うと、黒い一本の実線の下線が表示されます。

再びベーカリーの例で、このプロパティの動作を確認してみましょう。「Jefferson's Family Bakery」という店名のベーカリーから、「About Us」ページのテキストの一部に下線を付けてほしいとの依頼を受けたとします。

このタスクは、text-decoration-lineプロパティで実現できます。使用するコードは以下の通りです。

<html>
<p>The Jefferson's Family Bakery, founded in 1899, is a family bakery that serves delicious baked goods to the people of Seattle, Washington. Our bakery is <span class="underline">most well-known for our bagels</span>, which have been reviewed highly by a number of local publications since we started selling them in 1950.

Today, Jeffersons employs ten people who work tirelessly to make the breads, rolls, and assorted baked goods enjoyed by our customers. If you're in the mood for a good bagel, bread, or baked cake, <span class="underline">come to Jeffersons</span>!</p>

<style>

.underline {
	text-decoration-line: underline;
}

コードを分解して見てみましょう。HTMLコードでは、<p>タグで囲まれた段落テキストを作成しています。

この段落内にはJefferson's Family Bakeryの紹介文が書かれており、そのうち「most well-known for our bagels」と「come to Jeffersons」の2箇所が<span>タグで囲まれています。<span>タグは、囲んだ部分のテキストを段落の他の部分と区別するために使われます。

CSSコードでは、クラス名underlineを持つすべての要素に適用されるルールを定義しています。今回の例では、すべての<span>タグにunderlineクラスが割り当てられているため、定義したスタイルが適用されます。このルールにより、text-decoration-lineを使って強調したいテキストに黒い一本の下線が追加されます。

text-decoration-color：線の色を指定する

text-decoration-colorプロパティを使うと、テキスト装飾の色を定義できます。前の例で作成した下線を緑色に変えたい場合は、次のようなスタイルで実現できます。

<html>

<p>The Jefferson's Family Bakery, founded in 1899, is a family bakery that serves delicious baked goods to the people of Seattle, Washington. Our bakery is <span class="underline">most well-known for our bagels</span>, which have been reviewed highly by a number of local publications since we started selling them in 1950.

Today, Jeffersons employs ten people who work tirelessly to make the breads, rolls, and assorted baked goods enjoyed by our customers. If you're in the mood for a good bagel, bread, or baked cake, <span class="underline">come to Jeffersons</span>!</p>

<style>

.underline {
	text-decoration-line: underline;
	text-decoration-color: green;
}

CSSコードでは、値がgreenのtext-decoration-colorルールを追加しました。これにより、text-decoration-lineで定義した下線の色が緑に設定されます。

なお、線を表示するために必要なtext-decoration-lineの値も併せて指定しています。text-decoration-lineは必須のプロパティなので、忘れずに記述しましょう。

text-decoration-style：線のスタイルを指定する

text-decoration-styleプロパティは、テキスト装飾の線のスタイルを設定します。指定できる値は以下の5種類です。

  • solid：一本の実線を表示します。
  • double：二重線を表示します。
  • dashed：破線を表示します。
  • dotted：点線を表示します。
  • wavy：波線を表示します。

再びベーカリーの例に戻りましょう。今度は「About Us」ページのAbout the Jeffersonsという見出しに、水色の点線の下線を付けてほしいという依頼を受けたとします。この場合、次のコードで実現できます。

<html>

<h2>About the Jeffersons</h2>

<style>

h2 {
	text-decoration-line: underline;
	text-decoration-color: lightblue;
	text-decoration-style: dotted;
}

このコードでは、まずtext-decoration-lineとtext-decoration-colorで下線を定義し、その色を水色に設定しています。そして、text-decoration-styleプロパティで下線のスタイルを点線（dotted）に指定しました。

ハイパーリンクの下線を削除する方法

text-decorationプロパティは、従来のHTMLリンクに自動的に表示される下線を削除する目的でもよく使われます。これは、text-decorationプロパティがnoneという値を受け入れ、要素に適用されたデフォルトのテキストスタイルを解除できるためです。

デフォルトでは、<a>タグでリンクを定義すると下線が表示されます。しかし、サイトによってはリンクの下線を表示したくない場合もあります。

例えば、Jefferson's Family Bakeryのサイトに、/contact.htmlページへリンクする「Contact Us」というラベルのハイパーリンクがあるとします。このリンクのHTMLコードは次の通りです。

<a href="/contact.html">Contact Us</a>

このコンポーネントをブラウザで表示すると、リンクは青色で下線付きで表示されます。この下線を削除したい場合は、次のコードを使用します。

<html>

<a href="/contact.html">Contact Us</a>

<style>

a {
	text-decoration: none;
}

ご覧の通り、2つ目の例ではリンクの下線が削除されました。CSSコードでは、text-decoration: noneというルールをすべての<a>タグに適用しています。これにより、適用先の要素（この場合はすべての<a>タグ）からテキスト装飾が取り除かれます。

まとめ

テキスト装飾は、Webページ上の特定のテキストに注目を集め、より美しく魅力的に見せるための手法のひとつです。

CSSのtext-decorationプロパティとその関連プロパティを使えば、Webページ上のテキストブロックに施す装飾を自由に定義できます。

本記事では、具体例を交えながら、text-decorationプロパティとその関連プロパティを使ってWebページのテキストを装飾する方法を解説しました。これであなたも、プロのWebデザイナーのようにテキスト装飾を扱うための知識を身につけたはずです。ぜひ実際のプロジェクトで試してみてください。

  1. CSSでテキストを整形する方法｜主要プロパティとサンプルコードを徹底解説

    CSSを使うことで、テキストを見栄えよく整形し、読み手にとって魅力的なコンテンツを作成できます。この記事では、CSSでテキストのスタイルを設定する際に使用される主なプロパティについて、役割と使い方をわかりやすく解説します。 CSSの主なテキストフォーマット用プロパティ color（文字色） テキストの色を変更するためのプロパティです。カラーキーワード、16進数カラーコード、rgb()関数などで色を指定できます。 letter-spacing（文字間隔） 文字と文字の間隔を調整します。値を大きくすると字間が広がり、見出しなどにゆったりとした印象を与えられます。 line-height（行

  2. CSSのtext-decorationプロパティでテキスト装飾を付ける方法

    CSSのtext-decorationプロパティは、選択した要素のテキストに装飾を適用するために使用します。値として「underline（下線）」「overline（上線）」「line-through（打ち消し線）」などを指定でき、色やスタイルも組み合わせて設定可能です。また、このプロパティはtext-decoration-line（装飾線の種類）、text-decoration-color（装飾線の色）、text-decoration-style（装飾線のスタイル）という3つの個別プロパティを一括して指定できるショートハンド（省略記法）でもあります。基本構文text-decorationプロ