CSSでテキストをなめらかに点滅させる方法（コピペＯＫ）

アイキャッチ／点滅カスタマイズ
2021年01月25日

今回はCSSで文字を点滅させる方法について。

トップページを作成するときや記事を書いている中で、部分的にここを点滅させたいと思うときはありませんか？

そんなとき点滅させることができるHTMLの<blink>タグがありましたが2022年現在は廃止されており、代替策でCSSのアニメーションを使って点滅を実装することができます。

例として当サイトの場合、トップページに表示した検索窓の上に入れた＼気になるキーワードを入れてね／という文字を点滅させるためにこのカスタマイズを導入しました。

この記事に書いてあること
  1. 点滅させるCSSコード
  2. HTMLタグの使い分け
  3. 点滅させるアニメーションの解説
ここを解説
吹き出し
この記事を書いた人
  • ブログが好きな40代主婦
  • CocoonサイトをCSSでフルカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー30
  • ワードプレスで３サイトを運営しています
はっちゃん
です
プロフィール

実際の動作イメージ

こんな感じにゆっくりなめらかに点滅するイメージです

＼気になるキーワードを入れてね／

点滅させるための手順

  • Step1
    HTMLの編集

    点滅させたい文字にクラス名をつけます。

  • Step2
    CSSコードをコピペ

    点滅させるためのアニメーションをここで設定しています。

  • 完成
STEP

HTMLの編集

記事作成画面（HTMLモード）で入力します。

<div class="blink">＼気になるキーワードを入れてね／</div>
  1. 点滅させる文字を<タグ>で囲みます
  2. <タグ>に続けて半角スペースをあけてクラス（class=”blink”）を指定しておきます

タグについて／用途に合わせて使い分け

<div></div>の部分（HTMLタグといいます）は用途に合わせて<p><span>など使い分けてください。

よく使うタグを覚えておくと便利！
タグ特徴・使い方
<div>division（仕切り）
汎用ブロック要素。
前後に改行が入ります。
ひとつのまとまりとして考えます。
<p>paragragh（段落）
ブロック要素。
前後に改行が入ります。
段落を指定する時に使います。
<span>汎用インライン要素。
前後に改行が入りません。
文字の部分的な装飾などに使います。
タグは他にもたくさんあります

例：<div>テキスト</div>

このように閉じタグをつけて文字を囲みます。

クラスについて／記述の仕方

CSSで記述する内容をHTMLのどの部分（要素）に反映させるかを指示するものです。

クラス名は自分で分かりやすいように任意に決めることができます。（半角英数字、記号はハイフン（ｰ）とアンダーバー（_）のみ使用可）

STEP

CSSコードをコピペ

先ほど指定したクラスを.（半角ドット）を前に付けて記述し、点滅させるための動きを付けるCSSがこちらになります。

/* 点滅 */
.blink {
	animation: blinking 1s ease-in-out infinite alternate;
}
 
@keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

プレビューで点滅するのが確認できたら作業はこれで完成です！！

お疲れさまでした。

ここから先は「どうして点滅するの？」と仕組みが少し気になった人へさくっとだけ補足。

CSS／アニメーション

CSSでアニメーションを表現するには2つの設定が必要となります。

  1. animationプロパティ
    • 詳細を設定する
  2. @keyframes
    • アニメーション開始時の状態と終了時の状態を設定する

１. animationのプロパティ

ここでアニメーションを動かす時間や繰り返しなどの詳細を設定していきます。

  •  animation-name　…　アニメーション名（クラス名とは別に自由に決めてOK、ここで設定した名前を最下段の@keyframesで指定する）
  • animation-duration　…　アニメーション1回分の時間の長さ（初期値は「0」、単位は「秒(s)」または「ミリ秒（ms）」で指定します）
  • animation-timing-function　…　アニメーションの動き方（初期値は「ease」：開始と終了を滑らかに）
  • animation-delay　…　アニメーションの開始時間（初期値は「0」）
  • animation-iteration-count　…　繰り返す回数（初期値は「1」）
  • animation-direction　…　反転再生するかどうか（初期値は「normal」）

これらのプロパティをひとつずつ書いてもよいですが、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>タグで囲みます。

まとめ

点滅を多用するとうるさくなってしまうので特に目立たせたい部分に！

コピペで簡単なのでやってみてください♪

今回、参考にさせていただいたのはこちらのサイト。いろいろな点滅バージョンもコードも公開されています。

【HTML】blinkタグは使用禁止！その理由とCSSで簡単に点滅させる方法
「blinkタグ」と「text-decoration: blink;」は廃止されたため、点滅しません。CSSの「animation」とjQueryを使って同じ動きを再現できます。おしゃれな点滅するボタンの作り方もご紹介しています。
www.ameamelog.com

Comment