コピペで完結！モーダルウインドウ#06【画面下からスライドイン】

html/css/js
2025.10.07

画面下からスライドインするモーダル

今回はスマホアプリでよく見る「ボトムシート型」のモーダルです。
下からスライドインして表示され、オーバーレイをクリックまたは Esc キーで閉じられます。
フォーカス制御も含めて、コピペでそのまま使える実装です。

コードについて 本記事のコードは AI（ChatGPT）による生成をベースに作成・調整しています。ご利用の環境でテストの上ご使用ください。
免責 本コードの利用に伴う不具合・損害について、当サイトは責任を負いません。自己責任にてご利用ください。

デモ

コードをコピーして使おう！

/* =========================================
   モーダル #06（画面下からスライドイン）CSS
   ========================================= */

/* ▼▼ 開くトリガーボタンのスタイル（属性セレクタで限定） ▼▼
   - data-modal-open="#modal06" を持つボタンだけ対象にする
   - 他のボタンへは影響しない
   - ここでデザインを与えることで「モーダルを開く」ボタンが整う */
button[data-modal-open="#modal06"]{
  appearance:none;                 /* ブラウザの既定装飾をリセット（環境差をなくす） */
  padding:10px 14px;               /* クリックしやすい余白 */
  border:1px solid #e5e7eb;        /* 薄いグレーの境界線 */
  border-radius:10px;              /* 角を丸めて柔らかい印象に */
  background:#0b6bff;              /* 鮮やかなブルーを背景色に設定 */
  color:#fff;                      /* テキストを白にしてコントラストを確保 */
  font-size:14px;                  /* 適切な文字サイズ */
  cursor:pointer;                  /* ホバー時にポインタ表示 */
}
/* フォーカス可視化（キーボード操作時のアクセシビリティ対応） */
button[data-modal-open="#modal06"]:focus-visible{
  outline:2px solid #0b6bff;       /* 濃い青のフォーカスリングを表示 */
  outline-offset:2px;              /* 枠線とボタン間に余白を確保 */
}
/* ▲▲ ボタンスタイルここまで ▲▲ */

/* モーダル全体（オーバーレイ含む）
   - 画面全体に固定
   - 初期は非表示
   - JSで .is-open を付けると表示される */
#modal06{
  position:fixed;        /* ビューポート全体に固定配置 */
  inset:0;               /* top/right/bottom/left をすべて0に */
  z-index:100;           /* 他要素より前面に配置 */
  display:none;          /* 初期状態は非表示 */
}
/* 表示状態（is-open が付与されたときだけ表示） */
#modal06.is-open{display:block;}

/* 背景オーバーレイ
   - 黒に近い半透明で背景を覆う
   - クリックすると閉じる動作に対応 */
#modal06 .modal-backdrop{
  position:absolute; inset:0;       /* 全面を覆う */
  background:rgba(15,23,42,.45);    /* 濃いグレーの半透明 */
  border:none;                      /* button既定の枠線を消去 */
  cursor:pointer;                   /* マウスカーソルをポインタに */
  opacity:0;                        /* 初期は透明 */
  transition:opacity .25s ease;     /* 表示時にふわっとフェードイン */
}

/* モーダルパネル本体（ボトムシート型）
   - 画面下に固定
   - 最大幅960pxで中央寄せ
   - 丸みを上部につける
   - 下からスライドインして現れる */
#modal06 .modal-panel{
  position:absolute;
  left:0; right:0; bottom:0;        /* 下辺に固定し、横幅全体を取る */
  max-width:960px;                  /* 記事本文と同じ最大幅 */
  margin-left:auto; margin-right:auto; /* 横方向中央寄せ */
  background:#fff;                  /* 背景は白 */
  border-radius:16px 16px 0 0;      /* 上側だけ角丸 */
  box-shadow:0 10px 30px rgba(0,0,0,.18); /* 上に浮いたような影 */
  transform:translateY(100%);       /* 初期は画面外（下）に隠す */
  transition:transform .3s cubic-bezier(.22,.84,.37,1); /* アニメーションでスライド */
  overflow:hidden;                  /* 内側が角丸からはみ出さないように */
}

/* 開いたときの状態
   - オーバーレイを不透明に
   - パネルを画面内にスライドイン */
#modal06.is-open .modal-backdrop{opacity:1;}
#modal06.is-open .modal-panel{transform:translateY(0);}

/* ヘッダー部分（タイトルと閉じるボタン）
   - タイトルを左、閉じるボタンを右に配置
   - 下に境界線を引く */
#modal06 .modal-head{
  display:flex;                     /* 横並びに */
  align-items:center;               /* 垂直方向中央揃え */
  justify-content:space-between;    /* 両端に配置 */
  padding:12px 16px;                /* 上下12px 左右16pxの余白 */
  border-bottom:1px solid #e5e7eb;  /* 下線を薄いグレーで */
  background:#fff;                  /* 背景は白 */
}
#modal06 .modal-title{
  margin:0;                         /* デフォルト余白をリセット */
  font-size:16px;                   /* タイトルサイズ */
  color:#0f172a;                    /* 濃いグレー文字色 */
}
#modal06 .modal-close{
  appearance:none;                  /* ボタンのデフォルト装飾をリセット */
  border:1px solid #e5e7eb;         /* 枠線は薄いグレー */
  background:#fff;                  /* 背景は白 */
  padding:6px 10px;                 /* 内側余白 */
  font-size:12px;                   /* 小さめの文字 */
  border-radius:10px;               /* 角丸 */
  cursor:pointer;                   /* マウスカーソルをポインタに */
}

/* 本文部分
   - 適度な余白
   - 読みやすい行間 */
#modal06 .modal-body{
  padding:16px;                     /* 内側余白を確保 */
  font-size:14px;                   /* 標準的な文字サイズ */
  line-height:1.8;                  /* 行間を広めに */
  color:#334155;                    /* やや薄めの文字色 */
}
/* 本文内の段落ごとの余白 */
#modal06 .modal-body p{margin:0 0 10px;}

コメント