【実例付】HTMLのBLINKがわかる｜実際のコードを見て学ぼう

※本サイトにはプロモーション・広告が含まれています。

（最終更新月：2023年6月）

✔以下の疑問をお持ちの方へ向けた記事です

「HTMLのblinkとは何で、どのように使うのだろうか？」
「HTMLのblinkの書き方を学びたい」
「HTMLのblinkの具体的な使用例を見て理解したい」

✔この記事を読むことで得られる知識

  • HTMLのblinkの基本的な使い方
  • blinkの応用法
  • HTMLのblinkを用いた具体的な使用例

この記事では、HTMLのblinkの基本的な使い方から、その応用法まで、具体的な例を交えて丁寧に解説します。

blinkは非標準の要素であり、一部のブラウザでは動作しないため、代替手段としてCSSのanimationプロパティを使用する方法も合わせてご説明します。

ぜひ最後までお読みください。

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック
created by Rinker
¥2,640 (2024/04/27 14:21:02時点 Amazon調べ-詳細)

HTMLのblinkを理解するための基礎知識

ここでは、「blink」について詳しく解説します。

「blink」について理解することで、Webページを活き活きとしたものにする方法を学びます。

  • HTMLのblinkタグの紹介と非推奨の理由
  • CSSの非推奨なtext-decoration:blinkについて

HTMLのblinkタグの紹介と非推奨の理由

HTMLのblinkタグは、テキストを点滅させるためのタグでしたが、現在では非推奨となっています。

その理由は、多くのブラウザでサポートが停止されたため。

汎用的なblink機能をつけたいのであれば、別の方法を試さなければなりません。

CSSの非推奨なtext-decoration:blinkについて

CSSでも、テキストを点滅させるための属性「text-decoration:blink;」が存在しますが、これも非推奨とされています。

なぜならうえと同様に、ブラウザでのサポートがされないことが理由です。

CSSでのblink効果の作成

この節では、非推奨のblinkタグやtext-decoration:blinkの代わりに、CSSを使用してblink効果を作成する方法について説明します。

  • 基本的なテキストの点滅の作り方
  • 画像に点滅効果をつける方法

基本的なテキストの点滅の作り方

CSSでは、「@keyframes」と「animation」を用いてテキストを点滅させられます。

  • @keyframes blink：点滅アニメーションを定義
  • 「animation」プロパティ：そのアニメーションを適用

具体的なコードはこちら。

@keyframes blink {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}

.blink-text {
    animation: blink 1s infinite;
}

このコードでは、まず@keyframesを使用してblinkという名前のアニメーションを定義しています。

アニメーションは3つのキーフレームから成り、0%と100%での不透明度は1（完全に不透明）、50%での不透明度は0（完全に透明）となっています。

そして、.blink-textというクラスにanimationプロパティを適用。

このプロパティはblink 1s infiniteという値に設定されており、これはblinkアニメーションを1秒間隔で無限に繰り返すことを意味します。

このクラスをHTML要素に適用することで、その要素は点滅するようになります。

<p class="blink-text">This text will blink</p>

画像に点滅効果をつける方法

CSSの「@keyframes」と「animation」を用いれば、テキストだけでなく画像にも点滅効果を適用可能です

具体的には、画像の透明度を時間とともに変化させるアニメーションを定義し、そのアニメーションを画像に適用します。

@keyframesを使用して透明度が時間とともに変化するblinkというアニメーションを定義

@keyframes blink {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}

animationプロパティでアニメーションを適用：blinkアニメーションを2秒間隔で無限に繰り返す

.blink-image {
    animation: blink 2s infinite;
}

このCSSクラスを適用するためのHTML要素（この場合はimg要素）を作成

<img class="blink-image" src="image.jpg" alt="Blinking image">

これにより、blink-imageクラスが適用された画像は2秒間隔で無限に点滅します。

この点滅効果は、画像の透明度を徐々に0（完全に透明）から1（完全に不透明）まで変化させることで実現しています。

blink効果の応用例

この節では、CSSを使ったblink効果の応用例について見ていきます。

  • 点滅する新着ラベルの作り方
  • 点滅するボタンのデザイン例
  • ネオンサインのようなtext-shadowを利用した点滅効果

点滅する新着ラベルの作り方

ラベルを点滅させます。

@keyframes blink {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}

.new-label {
    animation: blink 1s infinite;
    color: red;
    font-weight: bold;
}

次のようにHTML上で適用しましょう。

<span class="new-label">New!</span>

点滅するボタンのデザイン例

次に、ユーザーの目を引くために点滅するボタンのデザイン例を紹介します。

この場合も「@keyframes」と「animation」を利用し、ボタンの背景色や枠線を時間とともに変化させるアニメーションを定義します。

@keyframes blink {
    0% {background-color: #007BFF;}
    50% {background-color: #ffffff;}
    100% {background-color: #007BFF;}
}

.blink-button {
    animation: blink 1s infinite;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}
<button class="blink-button">Click Me!</button>

ネオンサインのようなtext-shadowを利用した点滅効果

最後に、ネオンサインのような効果を実現するためのテクニックを紹介します。

「text-shadow」プロパティと「@keyframes」を組み合わせることで、テキストが点滅すると同時に光っているかのような効果を作り出すことができます。

@keyframes neonBlink {
    0%, 100% {text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000, 0 0 15px #ff0000;}
    50% {text-shadow: none;}
}

.neon-text {
    font-size: 2em;
    color: #ffffff;
    animation: neonBlink 1s infinite;
}
<p class="neon-text">Neon Sign</p>

jQueryでのblink効果の作成

ここでは、jQueryを使ったblink効果の作成方法について詳しく見ていきます。

  • jQueryでのテキストの点滅の作り方
  • jQueryでの画像の点滅の作り方

jQueryでのテキストの点滅の作り方

jQueryを用いると、よりシンプルなコードで点滅効果を作成することが可能です。

特に「fadeIn」と「fadeOut」メソッドを使い、テキストの透明度を時間とともに変化させることで、点滅効果を作り出すことができます。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            function blink() {
                $(".blink-text").fadeOut(500).fadeIn(500, blink);
            }
            blink();
        });
    </script>
</head>
<body>
    <p class="blink-text">This text will blink</p>
</body>
</html>

jQueryでの画像の点滅の作り方

jQueryでは、テキストだけでなく画像に対しても点滅効果を作成することができます。

「fadeIn」と「fadeOut」メソッドを利用し、画像の透明度を時間とともに変化させて点滅させます。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            function blink() {
                $(".blink-image").fadeOut(500).fadeIn(500, blink);
            }
            blink();
        });
    </script>
</head>
<body>
    <img class="blink-image" src="image.jpg" alt="Blinking image">
</body>
</html>

まとめ：blink効果を理解し、適切に使用しよう

当記事では、テキストや画像に点滅効果を作り出す方法をご紹介しました。

使用した言語は以下のとおり。

  • HTML
  • CSS
  • jQuery

非推奨となったblinkタグやtext-decoration:blinkの代わりにどのようにして点滅効果を作り出すかも学びました。

今回学んだことを基に、さらに自分のWebページを豊かにするための学習を進めていきましょう。

例えば、点滅効果だけでなく他のアニメーション効果を追加してみたり、点滅速度やパターンをユーザーが自由に変更できるようにするなど、さまざまな拡張が可能です。

また、常にユーザー体験を最優先に考えることが大切であり、点滅効果を過度に使用しすぎると、逆にユーザーを遠ざける可能性もあることを覚えておきましょう。

タイトルとURLをコピーしました