jqueryを使わないcssだけで実装するライトボックス

2017年3月17日
とっつぁん とっつぁん
css WEBデザイン
この記事は 13 分くらいで読めると思います
CSSだけでLight Box
CSSだけでLight Box

この記事の目次

ライトボックス

CSSだけでLight Box

CSSだけでLight Box

今回はhtmlとcssだけでライトボックスを作ってみました。
javascriptを使いたくなーい!という人は試してみてもいいかもしれません。

あーたむ

あーたむライトボックスって?

とっつぁん

とっつぁん(そこから!?)
画像とかクリックしたら画面全体にニュニュっと拡大するやつだよ

みーたむ

みーたむモーダルウィンドウと言ったほうが分かりやすいかもしれませんね

あーたむ

あーたむよりいっそ分からん!

みーたむ

みーたむすみません…

とっつぁん

とっつぁんと…とりあえずデモを用意しました。

とりあえずデモ↓

DEMO

あーたむ

あーたむふむふむ、ニュニュッと大きくなるやつだね!

とっつぁん

とっつぁんひとまずワタクシのAndroidクソブラウザでも動作確認しました(笑)

実装方法

html

みーたむ

みーたむidの「lb01,lb02,lb03」をハッシュリンクとして使用しています。
要素の数が増えればこのidの数も増やす必要があります。

css

あーたむ

あーたむな…長い…

みーたむ

みーたむjquery入れるのを考えると大差ないと思いますけど…

とっつぁん

とっつぁん.rs_imgと.rs_frameは画像とiframeのレスポンシブ用なので、既に似たような設定をしている人には不要です。

備考

みーたむ

みーたむわざわざjqueryを使わなくてもcssだけで出来てしまいますが、デメリットはあるんでしょうか?

とっつぁん

とっつぁん単純に画像を並べて拡大表示するギャラリーで良い場合は
少しコンテンツを追加する時が面倒だね

みーたむ

みーたむなるほど、確かにその場合はjqueryなら画像にクラス名付けるだけでライトボックスができてしまいますからね。

とっつぁん

とっつぁんちなみに良く使うライブラリで便利なのはMagnific-Popupだよ。
cssだけじゃ何ともならなかったらこれを調べてみると幸せになれるかもね。
Magnific Popup
Magnific Popup配布サイト

みーたむ

みーたむなるほど、最後は他力本願ですね…

とっつぁん

とっつぁんワタクシのインチキcssより頼りになる…

みーたむ

みーたむまぁそれはそうですね…