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

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

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

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

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

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

お願いします!

 

ポップアップ表示とは

ポップアップとは、和訳で突然現れるや、飛び出すように現れるという意味です。この通り、ユーザーがボタンをクリックすると、隠れていたコンテンツが中央に現れる実装方法の一種です。

 

HTMLに記述する内容

ポップアップを実装するには、HTMLに表示させたいコンテンツと、ボタン要素を記述します。ポイントはinput要素のcheckboxを使用することです。この事でcheckboxがcheckされたときのアクションをCSSで制御することができます。

<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>

 

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

CSSに記述する内容

ポップアップを実装するには、CSSにボタンの装飾と、表示させたいコンテンツのレイアウト・位置を記述します。ポイントはcheckboxがcheckされたときにポップアップが表示される制御を記述することです。

/*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;
}

 

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

ここでは、サンプルを作成しましたので、動作を確認してみましょう。
checkboxとpopupブロックの位置関係に注意しましょう。CSSでinput[type=”checkbox”]:checked + #popupと指定しているので、HTMLはcheckbox要素の次にpopupブロックを記述します。

 

See the Pen
css popup
by This is standard (@koutafunahashi)
on CodePen.

 

監修してくれたメンター

舟橋幸太郎

フリーのWebデザイナー、グロースハッカーです。

KaizenPlatform社主催のGrowth Hacker Awardsで受賞歴があります。過去行ったA/Bテストが実績として書籍に掲載されました。

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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