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

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

この記事の目次

ライトボックス

CSSだけでLight Box

CSSだけでLight Box

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

あーたむ

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

とっつぁん

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

みーたむ

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

あーたむ

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

みーたむ

みーたむすみません…

とっつぁん

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

とりあえずデモ↓

DEMO

あーたむ

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

とっつぁん

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

実装方法

html

<ul>
	<li><a href="#lb01">サムネイルやテキスト</a></li>
	<li><a href="#lb02">サムネイルやテキスト</a></li>
	<li><a href="#lb03">サムネイルやテキスト</a></li>
</ul>

<!-- ▽▽拡大時の内容▽▽ -->
<div id="lb_content">

<div id="lb01">
<a href="#" class="close_overlay">×</a>
	<div class="lb_wrapper">
		<figure><img src="画像url" class="rs_img" /></figure>
		<p>テキストテキスト</p>
		<p class="lb_prev"><a href="#lb03">&#8810</a></p>
		<p class="lb_next"><a href="#lb02">&#8811</a></p>
		<p class="right"><a href="#"><img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="▶" src="https://s.w.org/images/core/emoji/2.2.1/svg/25b6.svg"> CLOSE</a></p>
	</div>
</div>

<div id="lb02">
<a href="#" class="close_overlay">×</a>
	<div class="lb_wrapper">
		<div class="rs_frame">iframeの埋め込みとか</div>
		<p>テキストテキスト</p>
		<p class="lb_prev"><a href="#lb01">&#8810</a></p>
		<p class="lb_next"><a href="#lb03">&#8811</a></p>
		<p class="right"><a href="#"><img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="▶" src="https://s.w.org/images/core/emoji/2.2.1/svg/25b6.svg"> CLOSE</a></p>
	</div>
</div>

<div id="lb03">
<a href="#" class="close_overlay">×</a>
	<div class="lb_wrapper">
		<figure><img src="画像url" class="rs_img" /></figure>
		<p>テキストテキストテキスト</p>
		<p class="lb_prev"><a href="#lb02">&#8810</a></p>
		<p class="lb_next"><a href="#lb01">&#8811</a></p>
		<p class="right"><a href="#"><img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="▶" src="https://s.w.org/images/core/emoji/2.2.1/svg/25b6.svg"> CLOSE</a></p>
	</div>
</div>

</div>
<!-- ▲▲拡大時の内容▲▲ -->
みーたむ

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

css

.rs_img {/* 画像レスポンシブ対応 */
	max-width :100%;
	max-height :100%;
}

.rs_frame {/* iframeレスポンシブ対応 */
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
 
.rs_frame iframe,
.rs_frame object,
.rs_frame embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
}

#lb01,#lb02,#lb03 {/* htmlのidと合わせてここも編集 */
	position: absolute;
	top: 0;
	left: 0;
	right : 0;
	bottom : 0;	
	display: none;
}

.close_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	text-indent: -9999px;
	background: #000;
	opacity: 0.5;
	z-index: 1;
}

.lb_wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right : 0;
	bottom : 0;
	margin: 5%;
	max-width: 100%;
	max-height: 100%;
	display: block;
	background: #fff;
	z-index: 2;
	overflow :auto;
}

.lb_wrapper figure {/* 画像の包含ブロック */
	text-align :center;
	padding :1em;
	width :100%;
	height :80%;
}

@media screen and (max-width: 840px) {
.lb_wrapper figure {/* 画像の高さによっては編集する必要あり */
	height :60%;
}
}

.lb_prev {
	display :table;
	position :absolute;
	top :0;
	left :0;
	font-size :150%;
	text-align :center;
	width :5%;
	height :100%;
}

.lb_next {
	display :table;
	position :absolute;
	top :0;
	right :0;
	font-size :150%;
	text-align :center;
	width :5%;
	height :100%;
}

.lb_prev a, .lb_next a {
	display :table-cell;
	vertical-align :middle;
}

@-webkit-keyframes fadein {
	0% {opacity:0;display:block;}
	100% {opacity:1;}
}

div#lb_content div:target {
	-webkit-animation-name: fadein; 
  	-webkit-animation-duration: 1s;
  	-webkit-animation-iteration-count: 1;
	opacity: 1;
	display:block;
}
あーたむ

あーたむな…長い…

みーたむ

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

とっつぁん

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

備考

みーたむ

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

とっつぁん

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

みーたむ

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

とっつぁん

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

みーたむ

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

とっつぁん

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

みーたむ

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