JavaScriptとCSSで「残り○日」バナーを自動表示する方法｜キャンペーン告知の時短術

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

「キャンペーン終了まであと○日！」
「◯月◯日までの限定セール！」

そんな期間限定の訴求バナー、Webサイトで見かける機会も多いですよね。

でもこれ、毎日手動で「あと○日」に書き換えてませんか？

実は、JavaScriptとCSSを使えば、終了日を指定するだけで「残り日数バナー」を自動で表示できちゃうんです！

今回は、そんな日付の計算＋条件付き表示を組み合わせたバナーの作り方を、コピペで使える形でご紹介します。
キャンペーンページやトップページの告知に、ぜひ活用してみてください。

完成イメージ：残り○日バナー

日数は毎日自動更新されて、終了日を過ぎたら非表示にもできる優れモノ。
サイト運営の手間をグッと減らしてくれます。

実際のコード

最初は非表示にしておいて、JavaScriptで「必要なときだけ表示」します。
視認性が高く、かつ邪魔になりにくいレイアウトに仕上げています。

位置は top: 0 を bottom: 0 に変えれば、下部固定表示にも。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

JavaScriptのコードでは、現在の日付と終了日を比較して、「残り日数」が正のときだけバナーを表示します。
終了日を1行で指定し、残り日数を自動で計算する仕組みです。
終了日を過ぎたらバナーは出ません。これで完全自動制御！

応用：表示開始日を設定したいときは？

「開始日より前には出したくない」という場合は、次のように条件分岐を追加しましょう。

const startDate = new Date('2025-06-10');

if (today >= startDate && today < endDate) {
  document.getElementById('daysLeft').textContent = diffDays;
  document.getElementById('limitedBanner').style.display = 'block';
}

キャンペーンの表示期間を完全に自動管理できるので、
公開のし忘れや、終了後の削除忘れも防げます!

まとめ：「残り○○日」の力を自動で活かす！

「あと〇日です！」という言葉には、不思議な説得力があります。
ユーザーは「早くしなきゃ」と無意識に感じてくれるんです！

でも、毎日手動で書き換えるのは現実的じゃない……
そんなときこそ、JavaScript＋CSSのちょっとした工夫で、手間なく訴求力をアップできます。

ぜひ、あなたのWebサイトでも導入して、「期間限定」の訴求をもっと簡単＆強力に！

satokotadesignキャンペーン実施中！