CSSだけで実装！画像をクリックしてポップアップ表示する方法

• Twitter
• facebook
• Google+
• LINE

こんにちは。ビータイズのWeb職人まいたけです。

今回は、なんとCSSだけで簡単にポップアップを表示する方法をご紹介します。
JavascriptやCSSのプラグインも不要なので、環境を選ばずサクサク利用できます。

少しだけ難易度が高いですが、いつもの通りサンプルコードをコピペで試してみて、慣れたらカスタマイズしていきましょう。
※ブラウザや端末によってはうまく動かない場合もありますので、実装環境の確認・実機テストを必ずしてください。

 

※本ページの内容は、html及びCSSの基本を理解していることを前提に掲載しています。

それぞれ基本知識をまとめた記事もありますので、ホームページ作成やhtml、CSSにあまり詳しくない方、学び始めたばかりの方はこちらも参考にしてみてください。

ポップアップとは？　まずはデモを見てみよう

今回はまず、解説よりもどんな感じか先にお見せします。
下記にデモが表示されているかと思いますので、下の画像（みずどり）をクリックしてみてください。

サンプルコード：

これです！　ホームページを見ているとよく見かけるのではないでしょうか。
文字で説明すると、「ボタン（またはテキスト）をクリックすると周りがうっすら暗くなって別のウィンドウが開く（正確には開いたように見える）仕組み」でしょうか。こちらをCSSだけで実装します。
 

この仕組みは「ポップアップ」とか「モーダル」と言われたりしますが、ホームページに限って言えば基本的にはこの仕組み※を指しています。このとき開いた画面のことを、「ポップアップウインドウ」「モーダルウインドウ」のように、「〜〜ウインドウ」と言います。
※この記事では「ポップアップ」として説明します。
 

厳密には「ポップアップ」「モーダル」などそれぞれの名前ごとに役割・意味がちがうので、併せてご紹介します。

ポップアップ・モーダル・ダイアログの違い

まずは下の画像をごらんください。「ダイアログ（ボックス）」のサンプルです。
 

ご覧の通り、パソコンやスマートフォンを使っているとよく見かけますよね。ダイアログは、情報の表示・確認・警告・入力など、何かユーザに動きや選択をしてもらったり、確認してほしい内容があるときに表示されます。ホームページのモーダルと呼ばれる機能はこの一種で、次のようなものです。
 

モーダルウインドウが表示されると、ユーザはその他の操作ができません。
これとは逆に、ダイアログが表示されていても他の操作ができるものもあります。この場合は「モーダル」ではなく「モードレス」と呼ぶようです。まいたけは初めて知りました。
あまり耳慣れない感じがしますが、サンプルのようなダイアログは見たことがあると思います。
 

最後に「ポップアップ」ですが、これは何かを押したときに動作するウインドウの開き方のことなので、機能の名前とはちょっと異なります。
Webの界隈では、耳慣れないカタカナ用語やみんながなんとなく使っている用語の意味が実は違った！ということがよくありますので、わからないものは振り返って調べてみるのも面白いですよ。

サンプルコードの解説

それでは改めてサンプルコードを。
今回は、CSSの「擬似クラス」を使用してポップアップを表現します。

デモとサンプルコード：

※上部の「HTML」「CSS」をクリックするとコードがそれぞれ表示されます。

 

<input type=”checkbox” id=”popup-on”>

今回はinputタグを使って、ポップアップしたいウインドウの制御をCSSで行っています。CSSで非表示にしているので実際の動きはみえませんが、実はinput (checkbox)でチェックをするとポップアップウインドウが表示され、チェックが外れると非表示になる、という仕組みになっています。
 

擬似クラス

CSSの疑似クラスでは、上の画像の通り「要素の特定の状態」をCSSで指定できます。「:checked」であれば「チェックされた状態」、リンクにマウスカーソルを当てたときなどに色を変えたりする指定の「:hover」、「:after」「:before」、「:nth-child」などなど、使いこなすことでCSSでできることの幅が一段と広がります。
 

#popup-on:checked + .popup

上記で説明した「擬似クラス」を使います。「#popup-on:checked + .popup」と記載すると、「#popup-on」が「:checked」の状態のときの「.popup」を指定することができますので、「display: block;」を設定します。

まとめ

以上で今回はおしまいです。今回はCSSをシンプルにしたかったので、ウインドウを開くときのアニメーションなどはつけていませんが、ふわっと表示したり、動きをつけたりといったこともCSSだけで追加できます。
 
また、ポップアップを開く際、画像でなくても「ポップアップを開く」といったボタンやテキストでも使用できますし、ポップアップウインドウの中身にも画像やボタンなど好きな内容を入れることができますので、まずは基本の形をサンプルコードでお試しいただき、慣れたら自由にカスタマイズして使ってみてくださいね。

書いた人：

大人気！まいたけのホームページ作成関連記事はこちら：

• Twitter
• facebook
• Google+
• LINE