CSS blink

CSS blinkを使った点滅テキストの作成方法

本記事では、CSSを使用して点滅するテキストを作成する方法について説明します。具体的なコードの実例を通じて、効果的なスタイル設定を学ぶことができます。

1. <blink>タグとtext-decoration: blink; は非推奨

Webページでテキストや画像を点滅させる方法として、以前はHTMLの<blink>タグやCSSのtext-decoration: blink;が使われていました。

しかし、これらの方法は 現在では非推奨 となっており、主要なブラウザではサポートされていません。

理由としては、点滅する要素は アクセシビリティ (Webサイトをすべての人が平等に利用できること) の観点から問題があること、また、ユーザーによっては見づらく、不快感を与える 可能性があることが挙げられます。

そのため、<blink>タグやtext-decoration: blink;は使用せず、 CSSアニメーション を使って点滅効果を実装することをおすすめします。

2. 【基礎】CSSで点滅を実装する方法

CSSアニメーションでは、要素のスタイルを時間経過とともに変化させることができます。
これを利用することで、点滅効果を簡単に実装することができます。

CSSアニメーションは、大きく分けて以下の2つのステップで実装します。

animationプロパティでアニメーションの設定を行う

@keyframesルールでアニメーションの内容を定義する

2-1. アニメーションプロパティの設定

animationプロパティでは、アニメーションの名前、継続時間、タイミング関数、遅延時間、繰り返し回数などを指定することができます。

.blinking-text {
  animation: blink 1s linear infinite;
}

上記の例では、.blinking-textクラスを持つ要素に対して、blinkという名前のアニメーションを適用しています。
アニメーションの継続時間は1秒(1s)、タイミング関数はlinear (等速)、繰り返し回数は無限(infinite)です。

2-2. @keyframesを使った点滅アニメーションの作成

@keyframesルールでは、アニメーションの開始時と終了時のスタイルを指定します。

@keyframes blink {
  0% { opacity: 1; } /* 開始時：不透明 */
  50% { opacity: 0; } /* 中間：透明 */
  100% { opacity: 1; } /* 終了時：不透明 */
}

上記の例では、blinkという名前のアニメーションを定義しています。
アニメーションの開始時(0%)は不透明度1(opacity: 1;)、中間(50%)は不透明度0(opacity: 0;)、終了時(100%)は不透明度1(opacity: 1;)となっています。

これにより、要素が1秒かけて透明になり、また1秒かけて不透明に戻るアニメーションが作成されます。
animationプロパティでinfiniteを指定しているので、このアニメーションは無限に繰り返されます。

3. ユーザーの目を引く点滅サンプル

3-1. 点滅する新着ラベルの作成

新着情報やセール情報などを目立たせるために、点滅するラベルを作成してみましょう。

<span class="new-label">新着！</span>

.new-label {
  background-color: #f00;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  animation: blink 1s linear infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

3-2. 点滅する枠線でボタンのクリック率アップを狙う

ボタンの枠線を点滅させることで、ユーザーの目を引くことができます。

<button class="blinking-button">クリック！</button>

.blinking-button {
  padding: 10px 20px;
  border: 2px solid #000;
  border-radius: 5px;
  animation: blink-border 1s linear infinite;
}

@keyframes blink-border {
  0% { border-color: #000; }
  50% { border-color: #fff; }
  100% { border-color: #000; }
}

3-3. テキストシャドウで点滅するネオンサインを作る

テキストシャドウをアニメーションさせることで、ネオンサインのような点滅効果を作成できます。

<h1 class="neon-sign">ネオンサイン</h1>

.neon-sign {
  color: #fff;
  text-shadow: 0 0 10px #f00;
  animation: neon-blink 2s linear infinite;
}

@keyframes neon-blink {
  0% { text-shadow: 0 0 10px #f00; }
  50% { text-shadow: 0 0 30px #f00; }
  100% { text-shadow: 0 0 10px #f00; }
}

4. jQueryで点滅させる方法

jQueryを使うことでも、点滅効果を実装することができます。

<p id="blinking-paragraph">jQueryで点滅</p>

$(function() {
  setInterval(function() {
    $('#blinking-paragraph').fadeOut(500).fadeIn(500);
  }, 1000);
});

上記のコードでは、setInterval()関数を使って、1秒ごとに#blinking-paragraph要素をフェードアウトさせて、フェードインさせています。

5. まとめ

この記事では、CSSアニメーションとjQueryを使ってテキストや画像を点滅させる方法をご紹介しました。

<blink>タグやtext-decoration: blink;は非推奨となっているため、 CSSアニメーション を使って点滅効果を実装することをおすすめします。

CSSアニメーションでは、点滅の速度やタイミング、色などを細かく調整することができます。
色々なパターンを試して、Webサイトに目を引く効果を追加してみてください。

ただし、点滅効果は アクセシビリティ の観点から問題がある場合があるため、 使いすぎには注意 しましょう。

ブラウザの互換性と最適化

CSSアニメーションを使用した点滅テキストのブラウザ間の互換性について考察します。また、パフォーマンスを最適化するためのテクニックを紹介します。

ブラウザ	互換性
Chrome	✔️
Firefox	✔️
Safari	✔️
Edge	✔️

参考文献

MDN Web Docs: CSS Animation

よくある質問 (FAQ)

Q1: 点滅効果はどのように調整できますか？

A1: アニメーションの持続時間やキーフレームのポイントを調整することで、点滅効果の速度やパターンを変更できます。

Q2: 他のアニメーション効果と組み合わせることは可能ですか？

A2: はい、CSSの複数のアニメーションを組み合わせることができ、視覚的な効果をさらに豊かにすることができます。

Q3: スマートフォンでの表示はどうなりますか？

A3: CSSアニメーションは一般にスマートフォンでもサポートされているため、正常に表示されるはずですが、デバイスによって動作が異なる場合があります。

その他の参考記事:blink html