MENU
無料Webアプリ、Webコーディング事例集、PC・IT用語Wiki、EC-CUBEカスタマイズなど
  1. ホーム
  2. プログラミング
  3. HTML/CSS/JavaScript
  4. お知らせ表示の作り方｜リストからモーダル

お知らせ表示の作り方｜リストからモーダル

HTML/CSS/JavaScript

リストをクリックして詳細をモーダル表示

お知らせリストの項目をクリックすると、モーダルで詳細を表示する方法を2パターンで解説します。各デモと同じ動きを再現できるHTML・CSS・JavaScriptを掲載しています。
HTML・CSS・JSコードプレビューツールでも動作を確認できます。

関連: モーダルウィンドウとは？ JavaScriptとは？

このページで作るもの

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

お知らせ

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

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

<div class="ntc-basic-mask"></div>
<div class="ntc-basic-win">
  <div class="ntc-basic-win-inner">
    <p class="ntc-basic-win-title"></p>
    <p class="ntc-basic-win-body"></p>
    <div class="ntc-basic-close-wrap">
      <button class="ntc-basic-close" type="button">閉じる</button>
    </div>
  </div>
</div>
CSS
.ntc-basic-list-wrap {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

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

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

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

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

.ntc-basic-item:hover {
  background: #f0f7ff;
}

.ntc-basic-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;
}

.ntc-basic-badge-new {
  background: #ef4444;
}

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

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

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

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

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

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

.ntc-basic-mask.is-open {
  display: block;
}

.ntc-basic-win {
  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);
}

.ntc-basic-win.is-open {
  display: block;
}

.ntc-basic-win-inner {
  padding: 24px;
}

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

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

.ntc-basic-close-wrap {
  text-align: center;
}

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

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

var mask = document.querySelector('.ntc-basic-mask');
var win = document.querySelector('.ntc-basic-win');
var titleEl = document.querySelector('.ntc-basic-win-title');
var bodyEl = document.querySelector('.ntc-basic-win-body');
var closeBtn = document.querySelector('.ntc-basic-close');

function openNotice(key) {
  var info = noticeMap[key];
  if (!info) return;
  titleEl.textContent = info.heading;
  bodyEl.textContent = info.detail;
  mask.className = 'ntc-basic-mask is-open';
  win.className = 'ntc-basic-win is-open';
}

function closeNotice() {
  mask.className = 'ntc-basic-mask';
  win.className = 'ntc-basic-win';
}

document.querySelectorAll('.ntc-basic-item').forEach(function(item) {
  item.addEventListener('click', function() {
    openNotice(item.getAttribute('data-notice'));
  });
});

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

document.addEventListener('keydown', function(ev) {
  if (ev.key === 'Escape') closeNotice();
});
data-notice で対応づけ

リスト項目に data-notice を付け、クリック時にキーを取り出します。キーに対応する見出し・本文をオブジェクトから読んでモーダルへ入れます。HTML とデータを分けられるので、件数を増やしやすいです。

display の付け外し

マスクとウィンドウに is-open クラスを付け外しし、display: none と block を切り替えます。両方を同時に操作すると、暗転と本文が一体に見えます。

② アニメーション付き — フェードイン＆スライドアップ

お知らせ

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

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

<div class="ntc-fade-mask"></div>
<div class="ntc-fade-win">
  <div class="ntc-fade-win-inner">
    <p class="ntc-fade-win-title"></p>
    <p class="ntc-fade-win-body"></p>
    <div class="ntc-fade-close-wrap">
      <button class="ntc-fade-close" type="button">閉じる</button>
    </div>
  </div>
</div>
CSS
.ntc-fade-list-wrap {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

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

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

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

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

.ntc-fade-item:hover {
  background: #f0f7ff;
}

.ntc-fade-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;
}

.ntc-fade-badge-new {
  background: #ef4444;
}

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

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

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

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

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

.ntc-fade-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;
}

.ntc-fade-mask.is-open {
  opacity: 1;
  pointer-events: auto;
}

.ntc-fade-win {
  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);
}

.ntc-fade-win.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.ntc-fade-win-inner {
  padding: 24px;
}

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

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

.ntc-fade-close-wrap {
  text-align: center;
}

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

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

var mask = document.querySelector('.ntc-fade-mask');
var win = document.querySelector('.ntc-fade-win');
var titleEl = document.querySelector('.ntc-fade-win-title');
var bodyEl = document.querySelector('.ntc-fade-win-body');
var closeBtn = document.querySelector('.ntc-fade-close');

function openNotice(key) {
  var info = noticeMap[key];
  if (!info) return;
  titleEl.textContent = info.heading;
  bodyEl.textContent = info.detail;
  mask.className = 'ntc-fade-mask is-open';
  win.className = 'ntc-fade-win is-open';
}

function closeNotice() {
  mask.className = 'ntc-fade-mask';
  win.className = 'ntc-fade-win';
}

document.querySelectorAll('.ntc-fade-item').forEach(function(item) {
  item.addEventListener('click', function() {
    openNotice(item.getAttribute('data-notice'));
  });
});

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

document.addEventListener('keydown', function(ev) {
  if (ev.key === 'Escape') closeNotice();
});
opacity と pointer-events

display: none では transition が効きません。opacity: 0 と pointer-events: none で「見えない・触れない」状態を作り、is-open で両方を変えてフェードを出します。

transform でスライドアップ

初期の transform を少し下へずらしておき、is-open で中央へ戻すと、下から上へ滑る動きになります。opacity の変化と同時に transition を掛けるのがポイントです。

注意点：デモではパネル内に閉じるため position: absolute を使っています。サイト全体に重ねる本番実装では、コピペ用コードどおり position: fixed にしてください。また、開いている間は背面のスクロールを止めたい場合は、開閉時に body の overflow を切り替える処理を別途追加します。

①と②、どちらを使えばいいですか？

まずは①の display 切り替えで動きを確認し、見た目を滑らかにしたいときに②へ進むのがおすすめです。ロジックはほぼ同じで、CSS の見せ方だけが違います。

お知らせを増やしたいときは？

リストに li を足し、同じキーを data-notice に付け、JS のオブジェクトへ見出しと本文を追加します。キーが一致していればそのまま表示されます。

Esc や背景クリックで閉じられますか？

はい。コピペ用コードでは閉じるボタン・マスククリック・Escape キーの3通りに対応しています。

通常のモーダルとの違いは？

開閉の仕組みは同じです。このページは「リスト項目ごとに中身を差し替える」用途に特化しています。モーダル自体の基本はモーダルウィンドウを参照してください。

関連記事

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

あわせて読みたい
Webデザイン・UIコンポーネント集（HTML/CSS/JS） HTML / CSS / JAVASCRIPT · 随時更新中 WebデザインとUI実装例集 Webサイトやアプリで使われるUIコンポーネント・デザインパターンをまとめました。それぞれのカ…
HTML/CSS/JavaScript
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次