【CSS】htmlとcssでモーダルを作成する方法。（擬似要素と擬似クラスの活用）

擬似要素と擬似クラスを使うとモーダルを簡単に作成することができる。

擬似要素の::after, ::before,擬似クラスの:targetを使う。

（参考）擬似要素と擬似クラスとは？

ソースコード

<ahref="#modal">モーダルを表示</a><divid="modal"><divclass="message-wrapper"><ahref="#"class="close"></a><divclass="message-box">モーダルです。<br>元の画面に戻るには閉じるアイコンか、<br>枠の外をクリックしてください<br></div></div></div>

/*1. デオフォルト非表示にする*/#modal{display:none;}/*2. 内部リンククリックで適用する*/#modal:target{width:100%;height:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;}/*3. メッセージBOX（テキスト部）*/#modal.message-box{position:relative;background-color:gold;padding:20px;height:80px;cursor:default;}/*4. 閉じる領域のためのアンカー*/#modal.close{position:relative;display:block;}/*5. 枠外の閉じる領域*/#modal.close::before{content:"";background:rgba(0,0,0,0.6);width:100%;height:100%;position:fixed;top:0;left:0;cursor:default;}/*6. 閉じるボタン*/#modal.close::after{content:"x";color:white;position:absolute;right:-1rem;top:-1rem;width:2rem;height:2rem;z-index:1;border-radius:50%;background-color:black;display:flex;justify-content:center;align-items:center;cursor:pointer;}

解説

1. デオフォルト非表示にする

/*1. デオフォルト非表示にする*/#modal{display:none;}

id="modal"を非表示にしている。

2. 内部リンククリックでcssを適用する

/*2. 内部リンククリックで適用する*/#modal:target{width:100%;height:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;}

・:target
この擬似クラスを使うと、内部リンクをトリガーとして、リンク先の要素にcssを適用することができる。

なお、:targetの適用をオフにする（初期状態に戻す）には、ページトップへの内部リンクをクリックする。

・ページトップへの内部リンク：<a href="#">

▼処理の流れ

<ahref="#modal">モーダルを表示</a>

(1)上記リンクで、id="modal"の要素に飛ぶ
　↓
(2)cssの#modal:targetが発火

ちなみに、:targetを仕掛ける対象は同一タグ内のクラス属性でも発火する。

例:<div id="modal" class="hide">としてcsshide:target{処理}でも発火する。

　↓
(3)ページトップへの内部リンク：<a href="#">クリックで:targetのcssが外れる。

・画面いっぱいに表示

width: 100%;
height: 100%;

ただし、このままでは上のdiv要素の下に現在の画面と同じ大きさの要素が生成され、画面全体が下にズレるので以下プロパティを加える。

・absoluteで要素の位置を固定

  position: absolute;
  top: 0;
  left: 0;

absoluteのみだと、当初の位置のままなので、topとleftで場所を指定する。

親要素にrelative、fixed、absoluteがない場合はbodyタグ（ここでは画面）が基準となる。

これで、元ある要素の上に被せて画面いっぱいに表示することができる。

・中身の要素の位置を整える

  display: flex;
  justify-content: center;
  align-items: center;

柔軟なレイアウト指定ができるflexboxを指定する（flex）これで、justify-contentとalign-itemsプロパティが使えるようになる。

justify-content: center;はflexの中の要素を横方向の中央に設置する。

align-items: centerはflexの中の要素を縦方向の中央に配置する。

以上で、flexの中身を画面中央に配置完了。

▼子要素の横幅
親要素にflexを適用すると、子要素の幅は指定がない場合、子要素が内部に持っている幅に自動で調整される。

flexでない場合、block要素は画面横幅いっぱい（100%）となる。

3. メッセージBOX（テキスト部）

/*3. メッセージBOX（テキスト部）*/#modal.message-box{position:relative;background-color:gold;padding:20px;height:80px;cursor:default;}

メッセージ部分のレイアウトを調整。

・position: relative;
これがないと、兄弟要素の閉じるボタン（aタグ）にpositionを適用した際にaタグ要素よりも裏側に回ってしまう。

positionを設定することで記述の順番通り、こちらがaタグよりも上側に表示される。

<ahref="#"class="close"></a><divclass="message-box">モーダルです。<br>元の画面に戻るには閉じるアイコンか、<br>枠の外をクリックしてください<br></div>

・cursor: default;
矢印マークのポインタが表示される。（環境設定を変更している場合はデフォルトで設定しているもの）

これがないと、テキストの上を通過するときに、テキスト入力アイコンになる。

4. モーダルを閉じる領域のためのアンカー

/*4. 閉じる領域のためのアンカー*/#modal.close{display:block;position:relative;}

閉じるアクションとして、(1)閉じるボタンを::afterで(2)閉じる領域::beforeで設定する。

上記処理で、閉じるアクションとなるaタグのデフォルト位置を指定している。

・display: block;
aタグはデフォルトinline要素で、兄弟要素のdivの前方に配置されてしまう。

div要素の上に表示させるためblockに変更。

・position: relative;
親要素をposition: relative;とすることで、子要素を親要素の位置を基準にして動かすことができるようになる。

5. 枠外の閉じる領域

/*5. 枠外の閉じる領域*/#modal.close::before{content:"";background:rgba(0,0,0,0.6);width:100%;height:100%;position:fixed;top:0;left:0;cursor:default;}

擬似要素::beforeでaタグ(class="close")の前方に閉じる領域を作成している。

・content: "";
::beforeで使うプロパティ。今回はテキストや画像を挿入しないので空であることを明示しておく。

・background: rgba(0, 0, 0, 0.6);
背景色。４つ目のパラメータで透明度を指定している。

opacity:
透過なし 1 ⇄ 0 完全透過

・画面全体を覆う
この要素が画面全体を覆うようにする。

 width: 100%;
 height: 100%;

これだけでは要素の領域が確保されていないため変化がない。fixedで画面基準として領域を指定する。

・position: fixed;
windowを基準点とする。位置を指定しない場合は現在位置をが基点のままとなる。

現在位置を基点とし、windowと同じサイズの半透明の黒枠が表示されるようになる。

・位置の指定

  top: 0;
  left: 0;

黒枠の設置位置を画面左上に固定する。これで画面全体を覆った黒枠が表示完了。

・cursor: default;
ポインタをデフォルトの矢印にする。
これがないと、aタグの延長要素なので指マークのポインタになってしまう。

6. 閉じるボタン

/*6. 閉じるボタン*/#modal.close::after{content:"x";color:white;border-radius:50%;background-color:black;position:absolute;right:-1rem;top:-1rem;width:2rem;height:2rem;z-index:1;display:flex;justify-content:center;align-items:center;cursor:pointer;}

::afterを使ってaタグの後ろに閉じるボタンを設置する。

・ボタンの作成

  content: "x";
  color: white;
  border-radius: 50%;
  background-color: black;
  width: 2rem;
  height: 2rem;

擬似要素::afterはcontentプロパティを指定することで、そのテキスト（や画像）を表示できる。

文字色、枠線、背景色を定義。大きさをremで定義。

・rem
サイズの単位の一つ。htmlのデフォルトのフォントサイズを１として、大きさを倍数で指定している。

・ボタンの中身の位置調整
文字を中央に寄せるため、flexのjustify-content: center;とalign-items: center;を使う。

  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

・ボタンの位置を指定
ボタンをメッセージボックスの右上に配置する。

  position: absolute;
  right: -1rem;
  top: -1rem;

親要素のaタグがrelativeなので、absoluteとすることで、aタグの位置を基点に場所を指定できる。

aタグはdispaly:blockでblock要素にしている。幅を指定しない場合、親要素の100%の幅となる。

親の親要素がflexになっているため、親要素の幅は兄弟要素のメッセージボックスの幅と同じになっている。

aタグは現在高さを持っていないので、メッセージボックスの右上からマイナス方向に-1remを指定したことになる。

・cursor: pointer;
aタグは通常でもポインタになるが念のためあえて指定。

以上。

（参考）mozilla :target