概要 ▶ CSSのanimationを使うと簡単に再現できます。さぁ点滅させよう！
本ページはプロモーションが含まれている場合があります
本ページはプロモーションが含まれている場合があります
asahi.comが登場して20周年記念で、開設当時の様子を再現したページが公開されています。
トップページでリンクしているニュース記事は2015年8月10日の最新のものだが、ページデザインは横480ピクセルに収まるサイズで作られており、背景色はシルバー（bgcolor="#c0c0c0"）で、「HTML 3.0をベースにデザインしています。Netscape 1.x の使用を推奨します。」との注意書きもある。
Netscape 1.xでの閲覧を推奨、20周年の「asahi.com」トップページが開設当時のデザインに -INTERNET Watch（Netscape 1.xでの閲覧を推奨、20周年の「asahi.com」トップページが開設当時のデザインに -INTERNET Watch）
画像出典：Asahi NewsPaper Index（Asahi.com）
懐かしいですね。灰色の背景とか、バナーの感じとか、微妙に英語とか。
●昔よく使われていた文字を点滅させるタグ「blink」
このNetscape 1.0ネタではないですが、テキストを点滅させるblinkタグが昔のウェブブラウザーにあって、ホームページでよく使われていました。
こういうものですね。（アニメーションGIFです）
何か懐かしさを感じる表現ですね。
最近のブラウザーではこのblinkタグに対応していないものがほとんどですが、これを新しい技術（CSS3）を使って再現してみます。
●blinkタグを再現するCSSのコード
というわけで早速CSSのコードを。
.blinking {
-webkit-animation: 0.5s linear 0s alternate none infinite running blink;
-moz-animation: 0.5s linear 0s alternate none infinite running blink;
animation: 0.5s linear 0s alternate none infinite running blink;
}
@-webkit-keyframes blink {
0% { opacity: 0; }
19.9% { opacity: 0; }
20% { opacity: 1; }
100% { opacity: 1; }
}
@-moz-keyframes blink {
0% { opacity: 0; }
19.9% { opacity: 0; }
20% { opacity: 1; }
100% { opacity: 1; }
}
@keyframes blink {
0% { opacity: 0; }
19.9% { opacity: 0; }
20% { opacity: 1; }
100% { opacity: 1; }
}
あとは点滅させたい部分にclassで「blinking」を付けるだけです。文字だけでなく、画像もOKですよ。
↓こんな感じで動作します。（スマートフォン版で動作していない方はこちらのPC版へ）
Welcome to My Homepage!!
いかがですか？ 当時のそれっぽい感じになっていますか？
CSSのanimation部分にある「0.5s」の数字やkeyframeの中にある％の数値を変更すれば、点滅のスピードや表示タイミングを変更することができます。
それでは、よいホームページ作りを（笑）。
●参考
- CSSでテキスト、画像、何でも点滅！（株式会社ウィル）
●関連ページ
- 「blinkタグ」の開発者が明かすテキスト点滅タグが生まれた知られざる理由とは？（GIGAZINE）