CSS と JavaScript を使用してテキストを点滅させる

Neha Imran 2023年6月20日

CSS CSS Text

HTML でテキストを点滅させる
内部または埋め込み CSS を使用してテキストを点滅させる
インライン CSS を使用してテキストを点滅させる
外部 CSS を使用してテキストを点滅させる
JavaScript を使用してテキストを点滅させる
JQuery を使用してテキストを点滅させる
JavaScript を使用して、ページの複数のセクションで点滅するテキストを作成する
CSS を使用して代替点滅テキストを作成する

この記事では、まばたき/フラッシュテキストについて詳しく説明します。その目的と利点を見ていきます。

ウェブサイトに点滅テキストを実装するための多くの戦略とテクニックを学びます。点滅テキストを実装するために、内部 CSS、インライン CSS、外部 CSS、JavaScript、および jQuery を調べます。

HTML でテキストを点滅させる

Blink Text は、点滅するテキストのタイプです。ショッピング Web サイトでは、点滅するセールアイコンや新しいコレクションのバナーが点滅するスタイルで表示される場合があります。

これは、ユーザーの注意を引くための効果的な戦略です。 HTML は、この関数に対して <blink> タグを提供します。ただし、ブラウザではサポートされなくなったため、非推奨のタグになっています。

タグを使用せずにこの機能を実現するさまざまな方法を調べてみましょう。

内部または埋め込み CSS を使用してテキストを点滅させる

内部 CSS は、HTML style タグ内に含まれています。タグには、任意の CSS プロパティを含めることができます。

以下のコードを見て、内部 CSS を使用して点滅するテキストを作成する方法を確認してください。

<html>
    <head>
        <style>
            .blink {
                animation: blinker 1s linear infinite;
            }

            @keyframes blinker
            {
              50% {
                  opacity: 0;
                }
            }
        </style>
    </head>
    <body>
        <div class="blink">Internal CSS Blink !</div>
    </body>
</html>

これは、テキストを点滅させるための最も簡単な方法の 1つです。少しスタイリングをしただけで、作業は完了です。

CSS 用語のいくつかはあなたにとって初めてかもしれませんが、心配する必要はありません。各用語の意味を詳しく見ていきましょう。

`animation` プロパティ

クラス blink で CSS の animation プロパティを使用して、アニメーションを適用しました。 animation プロパティは次の省略形です。


`animation-name`	アニメーションの名前を指定します。
`animation-duration`	アニメーションが 1 サイクルを完了するのにかかる時間を定義します。
`animation-timing-function`	アニメーションの開始から終了までの速度曲線を指定します。
`animation-delay`	アニメーションの開始待ちを指定します。
`animation-iteration-count`	アニメーションを再生する回数を指定します。
`animation-direction`	アニメーションの方向を指定します。つまり、前方、後方、または交互に前後します。
`animation-fill-mode`	CSS アニメーションが実行前と実行後にターゲットにスタイルを適用する方法を示します。
`animation-play-state`	アニメーションが実行中か一時停止中かを指定します。

それでは、コードに何を書いたかを理解しましょう。上記のコードの animation は、次のプロパティを保持します。

≪ウインカー≫はアニメ名です。
1s は animation-duration で、各サイクルが 1 秒後に完了することを意味します。
linear は animation-timing-function で、アニメーションが最初から最後まで同じ速度で再生されることを意味します。
infinite は animation-iteration-count, です。これは、アニメーションが無制限に再生されることを意味します。

全体の情報を要約すると、アニメーション blinker は 1 秒間に各サイクルを同じ速度で無限に実行されると結論付けました。

キーフレーム

CSS では、@keyframes がアニメーションルールを定義します。アニメーションの作成には、変更可能な CSS スタイルが使用されます。

アニメーション中に複数の CSS プロパティの変更が発生する場合があります。スタイルの変更がパーセンテージで発生するか、0% と 100% に相当する from と to というフレーズが含まれているかを判断する必要があります。 0% は開始を表し、100% は完了を表します。

最適なブラウザーサポートを得るには、常に 0% および 100% セレクターを指定してください。これについては、記事の後半で説明します。

キーフレームの CSS 構文は次のとおりです。

@keyframes animation-name {*keyframes-selector* {*css-styles;}*}

コードで行ったことを見てみましょう。

アニメーション blinker にキーフレームを配置し、50% で不透明度がゼロになるように指定します。要素の透明度は、opacity プロパティによって設定されます。

opacity プロパティの値は厳密に 0 から 1 の間でなければなりません。

CSS ベンダープレフィックス

CSS プロパティに追加される一意のプレフィックスは、ベンダープレフィックスと呼ばれます。古いブラウザーバージョンではサポートされていない CSS プロパティがいくつかあるため、これらのタグをサポートするためにブラウザープレフィックスを使用する必要があります。

特定のブラウザにのみ属性を適用するレンダリングエンジンごとにプレフィックスがあります。

Internet Explorer、Microsoft Edge: -ms-
Chrome、Safari、iOS、Android: -webkit-
Firefox: -moz-
オペラ: -o-

上記のコードを書き直して、できるだけ多くのブラウザで動作するようにしましょう。

<html>
    <head>
        <style>
            .blink {
                -webkit-animation: blinker 1s linear infinite;
                -moz-animation: blinker 1s linear infinite;
                -ms-animation: blinker 1s linear infinite;
                -o-animation: blinker 1s linear infinite;
                 animation: blinker 1s linear infinite;
            }

            @-webkit-keyframes 'blinker' {

                0% {
                    opacity: 1;
                }

                50% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }

            @-moz-keyframes 'blinker' {
                0% {
                    opacity: 1;
                }

                50% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }

            @-o-keyframes 'blinker' {
                0% {
                    opacity: 1;
                }

                50% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }

            @-ms-keyframes 'blinker' {
               0% {
                    opacity: 1;
                }

                50% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }

            @keyframes 'blinker' {

             0% {
                    opacity: 1;
                }

                50% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }
        </style>
    </head>
    <body>
        <div class="blink">Hello Blinking World!</div>
    </body>
</html>

インライン CSS を使用してテキストを点滅させる

インライン CSS を使用すると、スタイリングを HTML 要素に直接配置できます。知っておくとよいことですが、インライン CSS は要素に依存するため、再利用できないため、推奨されるオプションではありません。

また、インラインスタイルで CSS のすべてのプロパティと機能を使用することはできません。テキストを点滅させる現在のシナリオについて言えば、キーフレームは HTML 要素の一部ではないため、インライン CSS でキーフレームを使用することはできません。

インライン CSS を使用してテキストをフラッシュする方法を見てみましょう。

<html>
    <head>
        <style>
            @-webkit-keyframes 'blinker' {
                50% {
                    opacity: 0;
                }
            }

            @-moz-keyframes 'blinker' {
                 50% {
                    opacity: 0;
                }
            }

            @-o-keyframes 'blinker' {
                 50% {
                    opacity: 0;
                }
            }

            @-ms-keyframes 'blinker' {
                50% {
                    opacity: 0;
                }
            }
        </style>
    </head>
    <body>
        <div class="blink" style="animation: blinker 1s linear infinite">
            In-line CSS Blink !
        </div>
    </body>
</html>

外部 CSS を使用してテキストを点滅させる

外部 CSS は、CSS ファイルを HTML ファイルに追加する方法です。スタイルと要素を分離しておくことは優れた方法です。

link タグを使用して CSS ファイルを追加できます。 style.css という名前の CSS ファイルを作成し、上記のコードから style タグ内のコードをコピーして、HTML ファイルに追加します。方法は次のとおりです。

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="blink">Hello Blinking World!</div>
    </body>
</html>

JavaScript を使用してテキストを点滅させる

JavaScript は、ほぼすべての機能を実行する際に常に命の恩人でした。驚くべきことを非常に迅速に行うためのさまざまな方法とテクニックを提供します。

JavaScript を使用してテキストを点滅させる方法を見てみましょう。

<html>
    <head>
        <script>
            var blink_speed = 300;
            setInterval(function(){
                var element = document.getElementById("blink");
                element.style.display = element.style.display == 'none'?'':'none';
            }, blink_speed);
        </script>
    </head>
    <body>
        <div id="blink">Javascript Blink !</div>
    </body>
</html>

ここで JavaScript コードを理解しましょう。それはどんな魔法をしているのですか？

まず、blink_speed という名前の変数を初期化し、値を割り当てます。任意の値を設定できます。 1000 を指定すると 1 秒、2000 ポイントは 2 秒などになります。

コードで 300 を割り当てます。つまり、1 秒未満になります。

次に、JavaScript の setInterval 関数を使用します。 setInterval メソッドは、指定された間隔 (ミリ秒単位) で関数を呼び出し続けます。

関数の構文は次のとおりです。

setInterval(function, milliseconds)

function パラメータは、指定された間隔で繰り返し実行される命令です。 millisecond パラメータは、実行間隔の速度を受け取ります。

私たちのコードでは、setInterval の function パラメータは、最初に ID 名で要素を取得します。必要な要素を取得した後、三項演算子を使用して、要素の表示が none の場合はそれを表示し、その逆も同様であることを確認します。

次に、blink_speed を setInterval 関数の 2 番目のパラメータに割り当てました。

JQuery を使用してテキストを点滅させる

jQuery は JavaScript のライブラリであり、その目的は JavaScript をできるだけ簡単にすることです。 jQuery を使用して点滅するテキストを作成する方法を見てみましょう。

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            function blinkText(element){
              $(element).fadeOut('slow', function(){
                  $(this).fadeIn('slow', function(){
                      blinkText(this);
                  });
              });
            }
            $(function() {
                blinkText('#blink');
            });
        </script>
    </head>
    <body>
        <div id="blink">JQuery Blink !</div>
    </body>
</html>

これはとても簡単です。コードが何をしているのか見てみましょう。

jQuery は JavaScript ライブラリであるため、使用するにはコードにその参照を追加する必要があります。コードでは、HTML 要素を受け取る単純な関数 blinkText を作成しました。

まず、要素に対して fadeOut 関数を呼び出し、次にこの関数内で別の関数 fadeIn を呼び出します。 fadeIn 内で、点滅するテキストを無限に表示したいので、関数を再帰的に呼び出します。

結論として、これは終わりのない再帰呼び出しであるため、テキストはフェードアウト、フェードイン、フェードアウト、フェードインなどを繰り返します。

JavaScript を使用して、ページの複数のセクションで点滅するテキストを作成する

エキサイティングな仕事をしましょう。ページの複数の領域で点滅するテキストを作成したいと考えています。

CSSで行うのは簡単です。点滅させたいすべての要素に同じクラスを割り当てれば完了です。

しかし、JavaScript でそれを行うにはどうすればよいでしょうか。上記のコードで見たように、JavaScript は 1つの要素のみを選択します。

これを達成する方法を見てみましょう。

<html>
    <head>
        <script>
            function blinkText()
            {
                var elements = document.getElementsByClassName("blink");
                for(var i = 0, l = elements.length; i < l; i++)
                {
                    var blink = elements[i];
                    blink.style.display = blink.style.display == 'none' ? '' : 'none';
                }
            }
            setInterval(blinkText, 300);
        </script>
    </head>
    <body>
        <div class="blink">Hello</div>
        <div class="blink">World</div>
    </body>
</html>

同じクラス名の要素が多数ある場合、document.getElementByClassname はすべての要素の配列を返します。次に、各要素を 1つずつトラバースし、タスクを実行します。

CSS を使用して代替点滅テキストを作成する

では、CSS のみを使用してテキストを点滅させる別の単語を作成する別の素晴らしいアニメーションを作成しましょう。

<html>
    <head>
        <style>
            .blink::before {
                content: "Welcome";
                animation: blinker 1s linear infinite alternate;
            }

            @keyframes blinker {
              0% {
                content: "Welcome";
              }
              50% {
                opacity: 0%;
              }
              100% {
                content: "Developer";
              }
            }
        </style>
    </head>
    <body>
        <div class="blink"></div>
    </body>
</html>

最初に Welcome と表示され、次に点滅し、Developer と表示されます。このループは絶え間なく繰り返されます。