CSSだけでモーダル（ポップアップ）を作る方法｜JavaScript不要のコピペ実装

Webページでボタンをクリックすると画面中央にふわっと現れる「モーダルウィンドウ」は、お知らせ・確認ダイアログ・画像拡大など多くの場面で使われます。多くのチュートリアルではJavaScriptを使った実装が紹介されますが、実はCSSだけでも十分に動作するモーダルを作ることができます。

この記事ではCSSのみで実現できる主要な2つの方法（:target疑似クラスを使う方法と、チェックボックスハックを使う方法）を詳しく解説します。さらに、HTMLの標準要素である<dialog>を使ったより現代的なアプローチも紹介します。それぞれの仕組み・メリット・デメリットを理解して、プロジェクトに合った方法を選べるようになりましょう。

「JavaScriptを覚えるまではCSSだけでやりたい」「軽量な実装にしたい」「標準仕様に沿ったアクセシブルなモーダルを作りたい」——どのニーズにも対応できる知識を、コピーして使えるコード例とともに丁寧に説明します。

この記事で学べることは次の4点です。

• CSSだけで動くモーダルの2大手法（:target疑似クラス・チェックボックスハック）の仕組みと実装手順
• 背景オーバーレイ・中央寄せ・アニメーションなど見た目を整えるCSSテクニック
• <dialog>要素と最小限のJavaScriptを組み合わせたアクセシブルな第3の選択肢
• モーダルが開かない・閉じないときの原因と対処法

モーダル（ポップアップ）とは？作り方の3つの選択肢

モーダルウィンドウとは、ページの上に重なって表示される小ウィンドウのことです。背景をクリックしたり「閉じる」ボタンを押したりするまで操作できない「集中させる」UIとして、ログインフォーム・確認ダイアログ・お知らせ表示などで幅広く使われています。ポップアップと呼ばれることもありますが、技術的にはモーダルとポップアップは異なるものの、CSSの実装文脈ではほぼ同義として扱われます。

CSSでモーダルを作る主な方法は次の3つです。それぞれにJavaScriptが必要かどうか、難易度、推奨度が異なります。どれを選ぶかはプロジェクトの要件や自分のスキルによって変わります。

:target方式はURLにハッシュが付く（例：page.html#modal）ため、モーダルを開いた状態がブラウザ履歴に残ります。チェックボックスハックはURLが変わらない代わりにHTMLの構造に制約があります。<dialog>要素は現代ブラウザで広くサポートされており、showModal()という1行のJavaScriptで動かせます。

これ以降のセクションで各方法を順番に実装していきます。まずはCSSのみで完結する2つの方法から見ていきましょう。

:target疑似クラスで作るモーダル

:targetはCSSの疑似クラスのひとつで、「URLのハッシュ（#以降の文字列）と一致するidを持つ要素」にスタイルを当てることができます。たとえばURLがpage.html#modal-sampleになったとき、id="modal-sample"の要素が:target状態になります。これを利用して、モーダルを「ハッシュが一致したら表示、それ以外は非表示」と切り替えることができます。

仕組みの概要

HTMLには「モーダルを開くリンク」と「モーダル本体」の2つが必要です。開くリンクのhrefにモーダルのidをハッシュ付きで指定します。ユーザーがリンクをクリックするとURLが変わり、:targetが発動してモーダルが表示されます。閉じるリンクのhrefは#!などのハッシュのない値にすることで、:targetが解除されてモーダルが非表示になります。

HTML

まず開くリンクとモーダル本体を記述します。idとhrefの#以降の文字列が完全に一致していることが重要です。

<!-- モーダルを開くリンク -->
<a href="#modal-sample" class="btn-open">モーダルを開く</a>

<!-- モーダル本体（id が href の # と一致する） -->
<div id="modal-sample" class="modal-overlay">
  <div class="modal-content">
    <h2>モーダルのタイトル</h2>
    <p>ここにコンテンツを書きます。</p>
    <!-- 閉じるリンク（別の ID またはページ外の # を指す） -->
    <a href="#!" class="btn-close">✕ 閉じる</a>
  </div>
</div>

CSS

次にCSSで非表示・表示の切り替えを行います。初期状態はdisplay: noneとし、:targetが付いたときだけdisplay: blockにします。position: fixed; inset: 0で画面全体をオーバーレイし、z-indexで他の要素の上に重ねます。

/* ── モーダルの基本構造（:target を使った表示切り替え） ── */

/* 初期状態：非表示 */
.modal-overlay {
  display: none;
}

/* #modal-sample がターゲットになったとき（URLが #modal-sample になったとき）表示 */
.modal-overlay:target {
  display: block;
  position: fixed;
  inset: 0;                    /* top/right/bottom/left を一括指定 */
  background-color: rgba(0, 0, 0, 0.55);
  z-index: 1000;
}

/* モーダルの中央ボックス */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  width: min(90%, 480px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* 閉じるボタン */
.btn-close {
  display: inline-block;
  margin-top: 1rem;
  color: #555;
  text-decoration: none;
}
.btn-close:hover {
  color: #d16176;
}

:target方式のメリット・デメリット

• メリット：JavaScriptが一切不要。HTMLとCSSだけで完結する。実装が非常にシンプルで理解しやすい。
• デメリット：モーダルを開くとURLのハッシュが変わり、ブラウザの「戻る」ボタンの挙動に影響が出る。ページ内にアンカーリンクが多い場合は競合に注意。

URLの変化が気にならない用途（ランディングページの問い合わせモーダルなど）では:target方式が最もシンプルでおすすめです。URLを変えたくない場合は次のチェックボックスハックを使いましょう。

チェックボックスハックで作るモーダル

チェックボックスハックとは、非表示にした<input type="checkbox">と<label>を組み合わせ、チェックボックスの:checked状態をCSSで検知してスタイルを切り替えるテクニックです。URLが変わらないため、:target方式よりも幅広い場面で使えます。

仕組みの概要

チェックボックスのidと<label>のfor属性を一致させると、ラベルをクリックするだけでチェックボックスのオン・オフが切り替わります。CSSの隣接兄弟結合子（+）を使って「チェックされているときだけモーダルを表示」という指定ができます。閉じるボタンも同じlabelで作ることで、もう一度クリックするとチェックが外れてモーダルが非表示になります。

重要な制約として、チェックボックス（input）とモーダル本体（.modal-overlay）は同じ親要素の直接の子要素である必要があります。隣接兄弟結合子+はDOMの順序に依存するため、HTML構造をきちんと整えることが正常動作の鍵です。

HTML

<!-- ① 非表示のチェックボックス（id が label の for と一致） -->
<input type="checkbox" id="modal-toggle" class="modal-input" />

<!-- ② 開くボタン（label で #modal-toggle を操作） -->
<label for="modal-toggle" class="btn-open">モーダルを開く</label>

<!-- ③ モーダル本体（input の直後の兄弟要素にする） -->
<div class="modal-overlay">
  <div class="modal-content">
    <h2>モーダルのタイトル</h2>
    <p>ここにコンテンツを書きます。</p>
    <!-- 閉じるボタンも label で同じ input を操作 -->
    <label for="modal-toggle" class="btn-close">✕ 閉じる</label>
  </div>
</div>

CSS

.modal-input:checked + .modal-overlayという記法で「チェックされた input の直後の .modal-overlay」を指定します。

/* ── チェックボックスハックによるモーダル切り替え ── */

/* チェックボックス自体は画面に表示しない */
.modal-input {
  display: none;
}

/* 初期状態：モーダル非表示 */
.modal-overlay {
  display: none;
}

/* チェックボックスが :checked のとき、直後の兄弟（.modal-overlay）を表示 */
/* ※ input と .modal-overlay が同じ親の直接の子である必要がある */
.modal-input:checked + .modal-overlay {
  display: block;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
  z-index: 1000;
}

/* モーダルの中央ボックス */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  width: min(90%, 480px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* 開くボタン（label） */
.btn-open {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  background: #d16176;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

/* 閉じるボタン（label） */
.btn-close {
  display: inline-block;
  margin-top: 1rem;
  color: #555;
  cursor: pointer;
}
.btn-close:hover {
  color: #d16176;
}

チェックボックスハックのメリット・デメリット

• メリット：JavaScriptが不要。URLが変化しないので:target方式の弱点を補える。
• デメリット：HTMLの構造（inputとモーダルを隣接させる必要がある）に制約が生まれる。スクリーンリーダーがチェックボックスとして読み上げる可能性があり、アクセシビリティ上は注意が必要。

CSSのみで実装したい、かつURLを変えたくない場合はチェックボックスハックが有効な選択肢です。ただし複数のモーダルを持つページではHTMLが複雑になりやすいため、その場合は<dialog>要素の利用を検討しましょう。

見た目を整える：背景オーバーレイ・中央寄せ・閉じるボタン

開閉の仕組みができたら次は見た目を磨きましょう。モーダルに必要なビジュアル要素は大きく4つ：（1）背景を暗くするオーバーレイ、（2）コンテンツボックスの中央寄せ、（3）角丸や影によるカード感、（4）分かりやすい閉じるボタンです。

中央寄せの仕組み

モーダルコンテンツを画面中央に配置する最もシンプルな方法は、position: absoluteとtransform: translate(-50%, -50%)の組み合わせです。top: 50%; left: 50%でボックスの左上端を画面中央に置いてから、transformで自分のサイズの半分だけ上・左にずらすことで、ボックスの中心が画面中央になります。横幅はwidth: min(90vw, 520px)とすると、小さい画面でも左右に余白が保たれるレスポンシブ対応になります。

CSS（見た目の整え方まとめ）

/* ── モーダルの見た目を整える共通CSS ── */

/* オーバーレイ（背景の暗幕） */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);  /* 半透明の黒 */
  z-index: 1000;
}

/* モーダル本体ボックス */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* 正確な中央寄せ */

  background: #fff;
  border-radius: 12px;               /* 角丸 */
  padding: 2rem 2.5rem;
  width: min(90vw, 520px);           /* レスポンシブ対応 */
  max-height: 85vh;                  /* 縦に長いコンテンツは内部スクロール */
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
}

/* モーダル内の見出し */
.modal-content h2 {
  margin-top: 0;
  font-size: 1.25rem;
  color: #333;
}

/* 閉じるボタン（右上に絶対配置） */
.btn-close-x {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-size: 1.5rem;
  line-height: 1;
  color: #888;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0.25rem;
}
.btn-close-x:hover {
  color: #d16176;  /* ブランドカラーでホバー変化 */
}

/* 開くボタン */
.btn-open {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  background: #d16176;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  border: none;
  font-size: 1rem;
}
.btn-open:hover {
  background: #b84f63;
}

閉じるボタンの配置について

閉じるボタンは.modal-contentにposition: relativeを追加し、ボタンをposition: absolute; top: 0.75rem; right: 1remで右上に固定するのが一般的なデザインです。:target方式では<a href="#!">、チェックボックスハックでは<label for="...">、<dialog>では<button>と、方式によって使うHTML要素が変わる点に注意しましょう。

背景オーバーレイ（暗幕部分）をクリックしたときにモーダルを閉じたい場合は、:target方式なら.modal-overlay全体を閉じるリンクにして.modal-contentのクリックが伝播しないようにするか、後述の<dialog>要素のアプローチを検討しましょう。CSSのみではオーバーレイクリックによるクローズは難易度が高くなります。

transitionでふわっと開閉するアニメーション

display: noneからdisplay: blockへの切り替えはアニメーションできない、ということはCSSを学ぶ上でよく遭遇する壁です。displayプロパティは離散値のため、transitionを設定しても補間が行われません。そのため、フェードイン・フェードアウトを実現するにはopacityとvisibilityを組み合わせる方法が定番です。

opacity と visibility を組み合わせる理由

opacity: 0だけにすると要素は見えなくなりますが、クリックなどのイベントは依然として受け付けてしまいます。そこでvisibility: hiddenも同時に使います。visibilityはtransitionで補間できる（離散的に切り替わる）プロパティなので、opacityのフェードと同期させることで「見えなくなったらクリックも受け付けない」状態を作れます。

また、モーダルコンテンツを少し下からスライドして登場させると、より洗練された印象になります。transform: translate(-50%, -48%)（少し上にずれた位置）→ :target時にtranslate(-50%, -50%)（正位置）へ変化させることでスライドアップのアニメーションを実現します。

CSS（アニメーション込みの完成版）

/* ── opacityとvisibilityを組み合わせたフェードイン・アウト ── */

/* :target 方式の場合（チェックボックスハックは .modal-input:checked + .modal-overlay に読み替える） */

/* 初期状態：透明 + 非インタラクティブ（display:none より柔軟） */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
  z-index: 1000;

  opacity: 0;
  visibility: hidden;  /* クリックなどを受け付けない */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* :target 状態：フェードインで表示 */
.modal-overlay:target {
  opacity: 1;
  visibility: visible;
}

/* モーダルコンテンツも少し下からスライドして登場 */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);  /* 少し上に位置をずらしておく */
  background: #fff;
  border-radius: 12px;
  padding: 2rem 2.5rem;
  width: min(90vw, 520px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);

  transition: transform 0.3s ease;
}

/* :target 時にコンテンツを正位置（中央）に戻す */
.modal-overlay:target .modal-content {
  transform: translate(-50%, -50%);
}

チェックボックスハックへの適用

チェックボックスハックに同じアニメーションを適用する場合は、.modal-overlay:targetを.modal-input:checked + .modal-overlayに、.modal-overlay:target .modal-contentを.modal-input:checked + .modal-overlay .modal-contentに書き換えるだけです。CSSのセレクター部分だけ変えれば、アニメーションの仕組みはまったく同じです。

2024年以降、Chrome・Firefox・Safariの最新版では@starting-styleルールとdisplayプロパティのアニメーションをサポートし始めています（「離散的アニメーション」）。ただし、まだ普及途上のため、現状ではopacity＋visibilityの組み合わせが最も安全な実装です。

HTML標準の<dialog>要素を使う方法

<dialog>はHTMLに標準で用意されたモーダル・ダイアログ用の要素です。Chrome・Firefox・Safari・Edgeの最新版すべてでサポートされており、現在では実務での使用が十分に現実的です。最小限のJavaScript（1行のshowModal()）が必要ですが、アクセシビリティ・ESCキー対応・背景オーバーレイが標準で備わっているため、3つの方法の中で最もおすすめできる選択肢です。

showModal()とshow()の違い

<dialog>を開くメソッドは2つあります。show()はモードレスダイアログとして開き、背景の操作が可能です。showModal()はモーダルとして開き、背景が::backdropでカバーされ、フォーカスがダイアログ内に閉じ込められます。モーダルウィンドウを作る目的では必ずshowModal()を使ってください。

閉じ方：<form method="dialog">

ダイアログを閉じるのに便利なHTMLの仕組みが<form method="dialog">です。このformの中に<button>を置くと、ボタンをクリックしたときにdialog.close()が自動的に呼ばれます。JavaScriptを追加で書かなくても閉じる動作が実現できます。

HTML

<!-- dialog 要素（最初は非表示） -->
<dialog id="my-dialog" class="modal-dialog">
  <h2>モーダルのタイトル</h2>
  <p>ここにコンテンツを書きます。</p>
  <!-- 閉じるボタン（form[method="dialog"]を使うとJSなしで閉じられる） -->
  <form method="dialog">
    <button class="btn-close-dialog">閉じる</button>
  </form>
</dialog>

<!-- 開くボタン -->
<button id="open-dialog" class="btn-open">モーダルを開く</button>

JavaScript（最小限）

const dialog = document.getElementById('my-dialog');
const openBtn = document.getElementById('open-dialog');

// showModal() でモーダルとして開く（::backdrop が有効になる）
openBtn.addEventListener('click', () => {
  dialog.showModal();
});

// ※ 閉じるは <form method="dialog"> が担当するため、追加の JS は不要

CSS

<dialog>にはブラウザのデフォルトスタイル（margin: auto・borderなど）があるためリセットが必要です。::backdrop擬似要素でオーバーレイのスタイルを指定できます。[open]属性セレクタでダイアログが開いているときのスタイルを当てられます。

/* ── dialog 要素のスタイリング ── */

/* dialog のデフォルトスタイルをリセットし、中央配置 */
.modal-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;          /* ブラウザデフォルトの margin を除去 */
  padding: 2rem 2.5rem;
  border: none;       /* デフォルトの枠線を除去 */
  border-radius: 12px;
  width: min(90vw, 520px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);

  /* フェードインアニメーション */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* [open] 属性が付いたとき（showModal()後）に表示 */
.modal-dialog[open] {
  opacity: 1;
}

/* 背景オーバーレイ（::backdrop 擬似要素でネイティブ対応） */
.modal-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);  /* ぼかし効果（任意） */
}

/* 閉じるボタン */
.btn-close-dialog {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1.2rem;
  background: #eee;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
}
.btn-close-dialog:hover {
  background: #d16176;
  color: #fff;
}

ESCキーで閉じる

showModal()で開いた<dialog>はブラウザがESCキーを自動的に処理し、押すとダイアログが閉じます。:target方式やチェックボックスハックにはこの機能がないため、アクセシビリティの観点では<dialog>が圧倒的に優れています。

アクセシビリティと実務上の注意

モーダルは視覚的なUIとして広く使われていますが、スクリーンリーダーや키보드操作のユーザーにとっては扱いにくい要素になりがちです。実務でモーダルを実装する際には、次のアクセシビリティ上の考慮点を踏まえた上で実装方法を選びましょう。

フォーカス管理

モーダルが開いたとき、キーボードのフォーカスはモーダル内の最初のフォーカス可能な要素（ボタンや入力欄）に移動すべきです。<dialog>要素にshowModal()を使った場合はブラウザがこれを自動で行います。:target方式やチェックボックスハックでは自動移動は行われないため、本格的な運用ではJavaScriptでelement.focus()を呼ぶ必要があります。また、モーダルが開いている間はフォーカスがモーダルの外に移らないよう「フォーカストラップ」を実装するのが理想です。

ESCキーとキーボード操作

WCAG（ウェブアクセシビリティ指針）ではモーダルをESCキーで閉じられることを推奨しています。<dialog>のshowModal()はこれを標準で実装しています。他の2方式では別途JavaScriptでキーイベントを監視する実装が必要です。

ARIAの付与

:target方式・チェックボックスハックでは<div>を使うため、スクリーンリーダーがモーダルと認識しません。role="dialog"・aria-modal="true"・aria-labelledby（タイトルのIDを参照）を付与することで、スクリーンリーダーがダイアログとして適切に読み上げます。<dialog>要素はrole="dialog"を暗黙的に持つため、追加不要です。

背景のスクロール抑制

モーダルが開いているとき、背景のページがスクロールしてしまうことがあります。CSSのみではこれを完全に制御することが難しく、JavaScriptでdocument.body.style.overflow = 'hidden'を設定するのが一般的な対処法です。<dialog>のshowModal()はブラウザによっては自動で背景スクロールを抑制しますが、挙動はブラウザ間で差があります。

実務での推奨方針

個人ポートフォリオや学習目的など軽量な実装には:target方式が手軽でおすすめです。しかし、不特定多数のユーザーが使うサービスや、企業のWebサイトなど本格的な運用では<dialog>要素＋最小限のJavaScriptを使うことを強く推奨します。CSSのみで「ゼロJS」を実現することにこだわりすぎると、アクセシビリティ面で多くのユーザーに不便を強いる結果になりかねません。

• 学習・軽量実装 → :target疑似クラス方式
• URLを変えたくない・CSSのみ縛り → チェックボックスハック
• 実務・アクセシビリティ重視 → <dialog> + showModal()

モーダルが開かない・閉じないときの原因と対処

CSSモーダルが思い通りに動かないとき、原因はほぼ決まっています。よくあるトラブルと対処法を一覧でまとめます。

デバッグの基本手順

まずブラウザの開発ツール（F12）でCSSが正しく当たっているか確認しましょう。:target方式なら開発ツールの「要素」タブで:targetを強制的に有効化してスタイルが適用されるか確認できます（Chromeでは要素を右クリック→「Force state」→「:target」）。チェックボックスハックなら:checkedを強制有効化して動作確認できます。

<dialog>方式でJavaScriptエラーが出る場合は、コンソールのエラーメッセージを必ず確認しましょう。Cannot read properties of nullは要素が見つかっていないサインです。getElementByIdで指定したIDと実際のHTMLのIDが一致しているか再確認してください。

それでも解決しない場合は、最小構成（HTMLファイル1枚・スタイルとスクリプトをすべてインラインに書いた状態）で動作を確認すると、外部CSSとの競合や読み込み順の問題を切り分けられます。

よくある質問（FAQ）

CSSだけでモーダルを作るとき、:targetとチェックボックスハックのどちらを選べばよいですか？

URLが変わってもよい場合や実装をとにかくシンプルにしたい場合は:target方式が向いています。URLを変えたくない場合や、ページ内に複数のモーダルを設置したい場合はチェックボックスハックが適しています。ただし、いずれの方式もアクセシビリティには限界があるため、実務ではdialog要素＋showModal()の利用を検討してください。

CSSのモーダルにフェードイン・アウトのアニメーションをつけるにはどうすればよいですか？

display:noneとdisplay:blockの切り替えはtransitionが効きません。代わりにopacityとvisibilityを組み合わせて使います。初期状態をopacity:0・visibility:hiddenにし、開いた状態をopacity:1・visibility:visibleにして、両プロパティにtransitionを設定するのが定番のテクニックです。

JavaScriptなしでCSSポップアップを実装する方法はありますか？

はい、:target疑似クラスを使う方法とチェックボックスハックを使う方法の2つがあります。:target方式はURLのハッシュ(#)を利用して開閉を切り替えます。チェックボックスハックは非表示にしたinput要素の:checked状態をCSSのセレクタで検知して表示・非表示を切り替えます。どちらもJavaScriptは一切不要です。

dialog要素のshowModal()は全ブラウザで動きますか？

2022年以降、Chrome・Firefox・Safari・Edgeの主要ブラウザすべてでサポートされています。Internet Explorerはサポートされていませんが、IE対応が不要な現代のプロジェクトであれば実務での使用は問題ありません。dialog要素はアクセシビリティも優れているため、新規プロジェクトでの採用がおすすめです。

CSSモーダル実装でz-indexが効かないのはなぜですか？

z-indexはposition:static以外(relative・absolute・fixed・sticky)の要素にしか効きません。まずposition:fixedまたはposition:absoluteが設定されているか確認してください。また、親要素にtransform・filter・will-changeなどのプロパティが設定されていると、新しいスタッキングコンテキストが生成され、z-indexの効果が親要素の範囲内に限定されます。モーダルはbodyの直下に配置するのが最も安全です。

関連記事

• 【コピペ可】CSSだけで作るモダンUIパーツ30選｜実装コード全部載せ
• 【2026年版】CSS transitionの使い方｜hoverの動きをなめらかに
• 【2026年版】CSS z-indexの使い方完全ガイド｜重なり順・効かない原因
• ハンバーガーメニューの作り方｜HTML/CSSだけで動く実装をコピペ解説
• details・summaryタグ完全ガイド【2026年版】アクセシブルな開閉

CSS・Webデザイン実装の総まとめ

CSSの実装テクニックを「レイアウト・装飾・アニメーション・基礎・トラブル解決」の目的別に探せる総まとめページを用意しています。実装で迷ったときの索引としてどうぞ。

• 【CSS実装テクニック完全マップ】コピペで使えるWebデザイン実装ガイド総まとめ

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

• 期間：1週間
• 学習内容：
  ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
  → 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！