Web制作ネタを中心に、ネット上の様々な情報をゆる~く発信する個人ブログです

KuzLog

ページの先頭へ
トップに戻る
2018年1月21日 Web制作

CSSのみでお洒落なアニメーション付きのモーダルウィンドウを作ってみた

前々から「CSSだけでお洒落なモーダルウィンドウ作れないかな~」と思って色々と試していたんですが、ようやく納得のいく出来の物が完成したので載せておきます。

PureCSS ModalWindow

仕組みは後で解説するとして、とりあえず作ったサンプルを5つ紹介します。

通常パターン

See the Pen PureCSS ModalWindow (Normal) by Kuzlog (@Kuzlog) on CodePen.

上から

See the Pen PureCSS ModalWindow (Top) by Kuzlog (@Kuzlog) on CodePen.

拡大

See the Pen PureCSS ModalWindow (Zoom-1) by Kuzlog (@Kuzlog) on CodePen.

ふんわり

See the Pen PureCSS ModalWindow (Zoom-2) by Kuzlog (@Kuzlog) on CodePen.

拡大+回転

See the Pen PureCSS ModalWindow (Rotate) by Kuzlog (@Kuzlog) on CodePen.

解説

先程紹介した「通常パターン」のソースがこちらです。一通り目を通せば分かr…分からないですねこれ。

HTML

CSS

なんとなく雰囲気だけ掴んでください…仕組みを1から解説出来るほどの気力はないので、重要なポイントだけ解説します。

肝となるのは「:checked」

:checkedというのはCSS3の擬似クラスで、一般的にはチェックされている要素(radioとかcheckbox)のスタイルを変化させる際に使用されます。

こいつと間接セレクタ(E ~ F)、さらにinput要素と紐付けしたlabel要素を無理やり組み合わせれば、チェックされている状態とチェックが外れている状態でスタイルを制御して、隠していた要素をクリックで表示させるという挙動をCSSのみで実装可能になります。

さらに、画面全体を覆うlabel要素をモーダルウィンドウとページ全体の"間のレイヤー"に仕込んでおくことで、画面(モーダルウィンドウ)外をクリックした際の非表示機能を作ることも可能です。

なんでscale(0)で隠してんの?

このコードでは、モーダルウィンドウ及び背面のオーバーレイ部分をtransform: scale(0);で隠しています。普通に考えて、要素を隠すときはdisplay:none;を使いますよね。

ただ、今回はクリックでスタイルを変更するという仕組みのため、displayを使って要素の表示・非表示を切り替えると、どうしてもウィンドウを閉じるときのアニメーションが作れなかったんです…そりゃ一瞬で非表示になりますからね。実際、他の人が作ったPureCSSモーダルウィンドウを見てみると、閉じるときのアニメーションまで実装されているものはほとんどありません。

そんなのやだ!絶対やだ!!って事で、結局scale(0)で強引に隠すことにしました。これならモーダルウィンドウを閉じた際の徐々に背景が明るくなっていくようなエフェクトが簡単に掛けられます。

こんな隠し方をしていいのか分からない上に、全部作った後で「あれ?これanimation使えばdisplay:none;でもいけたんじゃね?」って事に気付いたのは秘密。

注意点

実用する人はいないと思いますが、無理やり作ったのでいくつか注意点があります。

  • モーダルウィンドウ内のコンテンツが多すぎるとスクロールが発生してしまい、最初に表示された領域以下の場所では画面外クリックが効かなくなります
  • scale(0)で無理やり隠しているので、中央あたりを適当にドラッグ→コピーするとモーダルウィンドウ内の内容がクリップボードに入ってしまいます
  • 動作確認はChrome・Firefox・Edge・Android(Chrome)でしか行っていません
  • モバイルに対応させるならメディアクエリを使ってwidthを調整したほうがいいです
  • 実際jQueryとか使ったほうが楽に良いもの作れます

色々と試行錯誤したんですが、スクロール時の画面外クリック対応は最後の最後まで作れませんでした…なんとかならねえのかなこれ。誰か助けてください。

最後に

使う使わないは別として、CSSだけでもここまで作れる!という楽しさが伝われば嬉しいです。PureCSSもっと流行って