blinkタグは使って大丈夫？CSSで点滅させる方法と注意点

ページ内で特定のリンクにユーザーを導きたい時、動きのあるエフェクト（アニメーション）が目を引きます。

中でも「点滅」はテキストや画像を強調するのに有効です。

しかし、手軽に点滅を実装できるHTMLタグ<blink>やCSSのtext-decoration:blinkを使っている方（あるいは使う予定の方）は注意が必要かもしれません。

今回は従来の方法の問題点と、CSSアニメーションによる正しい点滅エフェクトのかけ方を紹介したいと思います。

記事の後半では応用編として、「枠線が点滅するボタン」「点滅するネオンサイン」等、ユーザーの目を引くための点滅テクニック（コピペOK）も紹介するので、興味のある方はぜひ最後まで読んでみてください。

１．blinkタグとtext-decoration:blinkは非推奨

HTMLには<blink>という即席で点滅を実装するタグがありました。

以下のようにテキストを囲むだけ…という非常に簡単かつ簡易的なものです。

また、CSSにおいてもtext-decorationプロパティの値の一つとしてblinkが用意されていました。

しかし、現在これらのスタイルを試してみても点滅は機能しないかと思います。

というのも<blink>タグとtext-decoration: blinkは、主要ブラウザにおいてサポートされていないからです。

（参考）HTML「blink」の対応ブラウザ一覧（Can I use…）

（参考）CSS「text-decoration:blink」の対応ブラウザ一覧（Can I use…）

（※text-decorationプロパティは今でも使えます。サポートが廃止されているのは値としてのblinkです。）

HTML・CSSともに古い形式のものなので、今後サポートが再開されることはまずありません。

では、ページ内のデザインとして点滅を実装することはできないのでしょうか？

２．【基本】CSSで点滅させる方法

前章で説明した通り、点滅専用のタグやスタイルは使えなくなってしまいました。

とは言え、CSSアニメーションで点滅を表現することは十二分に可能です。

そこで、CSSアニメーションの基本を踏まえたうえで、テキストや画像に点滅を実装する方法を解説します。

２－１．animationプロパティの設定

CSSアニメーションを実装するには、まず『「何を」「どのように」「どのくらいの時間をかけて」展開していくのか』といった初期設定が必要です。

このCSSアニメーションの初期設定にあたるのがanimationプロパティです。

例えば、以下の段落（blink_paragraph）を点滅させたい場合、CSSのクラス指定でanimationを設けます。

animetionプロパティには複数の値を同時に指定することができます。

上記のコードでは、左から順番に「①アニメーション名（blinkEffect）」「②時間（1s）」「③変化の仕方（ease）」「④繰り返し回数（infinite）」が適用されています。

他にも値がありますが、とりあえずこの4点をおさえておけばCSSアニメーションは十分機能します。

「①アニメーション名」は任意のもので結構。

ただし、あとで作成する@keyframesと同じ名称にする必要があります。

「②時間」はアニメーション開始から終了までの時間です。

繰り返し処理をする場合は１ターン分の時間と考えてください。

「s（秒）」単位で指定します。

「③変化の仕方」には、ease（緩やかに変化）、ease-in-out（最初・最後だけ緩やか）、linear（一定に変化）等、どのように動きを展開するか指定します。

初期値はeaseなので、全体的に緩やかな変化にしたい時は省略しても大丈夫です。

「④繰り返し回数」は基本的に数値を指定します。

繰り返さない場合は「1」でOK。

逆に、アニメーションを永遠に繰り返したい場合はinfiniteを指定してください。

２－２．@keyframesで点滅アニメーションを作成

animationプロパティを設定しただけでは、アニメーションは実行されません。

具体的なアニメーションの内容を定義する必要があります。

アニメーションの内容を定義するには、以下のように@keyframesの枠内に変化前と変化後のスタイルを指定します。

この時、@keyframesの隣にanimationプロパティで設定したアニメーション名を記入するのを忘れないでください。

要素を点滅させるには、不透明度（opacity）を応用します。

opacityは、要素の不透明度を「0」～「1」の間で調整するプロパティです。

「0」はまったく見えない状態で、「1」はデフォルトの状態を指します。

（つまり「0.5」に指定すれば、要素をちょうど半透明にすることができます。）

上記のコードのように、アニメーション開始時と終了時の不透明度にギャップを設けることで点滅を表現できます。

ここまでが基本的な点滅エフェクトのかけ方です。

画像を点滅させる場合も、方法はまったく同じです。

上記のanimationプロパティでは、5番目の値としてalternateを追加してみました。

alternateを指定すると、アニメーションが順方向・逆方法を交互に繰り返すように展開します。

今回の例では、opacity: 0⇒opacity: 1のアニメーションが終わると、opacity: 1⇒opacity: 0へと巻き戻すアニメーションが始まります。

@keyframesの内容にもよりますが、alternateを指定するとフェードイン・フェードアウトっぽくなり、柔らかい動きになるのがわかります。

３．ユーザーの目を引く点滅サンプル

前章ではテキスト・画像を点滅させる基本的なテクニックについて解説しました。

今度は応用編として、実際に記事内で使えそうな点滅エフェクトを作ってみましょう。

コピー＆ペーストして使っていただいてもOKです。

３－１．点滅する新着ラベルを作ろう

冒頭でも紹介した点滅する「New!」マークを実装してみましょう。

これは疑似要素を点滅させるテクニックです。

まず、ラベルを表示したい段落に任意のクラス名を付けます。

次にCSSでクラスを指定しpositionをrelativeに変更してください。

さらに、疑似要素を追加していきます。

疑似要素は::beforeでも::afterでも同じ結果です。

点滅ラベル内のテキストを変えたい時はcontentの値を変更してください。

「新着」や「人気」等でも良いと思います。

位置取りはtopまたleftで自由に調節できます。

最後に、アニメーションの内容を記載しておきましょう。

とは言え、点滅させるだけなので前章の内容とほとんど同じです。

一応、背後に被るテキストが視認できるよう不透明度をMAXで70％にとどめました。

３－２．枠線が点滅するボタンでクリック率UPを狙う

広告やLPにユーザーを誘導したい時、リンクまたはボタンを目立たせるのも一つの手段です。

しかし、あんまりドギツい装飾ないしアニメーションを加えると、逆効果に働きかねません。

点滅も例外ではありませんが、アンカーテキストの周囲（枠）をほどよく点滅させる程度なら、ユーザーの目に留まりやすく、またしつこい印象を与えなくて良いかも。

テキストや画像では不透明度を調整するopacityプロパティを使って、点滅エフェクトを演出しました。

しかし、opacityの場合は要素全体を透明化してしまうため、枠線（border）のみ点滅させるには、枠線の色を調整すると良いでしょう。

アニメーション開始時のborder-colorを薄い色に、終了時を濃い色に指定することで、枠線が点滅しているように見せることができます。

３－３．text-shadowで点滅するネオンサインを演出

暗い色を基調としたサイトなら、ネオン管風のタイトルや見出しを置いてみるのも面白いかもしれません。

上図のように、テキスト周りの発光をじわじわ点滅させるにはtext-shadowを使います。

text-shadowプロパティはテキストに影を落とすCSSです。

背景が暗い場合には、明るい色を指定することで発光エフェクト風になります。

左から順に「X軸の距離」「Y軸の距離」「ぼかしの範囲」「色」を半角スペースを空けて指定します。

同時に複数指定することができ、各値をカンマで区切ります。

アニメーションでは、開始時から終了時にかけて「ぼかしの範囲」が広がるように設定しています。

４．jQueryで点滅させる方法

ここまでCSSで点滅させる方法を紹介してきましたが、jQeuryでも点滅を実装することが可能です。

イベントを契機にエフェクトを実行させたい場合は、JQueryで点滅させると良いでしょう。

４行目の$('.heart_beat')の''間に点滅させたいクラス名を入力してください。

フェードアウト（fadeOut）を0.5秒間（500）かけて、さらに続けてフェｰドイン（fadeIn）を0.5秒間（500）かけて実行するよう指定しています。

そして、setInterval()によって上記の処理を2秒毎（2000）に繰り返します。

「1000＝1秒」を踏まえたうえで、各値は自由に調整してOKです。

まとめ

今回はCSS（またはjQuery）で点滅させる方法を解説しました。

最後に念を押しておきますが、くれぐれもblinkタグおよびtext-decoration:blinkの使用は控えるようにしましょう。

現在では、CSSアニメーションで点滅を含む様々なエフェクトを簡単かつ高度に実装できるようになりました。

blinkタグに比べると工程が増えますが、CSSアニメーションならテキストや画像だけでなくボックスや枠線、影など細かい調整が可能です。

これを機にCSSアニメーションで点滅させる方法をマスターしておくと、他分野での応用が効くと思うので、ぜひチャレンジしてみてください。