モーダルウィンドウ
モーダルウィンドウ
モーダルウィンドウは、背景を暗くして前面のコンテンツに注意を集中させるUIです。デモでは「ページを開いた瞬間に出す」「動画を出す」「クリックで出す」という3つのきっかけを扱っており、告知・動画再生・画像拡大など用途は多彩です。
モーダルの本質は「他の操作を一時的に止めてでも見せたいものがある」という強い割り込みです。強力なぶん、乱用すると最も嫌われるUIにもなる――その匙加減まで含めて学びどころの多い部品です。
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
おさえておきたいところ
「モーダルウィンドウ」を使う目的はこんな感じです。 目的：メインコンテンツと関連性のある詳細情報を表示。ユーザーの注意を引いたり入力させる。 動きのきっかけ：画面の読み込み後 / クリック
ページを開くと、背景が暗くなりテキストを表示
ページを開くと、背景が暗くなり動画を表示
リンクをクリックすると、背景が暗くなり動画や画像やテキストを表示
実務メモ（2026年追記）
いま実装するなら<dialog>要素とshowModal()が決定版です。フォーカスの閉じ込め・ESCで閉じる・背景（backdrop）が標準装備され、かつてJSで数十行書いていた処理がほぼ不要になりました。一方、設計面では「ページを開いた瞬間の自動モーダル」は離脱要因になりやすく、Googleも過度なインタースティシャルを評価上問題視するため、本当に必要な確認・告知だけに絞るのが現在の常識です。
- 閉じる経路は「×ボタン・ESC・背景クリック」の3つを揃える
- 閉じたら、開く前にフォーカスがあった要素へ戻す
- 動画モーダルは閉じたときに再生を確実に停止する
- 補足を軽く出すだけならツールチップで足りることも多い
次回の予定
様々な動きのパターンを集めたCSSライブラリ「Animate.css」と 要素が画面に入ったら動く「jquery.inview」というJavaScriptライブラリを組み合わせて スクロールで手軽に要素を動かす方法に挑戦してみます ＼＼\٩( ‘ω’ )و //／／
