お知らせ表示（タブ＆モーダル）実装解説｜JS & CSS Modal Notice Guide

2026年4月7日

お知らせ表示デザイン見本

お知らせリストの項目をクリックすると、モーダルウィンドウで詳細を表示する実装解説。瞬時切り替えとアニメーション付きの2パターンのコピペ用コードを掲載。

① 基本のお知らせ表示 — display プロパティで瞬時に切り替え

📢 お知らせ

NEW 新機能リリースのご案内 2026.04.07 ›
INFO メンテナンスのお知らせ 2026.04.05 ›
利用規約改定について 2026.04.01 ›

HTML

<div class="notice-list-wrap">
  <p class="notice-list-heading">お知らせ</p>
  <ul class="notice-list">
    <li class="notice-item" data-notice="a">
      <span class="notice-badge notice-badge-new">NEW</span>
      <span class="notice-text">新機能リリースのご案内</span>
      <span class="notice-date">2026.04.07</span>
      <span class="notice-arrow">&rsaquo;</span>
    </li>
    <li class="notice-item" data-notice="b">
      <span class="notice-badge notice-badge-info">INFO</span>
      <span class="notice-text">メンテナンスのお知らせ</span>
      <span class="notice-date">2026.04.05</span>
      <span class="notice-arrow">&rsaquo;</span>
    </li>
    <li class="notice-item" data-notice="c">
      <span class="notice-badge-spacer"></span>
      <span class="notice-text">利用規約改定について</span>
      <span class="notice-date">2026.04.01</span>
      <span class="notice-arrow">&rsaquo;</span>
    </li>
  </ul>
</div>

<div id="notice-mask" class="notice-mask"></div>
<div id="notice-window" class="notice-window">
  <div class="notice-window-inner">
    <p class="notice-window-title"></p>
    <p class="notice-window-body"></p>
    <div class="notice-close-wrap">
      <button id="notice-close-btn">閉じる</button>
    </div>
  </div>
</div>

CSS

.notice-list-wrap {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.notice-list-heading {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  background: #334155;
  margin: 0;
  padding: 10px 16px;
}

.notice-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notice-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.18s;
}

.notice-item:last-child {
  border-bottom: none;
}

.notice-item:hover {
  background: #f0f7ff;
}

.notice-badge {
  box-sizing: border-box;
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}

.notice-badge-new {
  background: #ef4444;
}

.notice-badge-info {
  background: #3b82f6;
}

.notice-badge-spacer {
  display: inline-block;
  width: 36px;
  flex-shrink: 0;
}

.notice-text {
  flex: 1;
  font-size: 0.88rem;
  color: #2563eb;
  text-decoration: underline;
}

.notice-date {
  font-size: 0.78rem;
  color: #94a3b8;
  flex-shrink: 0;
}

.notice-arrow {
  color: #cbd5e1;
  font-size: 1.1rem;
}

.notice-mask {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 100;
}

.notice-mask.appear {
  display: block;
}

.notice-window {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  z-index: 101;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.notice-window.appear {
  display: block;
}

.notice-window-inner {
  padding: 24px;
}

.notice-window-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e2e8f0;
}

.notice-window-body {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.75;
  margin: 0 0 20px;
}

.notice-close-wrap {
  text-align: center;
}

#notice-close-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 24px;
  font-size: 0.85rem;
  cursor: pointer;
  color: #475569;
  transition: background 0.18s;
}

#notice-close-btn:hover {
  background: #e2e8f0;
}

const noticeData = {
  'a': {
    title: '新機能リリースのご案内',
    body: '2026年4月より新しい機能が追加されました。ダッシュボードの右上メニューから確認できます。'
  },
  'b': {
    title: 'メンテナンスのお知らせ',
    body: '4月15日（水）00:00〜06:00の間、メンテナンスを実施します。この間はサービスをご利用いただけません。'
  },
  'c': {
    title: '利用規約改定について',
    body: '2026年5月1日より、新しい利用規約が適用されます。詳細は利用規約ページをご確認ください。'
  }
};

const mask = document.getElementById('notice-mask');
const win = document.getElementById('notice-window');
const titleEl = win.querySelector('.notice-window-title');
const bodyEl = win.querySelector('.notice-window-body');
const closeBtn = document.getElementById('notice-close-btn');

function showNotice(key) {
  const data = noticeData[key];
  if (!data) return;
  titleEl.textContent = data.title;
  bodyEl.textContent = data.body;
  mask.classList.add('appear');
  win.classList.add('appear');
}

function hideNotice() {
  mask.classList.remove('appear');
  win.classList.remove('appear');
}

document.querySelectorAll('.notice-item').forEach(item => {
  item.addEventListener('click', () => {
    showNotice(item.getAttribute('data-notice'));
  });
});

closeBtn.addEventListener('click', hideNotice);
mask.addEventListener('click', hideNotice);

document.addEventListener('keydown', e => {
  if (e.key === 'Escape') hideNotice();
});

data-notice 属性

クリックされたリスト項目がどのお知らせに対応するかを data-notice 属性で管理します。getAttribute('data-notice') でキーを取得し、そのキーに対応するタイトル・本文をオブジェクトから取り出してモーダルに表示します。

display: none / block の切り替え

マスク（背景の暗転）とモーダルウィンドウに .appear クラスを付け外しすることで、display: none ↔ display: block を切り替えます。両方を同時に操作して一体感を出します。

② アニメーション付きお知らせ表示 — フェードイン＆スライドアップ

📢 お知らせ

NEW 新機能リリースのご案内 2026.04.07 ›
INFO メンテナンスのお知らせ 2026.04.05 ›
利用規約改定について 2026.04.01 ›

HTML

<div class="notice-list-wrap">
  <p class="notice-list-heading">お知らせ</p>
  <ul class="notice-list">
    <li class="notice-item" data-notice="a">
      <span class="notice-badge notice-badge-new">NEW</span>
      <span class="notice-text">新機能リリースのご案内</span>
      <span class="notice-date">2026.04.07</span>
      <span class="notice-arrow">&rsaquo;</span>
    </li>
    <li class="notice-item" data-notice="b">
      <span class="notice-badge notice-badge-info">INFO</span>
      <span class="notice-text">メンテナンスのお知らせ</span>
      <span class="notice-date">2026.04.05</span>
      <span class="notice-arrow">&rsaquo;</span>
    </li>
    <li class="notice-item" data-notice="c">
      <span class="notice-badge-spacer"></span>
      <span class="notice-text">利用規約改定について</span>
      <span class="notice-date">2026.04.01</span>
      <span class="notice-arrow">&rsaquo;</span>
    </li>
  </ul>
</div>

<div id="notice-mask" class="notice-mask"></div>
<div id="notice-window" class="notice-window">
  <div class="notice-window-inner">
    <p class="notice-window-title"></p>
    <p class="notice-window-body"></p>
    <div class="notice-close-wrap">
      <button id="notice-close-btn">閉じる</button>
    </div>
  </div>
</div>

CSS

.notice-list-wrap {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.notice-list-heading {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  background: #334155;
  margin: 0;
  padding: 10px 16px;
}

.notice-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notice-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.18s;
}

.notice-item:last-child {
  border-bottom: none;
}

.notice-item:hover {
  background: #f0f7ff;
}

.notice-badge {
  box-sizing: border-box;
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}

.notice-badge-new {
  background: #ef4444;
}

.notice-badge-info {
  background: #3b82f6;
}

.notice-badge-spacer {
  display: inline-block;
  width: 36px;
  flex-shrink: 0;
}

.notice-text {
  flex: 1;
  font-size: 0.88rem;
  color: #2563eb;
  text-decoration: underline;
}

.notice-date {
  font-size: 0.78rem;
  color: #94a3b8;
  flex-shrink: 0;
}

.notice-arrow {
  color: #cbd5e1;
  font-size: 1.1rem;
}

.notice-mask {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 100;
}

.notice-mask.appear {
  opacity: 1;
  pointer-events: auto;
}

.notice-window {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 20px));
  transition: opacity 0.28s ease, transform 0.28s ease;
  position: fixed;
  top: 50%;
  left: 50%;
  background: #fff;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  z-index: 101;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.notice-window.appear {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.notice-window-inner {
  padding: 24px;
}

.notice-window-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e2e8f0;
}

.notice-window-body {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.75;
  margin: 0 0 20px;
}

.notice-close-wrap {
  text-align: center;
}

#notice-close-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 24px;
  font-size: 0.85rem;
  cursor: pointer;
  color: #475569;
  transition: background 0.18s;
}

#notice-close-btn:hover {
  background: #e2e8f0;
}

const noticeData = {
  'a': {
    title: '新機能リリースのご案内',
    body: '2026年4月より新しい機能が追加されました。ダッシュボードの右上メニューから確認できます。'
  },
  'b': {
    title: 'メンテナンスのお知らせ',
    body: '4月15日（水）00:00〜06:00の間、メンテナンスを実施します。この間はサービスをご利用いただけません。'
  },
  'c': {
    title: '利用規約改定について',
    body: '2026年5月1日より、新しい利用規約が適用されます。詳細は利用規約ページをご確認ください。'
  }
};

const mask = document.getElementById('notice-mask');
const win = document.getElementById('notice-window');
const titleEl = win.querySelector('.notice-window-title');
const bodyEl = win.querySelector('.notice-window-body');
const closeBtn = document.getElementById('notice-close-btn');

function showNotice(key) {
  const data = noticeData[key];
  if (!data) return;
  titleEl.textContent = data.title;
  bodyEl.textContent = data.body;
  mask.classList.add('appear');
  win.classList.add('appear');
}

function hideNotice() {
  mask.classList.remove('appear');
  win.classList.remove('appear');
}

document.querySelectorAll('.notice-item').forEach(item => {
  item.addEventListener('click', () => {
    showNotice(item.getAttribute('data-notice'));
  });
});

closeBtn.addEventListener('click', hideNotice);
mask.addEventListener('click', hideNotice);

document.addEventListener('keydown', e => {
  if (e.key === 'Escape') hideNotice();
});

opacity と pointer-events でアニメーション

display: none では CSS の transition が効きません。代わりに opacity: 0 + pointer-events: none で「見えない・操作できない」状態を作り、.appear クラスで両方を変化させてアニメーションを実現します。

transform の初期値でスライドアップを演出

ウィンドウの初期 transform を translate(-50%, calc(-50% + 20px)) とすることで、.appear 時の translate(-50%, -50%) への変化が「下から上へのスライド」に見えます。transition で同時にアニメーションさせます。

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。

お知らせ表示（タブ＆モーダル）実装解説｜JS & CSS Modal Notice Guide

お知らせ表示 デザイン見本

① 基本のお知らせ表示 — display プロパティで瞬時に切り替え

② アニメーション付きお知らせ表示 — フェードイン＆スライドアップ

お知らせ表示デザイン見本