今回はCSSで文字を点滅させる方法について。
トップページを作成するときや記事を書いている中で、部分的にここを点滅させたいと思うときはありませんか？
そんなとき点滅させることができるHTMLの<blink>タグがありましたが2022年現在は廃止されており、代替策でCSSのアニメーションを使って点滅を実装することができます。
例として当サイトの場合、トップページに表示した検索窓の上に入れた＼気になるキーワードを入れてね／という文字を点滅させるためにこのカスタマイズを導入しました。
- 点滅させるCSSコード
- HTMLタグの使い分け
- 点滅させるアニメーションの解説
実際の動作イメージ
こんな感じにゆっくりなめらかに点滅するイメージです
＼気になるキーワードを入れてね／
点滅させるための手順
- Step1
点滅させたい文字にクラス名をつけます。
- Step2
点滅させるためのアニメーションをここで設定しています。
- ラベル完成
HTMLの編集
記事作成画面（HTMLモード）で入力します。
<div class="blink">＼気になるキーワードを入れてね／</div>- 点滅させる文字を<タグ>で囲みます
- <タグ>に続けて半角スペースをあけてクラス（class=”blink”）を指定しておきます
タグについて／用途に合わせて使い分け
<div></div>の部分（HTMLタグといいます）は用途に合わせて<p><span>など使い分けてください。
| タグ | 特徴・使い方 |
|---|---|
| <div> | division（仕切り） 汎用ブロック要素。 前後に改行が入ります。 ひとつのまとまりとして考えます。 |
| <p> | paragragh（段落） ブロック要素。 前後に改行が入ります。 段落を指定する時に使います。 |
| <span> | 汎用インライン要素。 前後に改行が入りません。 文字の部分的な装飾などに使います。 |
例：<div>テキスト</div>
このように閉じタグをつけて文字を囲みます。
クラスについて／記述の仕方
CSSで記述する内容をHTMLのどの部分（要素）に反映させるかを指示するものです。
クラス名は自分で分かりやすいように任意に決めることができます。（半角英数字、記号はハイフン（ｰ）とアンダーバー（_）のみ使用可）
CSSコードをコピペ
先ほど指定したクラスを.（半角ドット）を前に付けて記述し、点滅させるための動きを付けるCSSがこちらになります。
/* 点滅 */
.blink {
animation: blinking 1s ease-in-out infinite alternate;
}
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
プレビューで点滅するのが確認できたら作業はこれで完成です！！
お疲れさまでした。
ここから先は「どうして点滅するの？」と仕組みが少し気になった人へさくっとだけ補足。
CSS／アニメーション
CSSでアニメーションを表現するには2つの設定が必要となります。
- animationプロパティ
- 詳細を設定する
- @keyframes
- アニメーション開始時の状態と終了時の状態を設定する
１. animationのプロパティ
ここでアニメーションを動かす時間や繰り返しなどの詳細を設定していきます。
これらのプロパティをひとつずつ書いてもよいですが、animationプロパティを使うとまとめて下記のように表記することができます。
まとめるとコードも短くなりすっきりするね！
.blink {
animation: blink 1s ease-in-out infinite alternate;
}- 開始から終了までの時間は1秒
- ゆっくり変化させる
- 無限に繰り返す
こういったことを設定しています。
２. @keyframesについて
@keyframesはアニメーションの開始から終了までに、どのような動きをさせるのかを指定します。
@keyframesのあとにanimationプロパティで指定した任意の名前を書くことによって紐付けます。
アニメーションの開始を「0%」、終了を「100%」とした場合のプロパティの変化を下記のように記載します。
@keyframes blink {
0% {opacity: 0;}
100% {opacity: 1;}
}- 0%がアニメーション開始時
- opacity: 0（要素は透明）
- 100%がアニメーション終了時
- opacity: 1（要素は不透明）
opacitycopy は CSS のプロパティで、要素の透過度を設定します。（0～1の範囲で0.1などの小数点を使って指定可能）
点滅させたいとき
一度CSSを設定しておくと、
例えば、ここを点滅させたいな！
と思ったときに記事作成画面（HTMLモード）でこのコードを追加するだけでいつでもどこでもピカピカ^^
<p>例えば、<span class="blink">ここを点滅させたいな！</span></p>文章の途中で改行しないで一部分だけ指定するときは<span></span>タグで囲みます。
まとめ
点滅を多用するとうるさくなってしまうので特に目立たせたい部分に！
コピペで簡単なのでやってみてください♪
今回、参考にさせていただいたのはこちらのサイト。いろいろな点滅バージョンもコードも公開されています。
Comment