モーダルウィンドウをおしゃれにするCSSスニペット7選。作り方は？実装サンプルまとめ！
スタイリッシュなデザインのモーダルウィンドウ(モーダルダイアログ)のCSSサンプルをまとめました。
デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインは利用者の興味を引き付けます。
サイトの中で詳細情報を表示するのによく利用されるモーダルウィンドウもウェブサイトの重要な部品の１つです。情報の見やすさはもちろん、面白いアニメーションで表示されるモーダルウィンドウは楽しいサイトを作る上で必須ですね。
本記事ではフォームの中でも「モーダルウィンドウ」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
なお、基本的に「モーダルウィンドウ」に焦点を当てて解説しますが、デザインについては「モーダルダイアログ」「ポップアップ」にも応用可能ですので是非参考にしてみてください。
モーダルウィンドウの基本デザイン＋Bootstrap。シンプルでわかりやすいCSSデザイン例。
Bootstrapを利用したモーダルウィンドウ
See the Pen
Bootstrap 4 Modal Demos by SitePoint (@SitePoint)
on CodePen.
モーダルウィンドウを最も簡単に作る方法はBootstrapを利用することです。
Bootstrapだけで簡単にモーダルウィンドウを実装できます。BootstrapのCSSを読み込みさえすれば、あとはhtmlに書くだけでOKです。基本は「data-toggle="modal" data-target="#XXXXX"」と指定し別途モーダルウインドウ部分のhtmlを「id="XXXXX"」指定で用意すれば連動可能です。
Bootstrapはウェブサイトのデザイン骨格として利用されていることが多いので、Bootstrapベースのモーダルはデザインや動きもよく見るものになりますが、手軽さ・手堅さを考えると一番使いやすいと言えます。
JS不使用！Pure CSSのシンプルモーダルウィンドウ
See the Pen
Popup/Modal without JS by Paul (@peiche)
on CodePen.
こちらはBootstrap未使用でシンプルなモーダルウィンドウをhtml+CSSで実現しているサンプルです。
ボタンを押すと、画面上にモーダルウィンドウが表示され、背景画像が変わります。
×ボタンクリックで閉じるパターンと、モーダルウィンドウ外をタップすることで閉じるパターンの2パターンが用意されているのが良いですね。
JavascriptなしCSSのみのシンプルモーダルウィンドウ
See the Pen
Basic CSS-Only Modal by Timothy Long (@timothylong)
on CodePen.
こちらもシンプルなモーダルウィンドウをhtml+CSSで実現しているサンプルです。Javascriptは使っていません。
骨格はシンプルな作りなのですが、少しCSSでデザイン装飾するだけでとても見栄えが良くなりますね。
美麗！スタイリッシュなデザインのモーダルウィンドウCSSサンプル
超カッコいい！ウインドウ表示までのアニメーション動作にこだわったサンプル
See the Pen
Modal Animations by Jesse Couch (@designcouch)
on CodePen.
配色はシンプルですが、ウインドウ表示までのアニメーションの動きが非常にスタイリッシュなデザインサンプルです。
7パターンありますが、どれも非常に実装が作り込まれていますね。カッコいいウェブサイトを作る上で非常に参考になります。デザインにこだわりがある人は是非チェックしてみてください。
配色との融合も優れたモーダルウィンドウ
See the Pen
Modal Animation Physics by Tey Tag (@pix3l)
on CodePen.
動きはシンプルなものに少しだけ動きを加えただけですが、ベース画面の配色とモーダルウィンドウの配色のバランスが絶妙な実装サンプルです。
オレンジ系統の色に統一して、濃淡を使ってデザイン性を高めたモーダル表示のお手本のようです。非常に参考になります。
ギャラリー・ライトボックス型のモーダルウィンドウ
See the Pen
Bootstrap Gallery with Modal and Carousel by Mikhail Niedre (@webcane)
on CodePen.
画像をギャラリー表示したり、Youtube動画をモーダルウィンドウ表示したい場合に参考にできるデザインサンプルです。
モーダルウィンドウ上にカルーセルが設置されており、画像をスライドしながら見れるのが良いですね。
画像の拡大表示を実装する場合などに是非参考にしたい実装サンプルです。
用途ごとのモーダルダイアログが一式揃ったセットサンプル
See the Pen
AngularJS BootStrap 3 Modal Dialogs by Michael E Conroy (@m-e-conroy)
on CodePen.
エラー表示、確認ダイアログ、ウェイト、情報表示など、システム開発でよく使うポップアップやモーダルダイアログが一式揃ったデザインサンプルです。
実際にサイト構築する際には、サイトの基本デザイン・配色、実装する機能等を総合的に考える必要がありますので、一式揃った実装サンプルはアイデアを膨らます上で参考になりますね。
ウェブサイトのフォームをおしゃれにするCSSスニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。
https://kodocode.net/design-css-textbox/
