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

CSSのtext-decorationプロパティの使い方を徹底解説

CSSのtext-decorationプロパティは、テキストに下線（アンダーライン）、上線（オーバーライン）、取り消し線などの装飾を加えるために使用されます。リンクの下線を消したり、強調したいテキストを目立たせたりする際によく活用される、基本的ながら重要なプロパティです。

text-decorationで指定できる主な値

text-decorationプロパティには、以下の値を指定できます。

  • none … 装飾なし（リンクの下線を消す場合などに使用）
  • underline … テキストに下線を引く
  • overline … テキストの上に線を引く
  • line-through … テキストに取り消し線を引く
  • blink … テキストを点滅させる（※現在の主要ブラウザでは非対応・非推奨）

サンプルコード

次の例では、それぞれ異なるtext-decorationの値を使ってテキストを装飾しています。

<html>
   <head>
   </head>
   <body>
      <p style = "text-decoration:underline;">
         このテキストには下線が引かれます
      </p>
      <p style = "text-decoration:line-through;">
         このテキストには取り消し線が引かれます。
      </p>
      <p style = "text-decoration:overline;">
         このテキストには上線が引かれます。
      </p>
      <p style = "text-decoration:none;">
         このテキストには装飾が適用されません。
      </p>
   </body>
</html>

実行結果のポイント

上記のコードをブラウザで表示すると、1つ目の段落には下線、2つ目には取り消し線、3つ目には上線が表示され、4つ目の「none」を指定した段落には何も装飾が適用されません。

blink値についての注意点

かつてはblinkを指定することでテキストを点滅させることができましたが、視覚的な負担やアクセシビリティの観点から問題があるとされ、現在では主要なブラウザでサポートされていません。代わりにCSSアニメーション（@keyframes）を使用して同様の効果を実現するのが一般的です。

モダンCSSでの拡張機能

近年のCSSでは、text-decorationに関連する以下のプロパティも利用でき、より細かい装飾が可能になっています。

  • text-decoration-color … 線の色を指定
  • text-decoration-style … 線のスタイル（solid、dashed、dotted、wavyなど）を指定
  • text-decoration-thickness … 線の太さを指定

これらを組み合わせることで、「波線の赤い下線」のように表現豊かなテキスト装飾を実現できます。ぜひ実際のコーディングで試してみてください。

  1. CSSのlist-style-typeプロパティでリストの行頭記号を自由に変更する方法

    CSSのlist-style-typeプロパティを使用すると、リスト項目の先頭に表示されるマーカー(行頭記号)の形状や見た目を自由にコントロールできます。デフォルトの黒丸(disc)だけでなく、白丸や四角、数字、アルファベットなど、さまざまなスタイルを指定できるのが特徴です。 list-style-typeの主な値 disc:黒丸(初期値) circle:白丸(中抜きの丸) square:塗りつぶしの四角形 decimal:算用数字(1、2、3...) lower-alpha:小文字アルファベット(a、b、c...) upper-alpha:大文字アルファベット(A、B、C...) none

  2. CSSのlist-style-imageプロパティの使い方｜箇条書きのマーカーを画像に変更する方法

    list-style-imageプロパティとはCSSのlist-style-imageプロパティを使うと、箇条書き（リスト）のマーカーとして、通常の黒丸（ビュレット）や数字の代わりに任意の画像を指定できます。オリジナルのアイコンや矢印画像などをリストの先頭に表示したい場合に便利なプロパティです。値にはurl()関数で画像ファイルのパスを指定します。指定できるのは<ul>や<ol>、<li>などdisplay: list-itemが適用される要素です。基本的な書式list-style-image: url(画像のパス);使用例以下のコードでは、最初のリスト項目