<blink>タグの解説
<blink>は、指定した範囲の文字を点滅させます。特定の文字列を一定間隔で点滅させる効果があり、目立たせたいキャッチフレーズや告知に使用されます。点滅する間隔はブラウザの実装に依存しており、対応していないブラウザでは無視され点滅は起こりません。
現在、<blink>は非推奨のタグであるため、ソースコードの解説でCSS（スタイルシート）の代替手段を紹介します。
文字を点滅させる効果は、CSSのanimationプロパティで再現できます。かつて、text-decorationプロパティでの代用も検討されていたようですが、現在では廃案となっています。
<blink>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<blink>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。点滅させたい文字を囲います。対応していないブラウザでは無視されます。
<blink>文字を点滅させる</blink>
代替手段としてCSSのtext-decorationプロパティにblinkの追加が検討されていましたが、現在この方法は使えません。
<span style="text-decoration:blink;">文字を点滅させる</span>
CSSで<blink>の点滅を表現する方法
それでは、HTMLの<blink>と同じ効果をCSSで代替してみましょう。animationプロパティとキーフレームを使う方法です。まずは以下の内容を確認して下さい。
<span class="blink">文字を点滅</span>
.blink {
animation: blink 1s linear 0s infinite normal;
}
@keyframes blink {
0% { opacity: 0; }
29.9% { opacity: 0; }
30% { opacity: 1; }
100% { opacity: 1; }
}
上記の内容で何をやっているのかを理解できた方は、各プロパティの値を調整して好みの点滅を作成して下さい。animationは、CSSアニメーションに関する値をまとめて指定するショートハンド・プロパティです。それぞれの値は次のように分解できます。
.blink {
/* キーフレームで参照する任意の名前 */
animation-name: blink;
/* アニメーションが一周する時間（1秒） */
animation-duration: 1s;
/* 時間の流れ方（一定） */
animation-timing-function: linear;
/* アニメーションの開始時間（0秒） */
animation-delay: 0s;
/* 繰り返す数（無限） */
animation-iteration-count: infinite;
/* アニメーションの方向（普通） */
animation-direction: normal;
}
/* アニメーションの変化内容を設定 */
@keyframes blink {
/* 文字を透明にしておく */
0% { opacity: 0; }
29.9% { opacity: 0; }
/* 文字を不透明にするタイミング */
30% { opacity: 1; }
100% { opacity: 1; }
}
.blinkに指定されているのは、アニメーションに関する間接的な設定です。アニメーションで何をどれくらい変化させるのかを定義するのは@keyframesの方です。そして、@keyframesでanimation-nameプロパティの値を参照することで関連付けています。
この仕組みを理解すれば、様々なパターンの点滅を作り出すことができます。以下の例を参考に、別の組み合わせを試してみましょう。
<div class="sample-block">
<span class="blink1">←Class名だけ変わる</span>
</div>
/* 共通の親要素 */
.sample-block {
margin-top: 1rem;
}
/* ゆっくり点滅 */
.blink1 {
animation: blink_slow 2s linear 0s infinite normal;
}
@keyframes blink_slow {
0% { opacity: 0; }
29.9% { opacity: 0; }
30% { opacity: 1; }
100% { opacity: 1; }
}
/* 素早く点滅 */
.blink2 {
animation: blink_fast 0.5s linear 0s infinite normal;
}
@keyframes blink_fast {
0% { opacity: 0; }
29.9% { opacity: 0; }
30% { opacity: 1; }
100% { opacity: 1; }
}
/* ふんわり点滅 */
.blink3 {
animation: blink_fade 1s linear 0s infinite normal;
}
@keyframes blink_fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* 色を変える */
.blink4 {
animation: blink_color 1s linear 0s infinite normal;
}
@keyframes blink_color {
0% { color: #c00; }
29.9% { color: #c00; }
30% { color: #00c; }
100% { color: #00c; }
}
/* 背景色を点滅 */
.blink5 {
animation: blink_bgc 1s linear 0s infinite normal;
}
@keyframes blink_bgc {
0% { background: #fcc; }
29.9% { background: #fcc; }
30% { background: transparent; }
100% { background: transparent; }
}