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

CSSでテキストを装飾する方法｜text-decorationプロパティの使い方

CSSでテキストを装飾する基本

Webページ上のテキストに下線や打ち消し線などの装飾を加えるには、CSSの text-decoration プロパティを使用します。リンクの下線を消したり、強調したい文字を目立たせたりするなど、実務でもよく使われる基本的なプロパティです。

text-decorationプロパティに指定できる値

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

  • none: 装飾なし(デフォルトの下線などを消したい場合に使用)
  • underline: テキストに下線を引く
  • overline: テキストの上に線(上線)を引く
  • line-through: テキストに打ち消し線(取り消し線)を引く
  • blink: テキストを点滅させる(※現在では非標準・非推奨)

なお、blink は視覚的な負担や可読性の低下を招くため、現在の主要ブラウザではほとんどサポートされていません。点滅効果を実現したい場合は、CSSアニメーション(@keyframes)を使うのが一般的です。

サンプルコード

以下は、各値をインラインスタイルで指定し、テキストを装飾した具体例です。

<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:blink;">
         点滅を意図したテキストですが、多くの環境では無効です
      </p>
   </body>
</html>

各スタイルのイメージ

  • 1つ目の段落:下線が引かれたテキスト
  • 2つ目の段落:打ち消し線が引かれたテキスト
  • 3つ目の段落:上線が引かれたテキスト

補足:個別プロパティでより細かく制御する

CSS3以降では、text-decoration を以下の個別プロパティに分けて指定することもできます。線の見た目を細かく調整したい場合に便利です。

  • text-decoration-line: 線の位置・種類(underline / overline / line-through など)
  • text-decoration-style: 線のスタイル(solid / double / dotted / dashed / wavy)
  • text-decoration-color: 線の色
  • text-decoration-thickness: 線の太さ

  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プロ