<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; }
}
<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> | ソースをそのまま表示する |