CSSで作るモーダルウィンドウ 5選
モーダルウィンドウがcssで簡単に作れる！
WEBサイトを運営していく中で、ユーザーにお知らせや告知をする方法としてモーダルウィンドウをよく使います。
ページ内のコンテンツよりもより目立たせるためにポップアップさせる実装がよく使われています。
ちょっと前まではJavaScriptを使ったものが多かったのですが、今回はHTMLとCSSだけを使ってモーダルウィンドウを作成してみました。
その中でも今回は擬似クラス:targetを使った実装になるので、初心者の方にも使いやすいと思います。
コードも短く、アレンジも可能なので私も仕事でよく使っています。
では一緒に見ていきましょう♪
よく読まれている記事
シンプルなモーダルウィンドウ
パッと表示されるシンプルなモーダルウィンドウです。
アンカーで指定した要素に擬似クラス:targetをつけることで、モーダルを表示させています。
コードも少なくシンプルなので、簡単にウィンドウを表示させたい時に使える実装です。
See the Pen
モーダルウィンドウ by loa (@hana4525)
on CodePen.
ふわっとモーダルウィンドウ
ふわっと徐々に表示させれるようなモーダルウィンドウです。
今回は0.5秒で表示されるように設定していますが、transitionで速度を変えるここも可能です。
閉じるボタンを日本語にしたり、×のアイコンをつけると視覚的によりわかりやすくなります。
See the Pen
モーダルウィンドウ by loa (@hana4525)
on CodePen.
拡大するモーダルウィンドウ
中央から徐々に拡大されるようなモーダルウィンドウです。
scaleを使うことで、複雑そうなアニメーションを作ることができます。
モーダルではあまり見かけない動きなので、見た目にこだわりたい方におすすめです。
閉じるボタンは×のアイコンのみを使うことで、すっきりとした見た目になります。
See the Pen
モーダルウィンドウ by loa (@hana4525)
on CodePen.
上から降りるモーダルウィンドウ
上からスマートに降りてくるようなモーダルウィンドウです。
こちらもよく見かけるアニメーションで、どんなサイトにも活用できる万能な実装です。
translateの方向を変えると、下や左右からも表示させることができます。
モーダル内に閉じるアイコンを入れない場合は、枠外に出して色を反転させると視認性が良くなります。
See the Pen
モーダルウィンドウ by loa (@hana4525)
on CodePen.
横回転するモーダルウィンドウ
横にくるっと回転するようなモーダルウィンドウです。
スライダーなどでは見かけますが、モーダルウィンドウではとても珍しいアニメーションですね。
軽快な動きは明るいイメージがあるので、若い世代をターゲットにしたサイトに合いそうですね。
閉じるアイコンに丸い背景を敷くことで、ボタンであることも強調できスッキリとしたデザインになります。
See the Pen
モーダルウィンドウ by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
今回はCSSのみで作ることができるモーダルウィンドウをご紹介しました。
CSSだけでも十分なアニメーションを実現することが可能だということがわかっていただけたと思います。
もちろんJavaScriptを使うことでもっと複雑な動きを作ることもできますが、私的にはこれだけの機能があれば実務でも十分に事足りると思いました。
CSSの機能がどんどん向上しているので、アニメーションの可能性もかなり広がってきたように感じますね。
複雑な動き以外のものはできるだけCSSで実装できるようになったら嬉しいですね。
JavaScriptを使ったモーダルウィンドウも作成する予定なので、そちらもぜひチェックして比較してみてください。
最後までご覧いただきありがとうございました☆彡