【レスポンシブ対応】コピペでできるHTMLとCSSでポップアップであるモーダルウィンドウの作り方

どうもおぎ(@atk420t)です。

先日、ポートフォリオサイトを制作しているときに「トップページにコンパクトに多くの情報を詰め込みたい!」と考え、ポップアップモーダルウィンドウを導入してみました。

ただ、導入にあたって一度も触れたことのなかった”jQuery”に抵抗があったためにhtmlとcssで作ろうと考え作ってみたので今回は「HTMLとCSSでポップアップモーダルウィンドウの作り方」をご紹介したいと思います。

モーダルウィンドウデモ

実装デモページこちらが、今回紹介するポップアップモーダルウィンドウを実装しているデモページ(ポートフォリオ)になります。

モーダルウィンドウの作り方

まず、基礎となるコードがかきになります。

HTML
<div class="modalwindow">
 <input type="radio" name="popupmodal" id="pop01" />
 <label for="pop01" class="popopen">OPEN</label>
 <input type="radio" name="popupmodal" id="pop02" />
 <label for="pop02">CLOSE</label>
 <input type="radio" name="popupmodal" id="pop03" />
 <label for="pop03">×</label>
 <div class="modal2">
  <div class="modal3">
   <h2 class="modalTitle">モーダルウィンドウタイトル</h2>
   <div class="modalbody">
    <br>
      <p>コンテンツ</p>
    <br>
   </div>
  </div>
 </div>
</div>

CSS
.modalwindow > input { 
    display: none;
}
.modalwindow > input:nth-child(1) + label { 
    cursor: pointer;
}
.modal2 { 
    display: none;
}

.modalwindow > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modal2 {
    display: block;
    z-index: 998;
    position: fixed;
    width: 90%;
    height: 80%;
    border-radius: 20px;
    left: 50%;
    top: 50%;
    margin-top: 30px;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background: #fff;
    padding: 10px 20px;
    overflow: hidden;
}
@media (min-width: 768px) {
.modalwindow > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modal2{
         width: 600px;
         height: 600px;
         padding: 30px;

    }
.modalwindow > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
     left: 50% !important;
     top: 50% !important;
     margin-left: 270px !important;
     margin-top: -310px !important;
}
}

.modalwindow > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modal2 > div {/* */
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    display: inline-block;
    width: 100%;
    height: 100%;
}
.modalwindow > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modal2 > div > iframe {
    width: 100%;
      height:100%;
      border:none;
      display:block;
}

.modalwindow > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modal2 > div > img {
max-width: 100%;
}
.modalwindow > input:nth-child(1) + label ~ label {
    display: none;

}
.modalwindow > input:nth-child(1):checked + label + input:nth-child(3) + label {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.70);
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 997;
    text-indent: -999999px;
    overflow: hidden;
}
.modalwindow > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    position: fixed;
    left: 10px;
    bottom: 20px;
    z-index: 999;
    width: 44pt;
    height: 44pt;
    font-size: 40px;
    border-radius: 50%;
    line-height: 44pt;
    text-align: center;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
}

.modalwindow > input:nth-child(1) + label + input:nth-child(3):checked + label + input:nth-child(5) + label + .modal2,
.modalwindow > input:nth-child(1) + label + input:nth-child(3) + label + input:nth-child(5):checked + label + .modal2 { 
    display: none;
}


.modal2 {
    animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.modalwindow .modalTitle {
     padding-bottom: .5em;
     margin: .5em 0;
     border-bottom:
     1px solid #ccc;
     font-weight: bold;
}
.modalwindow .modalbody {
     color:#222;
     text-align: left;
     font-size: 14px;
     line-height: 1.8em;
}

.popupopen{
  display: block;
  position: relative;
  text-decoration: none;
  height:120px;
  width: 120px;
  line-height: 120px;
  text-align: center;
  color: #fff;
  border: solid 1px #fff;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
}
.popopen:after{
  content:"";
  position: absolute;
  top: -100%;
  left: -100%;
  background : #fff;
  opacity: 0;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
  z-index: -1;
}
.popopen:hover{
  color: #5ba7ff;
}
.popopen:hover:after{
  top: 0;
  left: 0;
  height:120px;
  width: 120px;
  border-radius: 50%;
  opacity: 1;
}

コードの簡易解説

赤文字 – モーダルウィンドウの背景部分
ピンク – 閉じる部分のボタン
橙文字 – 開く部分のボタン

色指定は16進数のカラーコードやRGBで指定するのではなく、RGBAで指定することによって透明度も一度に指定することが可能なのでオススメです。
例)rgba(0, 0, 0, 0.)

複数モーダルウィンドウを実装する際の注意点

二つ目以降のモーダルウィンドウを実装する際は上記のコードを再度コピペした後に上記の部分を書き換える必要性があります。書き換えにあたって、各色の部分は統一しなくてはなりません。統一しないと、いくらボタンを配置しても開かれるモーダルウィンドウが全て等しいなどの不具合を引き起こす可能性があります。

モーダルウィンドウを実装するメリット

モーダルウィンドウを実装するにあたって、そのメリットは多岐に渡ると思います。例えば

  • ウェブサイトをコンパクトに出来る
  • 任意で情報を閲覧することが出来る
  • コンバージョン率を向上させられる
  • 直帰率に大きな影響を与えない

僕が実装したモーダルウィンドウを理由

Webサイトを作る上で多くの情報を詰め込もうとすると、特にレスポンシブデザインに注目した際に多くの情報を見るには下にどんどんスクロールしていく必要がどうしても出てきてしまいます。

その為に目次やハンバーガーメニューというのが役に立ってくる訳なのですが、目次にいちいち移動する手間やハンバーガーメニューを用いてページを再読込する手間を省ける策が”ポップアップモーダルウィンドウ”になってきます。

Webページをフルスクリーン(スクロール出来ない状態)にした上でモーダルウィンドウを埋め込む事によってスクロールなしにワンクリックで様々な情報を閲覧することも可能なのです。

モーダルウィンドウを実装するにあたって気を付けたいこと

容易に実装が可能ですが、実装するにあたって周りのデザインやレイアウトにも充分な気を払う必要があります。

押してもらえるボタンを作る

モーダルウィンドウを実装するということは、開くためのボタンを押してもらう必要性が出てきます。

ボタンの上下左右いずれに『ここを押してね』なんて書けば押してもらえるかもしれませんが、デザイン性に欠けてしまうことは明らかでしょう。

そこで『ボタンと分かるボタン』をデザインする必要があります。

これらをクリアする為に、ボタンの形、ウェブサイト全体の配色やレイアウトを考慮しましょう。

配色の参考になるサイト

https://colorhunt.co

ボタンデザインの参考になるサイト

https://saruwakakun.com/html-css/reference/buttons

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です