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

初心者向けにHTMLとCSSだけでポップアップ表示を作成する方法について解説しています。特定の条件の際に、通知などの目的で最前面に表示される要素のことをポップアップといいます。HTMLとCSSでポップアップを実装する基本の書き方を学習しましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

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

 

 

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

ポップアップ表示とは

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

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

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

HTMLとCSSだけでポップアップ表示を作成する方法について詳しく説明していくね!

大石ゆかり

お願いします!

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がcheckされたとき(クリックされたとき)のアクションを、CSSで制御することができます。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

CSSに記述する内容

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

CSSに記述する内容は、

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

の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がcheckの状態になったらpopupを表示させる*/
input[type="checkbox"]:checked + #popup{
  display:block;
}

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

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

 

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テストが実績として書籍に掲載されました。

TechAcademyではWebデザインコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。