text-decoration:blink

text-decoration:blinkについて

1. 概要

text-decoration プロパティは、テキストに装飾線を適用するための CSS簡略プロパティ です。
下線、上線、取り消し線、点滅など、様々な装飾を簡単に設定することができます。

text-decoration は、以下の4つのプロパティの簡略形です。

text-decoration-line: 線の種類 (下線、上線など)

text-decoration-color: 線の色

text-decoration-style: 線のスタイル (実線、点線など)

text-decoration-thickness: 線の太さ

これらのプロパティを個別に指定する代わりに、text-decoration を使ってまとめて指定することができます。

2. 継承性

text-decoration で指定した装飾は、子孫要素のテキストにも適用 されます。

例えば、<p>要素に下線を設定した場合、その子要素である<em>要素などにも下線が適用されます。
子要素で text-decoration: none; を指定しても、親要素の装飾を打ち消すことはできません。

ただし、子要素で別の装飾 (例：上線) を指定した場合は、親要素の装飾に加えて、子要素にもその装飾が適用されます。

3. 構成プロパティ

text-decoration は、以下の4つのプロパティの簡略形です。

text-decoration-color

text-decoration-line

text-decoration-style

text-decoration-thickness

これらのプロパティを個別に指定することもできますが、text-decoration を使うことで、より簡潔に記述することができます。

4. 構文

text-decoration プロパティは、以下のいずれかの値をスペース区切りで指定します。

/* 下線を赤色で指定 */
text-decoration: underline red;

/* 上線を波線で緑色で指定 */
text-decoration: overline wavy green;

/* 取り消し線を指定 */
text-decoration: line-through;

/* 装飾なし */
text-decoration: none;

/* グローバル値 */
text-decoration: inherit; /* 親要素から継承 */
text-decoration: initial; /* 初期値に戻す */
text-decoration: revert; /* ユーザーエージェントスタイルシートの値に戻す */
text-decoration: revert-layer; /* カスケードレイヤーの値に戻す */
text-decoration: unset; /* 継承するか初期値に戻すかを自動で判断 */

5. プロパティ値

text-decoration-line

線の種類を指定します。複数の値をスペース区切りで指定することもできます。

underline: 下線

overline: 上線

line-through: 取り消し線

blink: 点滅 (非推奨)

none: 装飾なし

text-decoration-color

線の色を指定します。<color> 値を使用します。

text-decoration-style

線のスタイルを指定します。

solid: 実線

double: 二重線

dotted: 点線

dashed: 破線

wavy: 波線

text-decoration-thickness

線の太さを指定します。<length> 値、<percentage> 値、from-font キーワードを使用します。

6. 形式的定義

プロパティ	初期値	適用対象	継承	計算値	アニメーションタイプ
text-decoration	text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;	すべての要素、::first-letter、::first-line	×	text-decoration-line: 指定値, text-decoration-style: 指定値, text-decoration-color: 計算された色, text-decoration-thickness: 指定値	text-decoration-color: 色, text-decoration-style: 離散, text-decoration-line: 離散, text-decoration-thickness: 計算値のタイプ別

7. 使用例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>text-decoration の使用例</title>
  <style>
    .underline { text-decoration: underline red; }
    .overline { text-decoration: overline wavy green; }
    .line-through { text-decoration: line-through; }
    .multiple { text-decoration: underline overline blue; }
  </style>
</head>
<body>
  <p class="underline">下線付きテキスト (赤色)</p>
  <p class="overline">上線付きテキスト (緑色の波線)</p>
  <p class="line-through">取り消し線付きテキスト</p>
  <p class="multiple">下線と上線付きテキスト (青色)</p>
</body>
</html>

8. 標準仕様

CSS Text Decoration Module Level 3

9. ブラウザ対応状況

ブラウザ	対応状況
Chrome	1+
Edge	12+
Firefox	1+
Opera	3.5+
Safari	1+

まとめ

text-decoration プロパティは、テキストに装飾線を適用するための便利な簡略プロパティです。
様々な装飾を簡単に設定できるので、ぜひ活用してみてください。

使用例と注意点

blinkの効果を実現するためには、CSSアニメーションを使用するのが一般的です。この方法では、より柔軟に点滅効果をカスタマイズすることができ、ユーザーエクスペリエンスを向上させることができます。また、点滅効果が視覚的に煩わしいと感じるユーザーも多いため、慎重に使用する必要があります。

点滅効果のCSSアニメーション例

以下のコードは、CSSアニメーションを使用してテキストを点滅させる方法を示しています。


<style>
  .blink {
    animation: blink-animation 1s steps(5, start) infinite;
  }

  @keyframes blink-animation {
    to {
      visibility: hidden;
    }
  }
</style>

<span class="blink">このテキストは点滅しています。</span>

CSSプロパティのテーブル

プロパティ	説明	値
text-decoration	テキストの装飾を設定する	none, underline, overline, line-through, blink
animation	アニメーションを指定する	animation-name, animation-duration, animation-timing-function

参考文献

詳細については、以下のリンクを参照してください。

よくある質問 (QA)

text-decoration: blinkはどのように使うのですか？: text-decoration: blinkはほとんどのブラウザでサポートされていないため、代わりにCSSアニメーションを使用することをお勧めします。
点滅効果をどのようにカスタマイズできますか？: CSSアニメーションの設定を変更することで、点滅の速さや効果をカスタマイズできます。
点滅効果はユーザーにどのような影響を与えますか？: 視覚的に煩わしいと感じるユーザーも多いため、使用は慎重に行う必要があります。

その他の参考記事:blink html