JavaScriptを忘れて、CSSだけでモーダルを創造する

# はじめに
Webアプリケーションではユーザーとの対話を効果的に行うため、モーダルウィンドウ（モーダル）がよく利用されます。JavaScriptを駆使して制御するのが一般的ですが、それが必ずしも必要なわけではありません。今回は、JavaScriptを一旦忘れて、CSSのみを使って綺麗なモーダルを作成する方法を紹介します。

ここでは自分なりに考えた方法を紹介しているので、ぜひコメントで他の方法やアイデアを教えてください！

# モーダルを表示する
まず、モーダルの表示をCSSだけで実現します。
基本的にはクリックされた時に状態が切り替わるタグを利用して、表示を制御します。

### checkboxを使う場合
checkboxにチェックが入ったかどうかに応じてモーダルの表示を制御します。
紐づけるlabelは複数配置できるので、表示ボタンと閉じるボタンに利用しています。
<p class="codepen" data-height="273.3203125" data-default-tab="html,result" data-slug-hash="WNBXGVR" data-pen-title="CSSModal_simple_checkbox" data-user="szdqiygj-the-sasster" style="height: 273.3203125px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/szdqiygj-the-sasster/pen/WNBXGVR">
  CSSModal_simple_checkbox</a> by maabow (<a href="https://codepen.io/szdqiygj-the-sasster">@szdqiygj-the-sasster</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### `<details>`タグを利用する場合
折りたたみ要素の表示切り替えをモーダルの表示切り替えに利用しています。
summaryタグのクリックによって状態が切り替わるため、pointer-eventsの制御に少し工夫が必要です。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="oNRomKj" data-pen-title="CSSOnlyModal_details" data-user="szdqiygj-the-sasster" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/szdqiygj-the-sasster/pen/oNRomKj">
  CSSOnlyModal_details</a> by maabow (<a href="https://codepen.io/szdqiygj-the-sasster">@szdqiygj-the-sasster</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### `:target`擬似クラスを使う場合
アンカーで指定された要素に擬似クラス`:target`がつくことを利用して、モーダルの表示を制御しています。
個人的には、今回紹介している表示のやり方の中では一番スマートなやり方だと思います。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="wvbPNNr" data-pen-title="Untitled" data-user="szdqiygj-the-sasster" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/szdqiygj-the-sasster/pen/wvbPNNr">
  Untitled</a> by maabow (<a href="https://codepen.io/szdqiygj-the-sasster">@szdqiygj-the-sasster</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


# アニメーションをつける
多くのサイトではモーダル表示でアニメーションが設定されています。
今回紹介するのはそのうちの一部ですが、これらを組み合わせることで様々なアニメーション表示に応用できます。
### ディゾルブ
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bGyLXjZ" data-pen-title="CSSOnlyModal_dissolve" data-user="szdqiygj-the-sasster" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/szdqiygj-the-sasster/pen/bGyLXjZ">
  CSSOnlyModal_dissolve</a> by maabow (<a href="https://codepen.io/szdqiygj-the-sasster">@szdqiygj-the-sasster</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 拡大
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ZENrgVW" data-pen-title="CSSOnlyModal_expansion" data-user="szdqiygj-the-sasster" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/szdqiygj-the-sasster/pen/ZENrgVW">
  CSSOnlyModal_expansion</a> by maabow (<a href="https://codepen.io/szdqiygj-the-sasster">@szdqiygj-the-sasster</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### フォール
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="wvbjRJp" data-pen-title="CSSOnlyModal_fall" data-user="szdqiygj-the-sasster" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/szdqiygj-the-sasster/pen/wvbjRJp">
  CSSOnlyModal_fall</a> by maabow (<a href="https://codepen.io/szdqiygj-the-sasster">@szdqiygj-the-sasster</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### フリップ(横回転)
横向きに回転させることで、カードが裏返るようなアニメーションを実現しています。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="vYwjvWx" data-pen-title="CSSOnlyModal_rotate" data-user="szdqiygj-the-sasster" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/szdqiygj-the-sasster/pen/vYwjvWx">
  CSSOnlyModal_rotate</a> by maabow (<a href="https://codepen.io/szdqiygj-the-sasster">@szdqiygj-the-sasster</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 背景のスケールダウン
モーダル表示時に背景のコンテンツのスケールを小さくすることで、よりモーダルの要素が強調されます。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="NWVyQJZ" data-pen-title="CSSOnlyModal_scaledown" data-user="szdqiygj-the-sasster" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/szdqiygj-the-sasster/pen/NWVyQJZ">
  CSSOnlyModal_scaledown</a> by maabow (<a href="https://codepen.io/szdqiygj-the-sasster">@szdqiygj-the-sasster</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# おわりに
CSSだけでモーダルの表示とアニメーション効果を通じてリッチなユーザーインターフェースを実現できました。
実際のアプリケーションではデータのやり取りも伴うため、JavaScriptの使用が避けられない場合もあります。その際は、モーダルの表示切り替えをJavaScriptで行うとより効率的かもしれません。
CSSを使ったアニメーション操作はモーダル以外にもよく使われるので、ぜひ参考にしてみてください。