EC用公式アカウント
JSはほぼ不要！最新CSSで「ふわっと浮き出るダイアログ」を作ろう
WEBサイトでよく見る「ボタンを押すと出てくる案内画面（ダイアログ）」。
これまではJavaScriptをたくさん書かないとスムーズに動かせませんでしたが、今は最新のCSSだけで驚くほど簡単に、作れるようになりました。
まずはこちらをご覧ください
HTML：たったこれだけ！
<button id="openBtn">開く</button>
<dialog id="myDialog">
<p>出てきました！</p>
<button id="closeBtn">閉じる</button>
</dialog>CSS：ダイアログが表示される際の動き
/* --- ダイアログ本体 --- */
dialog {
border: none;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
margin: 50px auto;
/* 【閉じている時の姿をデフォルトにする】 */
opacity: 0;
transform: translateY(-100px);
display: none;
/* 【アニメーションの設定】 */
/* transition-behavior: allow-discrete を含めることで「閉じるアニメ」が有効になります */
transition:
opacity 0.5s ease,
transform 0.5s ease,
display 0.5s allow-discrete;
z-index: 10;
}
/* 【表示されている時（open属性がある時）の姿】 */
dialog[open] {
opacity: 1;
transform: translateY(0px);
display: block;
}
/* 【@starting-style で現れる「瞬間」のスタート地点を指定】 */
@starting-style {
dialog[open] {
opacity: 0;
transform: translateY(-100px);
}
}
/* ::backdrop で 背景のアニメーションも追加 */
dialog::backdrop {
background-color: rgba(0, 0, 0, 0);
backdrop-filter: blur(0px);
transition:
background-color 0.5s ease,
backdrop-filter 0.5s ease,
display 0.5s allow-discrete;
opacity: 0;
transition:
opacity .4s ease,
display .6s allow-discrete;
}
/* 開いている時の背景 */
dialog[open]::backdrop {
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
opacity: 1;
}
/* 背景を固定する */
body:has(dialog[open]) {
overflow: hidden;
}JavaScript：開閉の指示のみ
<script>
const d = document.getElementById('myDialog');
document.getElementById('openBtn').onclick = () => d.showModal();
document.getElementById('closeBtn').onclick = () => d.close();
</script>結局何がすごいのか？ポイント
以前は、
- フェードイン
- 背景固定
- backdrop
- 表示・非表示制御
これらをJavaScriptで管理する必要がありました。
でも今は、
- dialog（HTMLだけで「最前面の隠し画面」を作る）
- ::backdrop （ダイアログの後ろの「背景を暗く・ぼかす」）
- @starting-style（現れた瞬間の「アニメーションのスタート地点」を決める）
- allow-discrete（消える瞬間の「アニメーションが終わるまで待機」させる）
を使うことで、CSS主体でモーダル演出が作れます。
JavaScriptは「開け」「閉めろ」と合図を送るだけ。
あとの「どう動くか」「背景をどう止めるか」はすべてCSSにお任せできます。
是非ためしてみてください。
Webデザイナー / コーダーのみなさまへ
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。
