<blink> 文字を点滅させる

取り扱い 廃止された要素
カテゴリ なし
親にできる要素
子にできる要素
対応ブラウザ caniuseで確認

<blink>タグの説明

<blink>は、文字を点滅させたい箇所に適用するタグです。Netscape Navigatorが独自に採用した要素のため、Internet Explorerなどでは無視されます。

特定の文字列を一定間隔で点滅させる効果があり、目立たせたいキャッチフレーズや告知に使用されていました。一時期、携帯サイトでよく見られる表現でしたが、現在では標準仕様から廃止されてしまったため、CSS(スタイルシート)やJavaScriptでの代替が必用となります。

文字を点滅させる効果(blink)をCSSで再現するには、animationプロパティを使います。かつて、text-decorationプロパティでの代用も検討されていたようですが、現在では廃案となっています。

CSSで文字を点滅させる方法は、サンプルの後半で解説します。

<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; }
}

<blink>に関連するHTMLタグ

非推奨または廃止になったタグ
<acronym> 略語(頭字語)であることを表す
<applet> JAVAアプレットを埋め込む
<basefont> 文字の基準となるサイズ、色、フォントの指定
<bgsound> 効果音やバックミュージックを鳴らす
<big> 文字をひと周り大きく表示する
<blink> 文字を点滅させる
<center> センタリングする
<command> ページ内のメニューに操作コマンドを設定する
<dir> ディレクトリ・リストを表す
<font> フォントの色や大きさを変える
<frame> フレームに表示するファイルを指定する
<frameset> ウィンドウを分割する
<hgroup> 見出しをグループ化してセクションのヘッダを表す
<keygen> フォーム送信時に暗号鍵を発行する
<listing> タグを解釈してソースをそのまま表示する
<marquee> 文字列をスクロールさせる(流れる文字)
<menuitem> コンテキストメニューの項目を作成する
<multicol> 段組みのレイアウトを作成する
<nobr> 自動改行を無効にする
<noembed> プラグインが利用できない環境での表示内容を指定する
<noframes> フレームが表示できない環境での表示内容を指定する
<plaintext> ソースをテキストとしてそのまま表示する
<rb> ルビをふる文字の区切りを指定する
<spacer> ホワイトスペースを挿入する
<strike> 文字列に打ち消し線を引く
<tt> 文字を等幅フォントで表示する
<xmp> ソースをそのまま表示する