【JavaScript】カウントダウンページを作成する

2026年08月10日

WEBサイト制作

#HTML
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

皆さんはキャンペーンサイトを作ったことがありますか？
キャンペーンサイトを作る際、
SNSやHPでもう告知を出してしまったから、
サーバーとドメインを契約して、カウントダウンページを作って欲しいという要望は結構あります。

そんなときに便利なレシピです！

実装例

—日
—時間
—分
—秒

HTML例

<div id="countdown-box">
  <div id="countdown-label"></div>
  <div id="countdown-timer">
    <span class="cd-unit"><span id="cd-days">--</span><small>日</small></span>
    <span class="cd-unit"><span id="cd-hours">--</span><small>時間</small></span>
    <span class="cd-unit"><span id="cd-minutes">--</span><small>分</small></span>
    <span class="cd-unit"><span id="cd-seconds">--</span><small>秒</small></span>
  </div>
</div>

CSS例

#countdown-box {
  font-family: sans-serif;
  text-align: center;
  margin: 30px 0;
}
#countdown-label {
  font-size: 16px;
  color: #888;
  margin-bottom: 10px;
}
#countdown-timer {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f5f5f5;
  border-radius: 10px;
  padding: 14px 18px;
  min-width: 60px;
}
.cd-unit span:first-child {
  font-size: 36px;
  font-weight: bold;
  color: #222;
  line-height: 1;
}
.cd-unit small {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}

JavaScript例

// =============================
// カウントダウン設定（ここを変えるだけ）
// =============================
const COUNTDOWN_TARGET = {
  // label : 表示テキスト
  // date  : new Date(年, 月-1, 日) または 'newyear' などのプリセット名
  //
  // プリセット一覧:
  //   'newyear'   → 次の1/1
  //   'christmas' → 次の12/25
  //   'gw'        → 次の4/29
  //   'obon'      → 次の8/13
  //   'halloween' → 次の10/31
  //
  // 例) label: 'クリスマスまで', date: 'christmas'
  // 例) label: '夏休みまで',     date: new Date(2026, 6, 20)
  label: '年明けまで',
  date: 'newyear',
};
// =============================
const PRESETS = {
  newyear:  (y) => new Date(y + 1, 0, 1),
  christmas:(y) => new Date(y, 11, 25),
  gw:       (y) => new Date(y, 3, 29),
  obon:     (y) => new Date(y, 7, 13),
  halloween:(y) => new Date(y, 9, 31),
};
function resolveDate(val) {
  if (val instanceof Date) return val;
  const now = new Date();
  const y = now.getFullYear();
  const d = PRESETS[val](y);
  return d > now ? d : PRESETS[val](y + 1);
}
const targetDate  = resolveDate(COUNTDOWN_TARGET.date);
const targetLabel = COUNTDOWN_TARGET.label;
document.getElementById('countdown-label').textContent = targetLabel;
function updateCountdown() {
  const diff = targetDate - new Date();
  if (diff <= 0) { document.getElementById('countdown-label').textContent = targetLabel.replace('まで', '') + '！'; ['cd-days','cd-hours','cd-minutes','cd-seconds'].forEach(id => {
      document.getElementById(id).textContent = '0';
    });
    return;
  }
  document.getElementById('cd-days').textContent    = Math.floor(diff / (1000 * 60 * 60 * 24));
  document.getElementById('cd-hours').textContent   = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  document.getElementById('cd-minutes').textContent = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  document.getElementById('cd-seconds').textContent = Math.floor((diff % (1000 * 60)) / 1000);
}
updateCountdown();
setInterval(updateCountdown, 1000);

プリセットを使う場合
label: ‘クリスマスまで’,
date: ‘christmas’,

任意の日付を指定する場合
label: ‘夏休みまで’,
date: new Date(2026, 6, 20), // 7月20日（月は0始まり）

使えるプリセット名：newyear / christmas / gw / obon / halloween
プリセットは過去日だったら自動で翌年に切り替わります。