<blink> 文字を点滅させる
取り扱い | 廃止された要素 |
カテゴリ |
なし |
親にできる要素 | ― |
子にできる要素 | ― |
対応ブラウザ | caniuseで確認 |
<blink>タグの説明
<blink>
は、文字を点滅させたい箇所に適用するタグです。現在は非推奨の要素であるため、後半にCSSでの代替手段を紹介します。
特定の文字列を一定間隔で点滅させる効果があり、目立たせたいキャッチフレーズや告知に使用されます。一時期、携帯サイトでよく見られる表現でしたが、パソコン用のサイトでは使用を控えることが推奨されていました。
文字を点滅させる効果をCSSで再現するには、animation
プロパティを使います。かつて、text-decoration
プロパティでの代用も検討されていたようですが、現在では廃案となっています。
<blink>に指定できる主な属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<blink>の使い方とサンプル
この要素は標準仕様から廃止されたため、対応していないブラウザでは無視されます。
HTML
<blink>文字を点滅させる</blink>
表示確認
CSSの代替手段としてtext-decoration
の利用が検討されていましたが、現在この方法は使えません。
HTML
<span style="text-decoration:blink;">文字を点滅させる</span>
表示確認
文字を点滅させる
CSSでBlinkを再現する方法
それでは、HTMLの<blink>
と同じ効果をCSSで代替してみましょう。animation
プロパティとキーフレームを使う方法です。まずは以下の内容を確認して下さい。
HTML
<div class="sample_box">
<span class="blink">文字を点滅</span>
</div>
CSS
.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アニメーションに関する値をまとめて指定するショートハンド・プロパティです。それぞれの値は以下のように分解できます。
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; }
}
animation-name
で指定した名前を@keyframes
と関連付けます。この機能を理解すれば、様々なパターンの点滅を作り出すことができます。以下の例を参考に、別の組み合わせを試してみましょう。
表示確認
CSS
.blink1 {
animation: blink 2s linear 0s infinite normal;
}
.blink2 {
animation: blink .5s linear 0s infinite normal;
}
@keyframes blink {
0% { opacity: 0; }
29.9% { opacity: 0; }
30% { opacity: 1; }
100% { opacity: 1; }
}
.blink3 {
animation: blink_slow 1s linear 0s infinite normal;
}
@keyframes blink_slow {
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; }
}