レベルF株式会社

JQueryを使わずにCSSのみで画像ポップアップを実装してみました。
レベルF株式会社のブログとなります。
業務についてから社員のつぶやきまで日々更新してまいります。
HOME >レベルFのブログ > cssテクニック・jQuery > JQueryを使わずにCSSのみで画像ポップアップを実装してみました。

JQueryを使わずにCSSのみで画像ポップアップを実装してみました。

ホームページ制作で、画像のポップアップはもはや定番デザインのひとつです。
多くはJQueryを利用したり、ワードプレスで制作しているホームページの場合はプラグインです。
が、ここではcssのみのポップアップの紹介です。

ホームページを制作していく上で、コーディングと呼ばれるサイト構築の分野は軽視されがち。
しかしコーディングにこだわるからこそ、後々の管理や修正が楽になり、内部SEOにも効果を発揮してきます。

で、基本的にはコーディングでわからない部分があれば、
Googleで調べれば何かしら解決策がHitする

しかし、いくら探しても出てこない場合、持っている知識を駆使して自分で生み出す力が必要になります。
そんなお話です。

CSSのみで画像のポップアップに挑戦してみる

まず大前提、無理やりCSSのみでポップアップする機会はほとんどないはずです。
多くはJqueryのLightbox(公式サイト:http://lokeshdhakar.com/projects/lightbox2/
や、Fancybox(公式サイト:http://fancybox.net/)を利用するはずです。

特にLightboxはもともとオプションが用意されており、便利ですので私もよく利用しますね。

JQueryLightboxは便利

ワードプレスの場合でもインストールするだけで画像をポップアップしてくれるプラグインもいくつもあります。

最近ですとギャラリー機能付のプラグインも多く、
ギャラリーが簡単に作れてなおかつ画像ポップアップもできるので重宝させていただいております。

それでも、「CSSのみで画像ポップアップをしたい!」という方は上記の方法を知っている上で何かしらの理由があるとのことでしょう。

私もそのうちの一人です。

JQueryが使えない環境。純粋なHTMLのフルスクラッチ制作でポップアップをする必要がありました。
そこで、無理やりいじって使ったのがこの手段です。

環境依存など、あまりチェックしていないので、くれぐれも自己責任で。。。
また、注意としてスムーズスクロール(ゆっくりページスクロールするような設定)など、アンカータグに対して何か設定している場合、うまく動作しないこともありますのでご注意ください。

まずは完成系をご確認ください。

簡単CSSのみでイメージポップアップのソースコードなど。

HTML記述

css記述

簡単CSSのみでイメージポップアップの補足

今回はポップアップ後のイメージサイズを600pxにしておりますが、
このサイズを変更する場合、「.popup-window .popup-close:after」内の
margin-leftを調整してあげて「×(クローズボタン)」の位置も変更してあげてください。
もちろんcssをいじることにより、背景画像の透過度やカラーを変更することも可能です。

ただ、この実装を試みようとされる方は少なからずcssに知識がある方だと思われますので、
ご自由にいじってみてくださいませ。

ギャラリーのように次の画像へ移動できたりするところまではできませんが、それでも<a>タグ内の#●●と<section>内のIDを合わせてあげれば、同一ページ内で複数のポップアップを設置することは可能です。

また、今回画像のポップアップをしておりますが、
<img src=”…” alt=”” />の部分にテキストなどのコンテンツを入れてモーダルウィンドウのようにすることも可能です。
というよりそちらの方が実用性は高いかもしれませんね。

余談にはなりますが、ウェブ制作者にとって調べ物をしている最中の飯テロ画像ほど辛いものはありませんね。


Pick Up

Blog Category

Newest Blog

Blog Ranking

まだデータがありません。

お客様の期待値以上の成果物をお届けいたします。

レベルF株式会社は、ホームページ制作・運営コンサルティング会社を中心業務とし
都内、新宿・渋谷・池袋を中心に多くの企業様のお手伝いをしております。
ホームページのみにこだわらず名刺やパンフレットなどそれぞれ理想のお付き合いをさせていただくべく、
幅広いご提案をさせていただき、貢献させていただいております。
どんな些細な事でもお気軽にお問い合わせくださいませ。