HTMLとCSSだけでポップアップ表示を作成する方法を現役デザイナーが解説【初心者向け】

HTMLとCSSだけでポップアップ表示を作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

目次

• ポップアップ表示とは
• HTMLに記述する内容
• CSSに記述する内容
• HTMLとCSSだけでポップアップ表示を作ってみよう
• まとめ

 

ポップアップ表示とは

ポップアップとは、和訳で「突然現れる」や「飛び出すように現れる」という意味です。

実際のWebサイトでは、ユーザーがボタンをクリックすると隠れていたコンテンツが中央に現れる動作を『ポップアップ表示』と呼びます。

 

[PR] Webデザインで副業する学習方法を動画で公開中

HTMLに記述する内容

ポップアップを実装するため、まずはHTMLに下記を記述します。

1. 表示させたいコンテンツ
2. ボタン要素

<label>
  <span>popupを表示</span>
  <input type="checkbox" name="checkbox">
<div id="popup"><img src="https://assets.techacademy.jp/public/logo.png" alt="TechAcademy" /></div>
</label>

ポイントはinput要素のcheckboxを使用することです。

この事でcheckboxがチェックされたとき（クリックされたとき）のアクションを、CSSで制御することができます。

 

CSSに記述する内容

つづいて、CSSに内容を記述します。

CSSに記述する内容は、以下の2点です。

1. ボタンの装飾
2. 表示させたいコンテンツのレイアウト・位置

 

以下が実際のコードとなります。

/*popup表示させたいコンテンツのレイアウトと位置*/
#popup{
  width:30%;
  line-height:100px;
  background:#000;
  padding:0 4%;
  box-sizing:border-box;
  display:none;
  position:fixed;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
img{
  width:100%;
}
label{
  display:block;
}
/*ボタンの装飾*/
label span{
  display:block;
  background-color:#01b6ed;
  color:#fff;
  width:200px;
  line-height:40px;
  border-radius:4px;
  text-align:center;
}
label span:hover{
  cursor:pointer;
}
input[type="checkbox"]{
  display:none;
}
/*checkboxがチェックの状態になったらpopupを表示させる*/
input[type="checkbox"]:checked + #popup{
  display:block;
}

ポイントはコード内の『/*checkboxがチェックの状態になったらpopupを表示させる*/』部分です。

この記述によって、checkboxがチェックされたとき（クリックされたとき）にだけ、ポップアップが表示されるようになります。

 

HTMLとCSSだけでポップアップ表示を作ってみよう

ここでは、サンプルを作成しましたので、動作を確認してみましょう。

checkboxとpopupブロックの位置関係に注意してみてください。

<input type=”checkbox””>と<div id=”popup”>同士が隣り合っています。

理由は、CSSで隣接セレクタを使用しているためです。

HTMLでcheckbox要素の隣にpopupブロックを記述することで、CSSのinput[type=”checkbox”]:checked + #popupの指定が適応されます。

隣接セレクタに関して詳しく知りたい方は、 CSSの隣接・直下・間接セレクタの違いの記事を参考にしましょう。

 

まとめ

いかがでしょうか？

ここではHTMLとCSSだけでポップアップ表示を作成する手順を、checkboxを利用する方法でご紹介しました。

今回の記事が気にいったら、ぜひHTMLとCSSだけでフェードイン、フェードアウトのアニメーションの記事もお読みください。

 

執筆してくれたメンター

舟橋幸太郎（ふなはしこうたろう） フリーのWebデザイナー、グロースハッカーです。 KaizenPlatform社主催のGrowth Hacker Awardsで受賞歴があります。過去行ったA/Bテストが実績として書籍に掲載されました。 テックアカデミーではWebデザインコースを担当しています。

 

 

HTML/CSSを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTML/CSSを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！