月間カレンダー

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「月間カレンダー」の効果を追加してください。

# 追加してほしい効果
月間カレンダー（カレンダー & ステップ）
2026年7月を起点に前月・翌月へ移動でき、今日を淡いリングで示しつつ日付をクリックして選択できる、標準的な7列グリッドの月間カレンダーです。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- 月間カレンダー: 2026年7月を起点に前後の月へ移動でき、日付をクリックして選択できます -->
<div class="cmo-stage">
  <section class="cmo-card" aria-label="月間カレンダー">
    <header class="cmo-head">
      <button type="button" class="cmo-nav" id="cmoPrev" aria-label="前の月へ">
        <span aria-hidden="true">‹</span>
      </button>
      <h2 class="cmo-title" id="cmoTitle" aria-live="polite">2026年7月</h2>
      <button type="button" class="cmo-nav" id="cmoNext" aria-label="次の月へ">
        <span aria-hidden="true">›</span>
      </button>
    </header>

    <div class="cmo-weekrow" aria-hidden="true">
      <span class="cmo-wd cmo-wd--sun">日</span>
      <span class="cmo-wd">月</span>
      <span class="cmo-wd">火</span>
      <span class="cmo-wd">水</span>
      <span class="cmo-wd">木</span>
      <span class="cmo-wd">金</span>
      <span class="cmo-wd cmo-wd--sat">土</span>
    </div>

    <div class="cmo-grid" id="cmoGrid" role="grid" aria-label="日付を選択"></div>

    <p class="cmo-note" id="cmoNote">日付をクリックして選択してください</p>
  </section>
</div>

【CSS】
/* 月間カレンダー: 生成りの背景に浮かぶ上品なカード。今日はアンバーの輪、選択日はインディゴで塗る */
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 20px;
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(79, 70, 229, .10) 0%, transparent 50%),
    radial-gradient(circle at 88% 94%, rgba(184, 134, 63, .12) 0%, transparent 50%),
    #f7f5f1;
  color: #26232c;
}

.cmo-stage { width: 100%; max-width: 380px; }

.cmo-card {
  background: #fff;
  border: 1px solid #e9e5df;
  border-radius: 22px;
  padding: 24px 22px 20px;
  box-shadow: 0 26px 60px -30px rgba(38, 35, 44, .35), 0 2px 10px rgba(38, 35, 44, .05);
}

.cmo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.cmo-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #26232c;
}

.cmo-nav {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #ece8e1;
  border-radius: 50%;
  background: #fbfaf8;
  color: #57525e;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.cmo-nav:hover { background: #f0eef0; border-color: #ddd7cd; }
.cmo-nav:active { transform: scale(.92); }
.cmo-nav:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }

.cmo-weekrow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}
.cmo-wd {
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #a29d8f;
  padding-bottom: 6px;
}
.cmo-wd--sun { color: #c2515f; }
.cmo-wd--sat { color: #3b82c4; }

.cmo-grid { display: grid; gap: 4px; }
.cmo-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.cmo-day {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #34303a;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
/* :not(...)を付けないと :hover の詳細度が --selected / --out の背景に勝ってしまう */
.cmo-day:hover:not(.cmo-day--selected):not(.cmo-day--out) { background: #f2f0eb; }
.cmo-day:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }

.cmo-day--out { color: #cac5ba; }
.cmo-day--out:hover { background: #f7f5f1; }

.cmo-day--sun { color: #c2515f; }
.cmo-day--sat { color: #3b82c4; }
.cmo-day--out.cmo-day--sun,
.cmo-day--out.cmo-day--sat { color: #e3cdd1; }

.cmo-day--today {
  box-shadow: inset 0 0 0 1.6px #b8863f;
  color: #8a5e26;
  font-weight: 700;
}

.cmo-day--selected,
.cmo-day--selected.cmo-day--sun,
.cmo-day--selected.cmo-day--sat {
  background: #4f46e5;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 16px -6px rgba(79, 70, 229, .6);
}
.cmo-day--selected.cmo-day--today {
  box-shadow: 0 6px 16px -6px rgba(79, 70, 229, .6), inset 0 0 0 1.6px #fff;
}

.cmo-note {
  margin: 16px 2px 0;
  text-align: center;
  font-size: 12.5px;
  color: #8f8a80;
  min-height: 1.4em;
}

@media (max-width: 380px) {
  .cmo-card { padding: 20px 14px 16px; }
  .cmo-day { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .cmo-nav, .cmo-day { transition: none; }
}

【JavaScript】
// 月間カレンダー: 2026年7月を起点に描画。new Date()の現在時刻には依存せず、固定の年月だけを状態に持つ
(() => {
  const grid = document.getElementById('cmoGrid');
  const titleEl = document.getElementById('cmoTitle');
  const noteEl = document.getElementById('cmoNote');
  const prevBtn = document.getElementById('cmoPrev');
  const nextBtn = document.getElementById('cmoNext');
  if (!grid || !titleEl || !noteEl || !prevBtn || !nextBtn) return; // null安全

  const WD = ['日', '月', '火', '水', '木', '金', '土'];
  const TODAY = { y: 2026, m: 6, d: 15 }; // 固定の「今日」= 2026年7月15日(水)

  let viewY = TODAY.y;
  let viewM = TODAY.m; // 0始まり(6=7月)
  let selected = null; // { y, m, d }

  const daysInMonth = (y, m) => new Date(y, m + 1, 0).getDate();
  const firstWeekday = (y, m) => new Date(y, m, 1).getDay();

  function render() {
    titleEl.textContent = `${viewY}年${viewM + 1}月`;
    grid.innerHTML = '';

    const lead = firstWeekday(viewY, viewM);
    const start = new Date(viewY, viewM, 1 - lead);

    for (let row = 0; row < 6; row++) {
      const rowEl = document.createElement('div');
      rowEl.className = 'cmo-row';
      rowEl.setAttribute('role', 'row');
      for (let col = 0; col < 7; col++) {
        const d = new Date(start.getFullYear(), start.getMonth(), start.getDate() + row * 7 + col);
        const y = d.getFullYear(), m = d.getMonth(), day = d.getDate(), dow = d.getDay();
        const inMonth = m === viewM && y === viewY;
        const isToday = y === TODAY.y && m === TODAY.m && day === TODAY.d;
        const isSelected = !!selected && y === selected.y && m === selected.m && day === selected.d;

        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'cmo-day';
        if (!inMonth) btn.classList.add('cmo-day--out');
        if (dow === 0) btn.classList.add('cmo-day--sun');
        if (dow === 6) btn.classList.add('cmo-day--sat');
        if (isToday) btn.classList.add('cmo-day--today');
        if (isSelected) btn.classList.add('cmo-day--selected');
        btn.setAttribute('role', 'gridcell');
        btn.setAttribute('aria-selected', isSelected ? 'true' : 'false');
        if (isToday) btn.setAttribute('aria-current', 'date');
        btn.tabIndex = isSelected || (!selected && isToday && inMonth) ? 0 : -1;
        btn.dataset.y = String(y);
        btn.dataset.m = String(m);
        btn.dataset.d = String(day);
        btn.setAttribute('aria-label', `${y}年${m + 1}月${day}日(${WD[dow]})`);
        btn.textContent = String(day);
        rowEl.appendChild(btn);
      }
      grid.appendChild(rowEl);
    }

    // フォーカス可能セルが1つもない場合の保険(表示月に今日も選択日もない時)
    if (!grid.querySelector('[tabindex="0"]')) {
      const first = grid.querySelector('.cmo-day:not(.cmo-day--out)');
      if (first) first.tabIndex = 0;
    }

    updateNote();
  }

  function updateNote() {
    if (!selected) { noteEl.textContent = '日付をクリックして選択してください'; return; }
    const dow = new Date(selected.y, selected.m, selected.d).getDay();
    noteEl.textContent = `選択中: ${selected.y}年${selected.m + 1}月${selected.d}日(${WD[dow]})`;
  }

  function changeMonth(delta) {
    viewM += delta;
    if (viewM < 0) { viewM = 11; viewY -= 1; }
    if (viewM > 11) { viewM = 0; viewY += 1; }
    render();
  }

  grid.addEventListener('click', (e) => {
    const btn = e.target.closest('.cmo-day');
    if (!btn) return;
    const y = Number(btn.dataset.y), m = Number(btn.dataset.m), d = Number(btn.dataset.d);
    const wasOut = btn.classList.contains('cmo-day--out');
    selected = { y, m, d };
    if (wasOut) {
      // 前後月の日付をクリックしたら、そちらの月へ移動してから選択する
      viewY = y; viewM = m;
    }
    render();
    const again = grid.querySelector(`.cmo-day[data-y="${y}"][data-m="${m}"][data-d="${d}"]`);
    if (again) { again.tabIndex = 0; again.focus(); }
  });

  grid.addEventListener('keydown', (e) => {
    const btn = e.target.closest('.cmo-day');
    if (!btn) return;
    const map = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: 7, ArrowUp: -7 };
    const delta = map[e.key];
    if (delta === undefined) return;
    e.preventDefault();
    const all = Array.from(grid.querySelectorAll('.cmo-day'));
    const idx = all.indexOf(btn);
    const nextIdx = idx + delta;
    if (nextIdx >= 0 && nextIdx < all.length) {
      all[idx].tabIndex = -1;
      all[nextIdx].tabIndex = 0;
      all[nextIdx].focus();
    }
  });

  prevBtn.addEventListener('click', () => changeMonth(-1));
  nextBtn.addEventListener('click', () => changeMonth(1));

  render();
})();

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。