PC版のみの対応です。JSを一切使わずCSSだけでモーダルウィンドウを作ることができました。モダンブラウザ向けなのでブログに組み込んだりできます。ネットに載っている方法は:targetを使った方法です。これだとモーダルウィンドウを表示する度に履歴に追加されるので戻るときにまたウィンドウが表示されてしまいます。その欠点を無くしたのが今回の方法です。rotate(0);}ちょっと長いので分けて説明していきます。labelとinputの関係まず、最も重要な部分の説明です。labelタグはfor属性の値とinputのid属性を同じ値にすることで、両者を関連付けることができます。これでlabelをクリックするとinputのチェックボックスがチェックされます。この仕組みを使ってモーダルウィンドウを作っています。ここで、もう一度htmlソースコードを見てみましょう。1行目のlabelをクリックすると4行目のinputが実行されることは理解できたかと思います。5行目と9行目にもid=”modal”を持ったlabelタグがあります。5行目の方は、モーダルウィンドウ表示時に画面全体が暗くなるレイヤーです。このレイヤーをlabelにすることで、モーダルウィンドウの領域外をクリックしてもモーダルウィンドウが閉じるようにしています。9行目のlabelはモーダルウィンドウ内のCloseボタンです。transitionとz-indexすでにソースを見て、あれっ!?と思っている方もいるかと思います。59行目の.toggle-offを見てみましょう。ease-out;}72行目のtransitionに着目してみてください。z-indexだけ別に指定されていますよね。ease-outを削除してしまうと、モーダルウィンドウを表示するときにちらつきが見えます。いうと、モーダルウィンドウを表示する際、z-indexを-1から1に変化させています。そのため、opacityを変化させる速さより、z-indexを変化させる速さがはやいと、ちらついてしまうのです。これを回避するためにわざと遅延を設けているのです。