基本のポップアップを作る方法【HTML/CSS・サンプルコード付き】

ポップアップ

基本のポップアップを作る方法

基本のポップアップを作る方法を紹介します。このサンプルでは、HTMLとCSSだけを使い、ページを開くと画面中央に表示されるシンプルなポップアップを作成します。JavaScriptを使用しないため、基本的なレイアウトやデザインを手軽に確認できます。

ポップアップは、重要なお知らせやキャンペーン情報、メンテナンス案内など、ユーザーに最初に見てもらいたい内容を目立たせるためによく利用されます。ページの内容を見る前に伝えたい情報を表示したい場合に便利です。

このサンプルでは、タイトル、説明文、ボタンを配置したシンプルなポップアップを実装しています。背景色や角丸、余白、文字サイズ、ボタンの色などはCSSから自由に変更できるため、さまざまなデザインのベースとして利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

!

お知らせ

ページを開くと最初に表示される基本的なポップアップです。
お知らせやキャンペーン情報などを表示する場合に利用できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>基本のポップアップ</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- ポップアップ表示エリア -->
  <div class="basic-popup_wrap">

    <!-- ポップアップ本体 -->
    <div class="basic-popup_box">

      <!-- アイコン -->
      <div class="basic-popup_icon">
        !
      </div>

      <!-- タイトル -->
      <h1 class="basic-popup_title">
        お知らせ
      </h1>

      <!-- 説明文 -->
      <p class="basic-popup_text">
        ページを開くと最初に表示される基本的なポップアップです。<br>
        お知らせやキャンペーン情報などを表示する場合に利用できます。
      </p>

    </div>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTMLとCSSの2ファイルで構成されています。index.html にポップアップの構造を記述し、style.css でレイアウトや色、余白などのデザインを設定しています。JavaScriptを使用せず、ページを開いたときに表示された状態の基本的なポップアップを確認できます。 

sample/
├── index.html
└── style.css

sample フォルダ内へ各ファイルを配置し、sample/index.html をブラウザで開くと動作を確認できます。タイトルや説明文は index.html、背景色や文字色、角丸、余白、横幅などのデザインは style.css で変更できます。style.css の width: 360px; を変更するとポップアップの横幅が変わり、padding: 28px; を変更すると内側の余白が広く・狭くなります。

コメント