【HTML/CSS】HTML+CSSだけでLightboxもどきを作る方法
jQueryどころかJavaScriptすらも使わない、HTML+CSSオンリーで作るLightboxもどきの作り方です。
グループ化はできませんが、小規模だけどギャラリーを設置したい、でもそのためにjQueryを使うのもちょっと……という人向けのやり方です。
基本としてはハンバーガーメニューをHTML+CSSのみで作るやり方の応用で作りました。
縦横関係なく表示でき、レスポンシブにも対応しています。
HTML
基本となるHTMLは以下のとおりです。
<div class="gallery--flex">
<div class="gallery-col">
<input type="checkbox" name="gallery" value="01.jpg" id="gallery-01" class="gallery--check">
<label for="gallery-01" class="gallery--open"><img src="画像01.jpg" alt="キャプション01" loading="lazy" class="gallery__thumb"></label>
<div class="gallery__modal">
<figure class="gallery__item">
<img src="画像01.jpg" loading="lazy" class="full-size">
<figcaption class="gallery__caption">キャプション01</figcaption>
</figure>
</div>
<label class="gallery--close" for="gallery-01"></label>
</div>
<div class="gallery-col">
<input type="checkbox" name="gallery" value="02.jpg" id="gallery-02" class="gallery--check">
<label for="gallery-02" class="gallery--open"><img src="画像02.jpg" alt="キャプション02" loading="lazy" class="gallery__thumb"></label>
<div class="gallery__modal">
<figure class="gallery__item">
<img src="画像02.jpg" loading="lazy" class="full-size">
<figcaption class="gallery__caption">キャプション02</figcaption>
</figure>
</div>
<label class="gallery--close" for="gallery-02"></label>
</div>
</div>Flexboxについての説明は省きますが、checkboxを使用したON/OFFの切り替えによって実装しています。
基本的には下記のコードの繰り返しです。
<input type="checkbox" name="gallery" value="01.jpg" id="gallery-01" class="gallery--check">
<label for="gallery-01" class="gallery--open"><img src="画像01.jpg" alt="キャプション01" loading="lazy" class="gallery__thumb"></label>
<div class="gallery__modal">
<figure class="gallery__item">
<img src="画像01.jpg" loading="lazy" class="full-size">
<figcaption class="gallery__caption">キャプション01</figcaption>
</figure>
</div>
<label class="gallery--close" for="gallery-01"></label>各checkboxのidと .gallery--open、.gallery--close のforは必ず同じにしてください。
サンプルでは画像ごとにgallery-01、gallery-02……と指定しています。
.gallery--open で画像を開き、一番最後の .gallery--close で透明レイヤーを画像の上に全体に重ねる形で画面のどこをクリックしても閉じる、というように作りました。
遅延読み込み用に loading="lazy" も必ず指定します。
CSS
CSSは以下のとおりです。
.gallery--check {
display: none;
}
.gallery--flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
flex-grow: 1;
gap: 1em;
}
.gallery--flex > .gallery-col {
text-align: center;
}
.gallery--close,
.gallery__modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition-property: all;
transition-duration: 0.2s;
transition-delay: 0s;
}
.gallery--check:checked ~ .gallery--close,
.gallery--check:checked ~ .gallery__modal {
visibility: visible;
opacity: 1;
transition-duration: 0.8s;
transition-delay: 0.2s;
}
.gallery--check:checked ~ .gallery__modal {
background: rgba(0, 0, 0, 0.7);
}
.gallery--check:checked ~ .gallery--close {
background: transparent;
cursor: url('./img/cross.svg'), auto;
z-index: 5;
}
.gallery__thumb {
border: 1px solid #dcdddd;
border-radius: 8px;
width: 250px;
height: 180px;
object-fit: cover;
}
.gallery__modal {
background: rgba(0, 0, 0, 0);
}
.gallery__item {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 99vw;
max-height: 100%;
padding: 0.5em;
padding-bottom: 0;
border-radius: 5px;
background: #fff;
}
.gallery__caption {
font-size: 0.75rem;
text-align: center;
margin: 0 auto;
}
.full-size {
max-width: 90vw;
max-height: 90vh;
vertical-align: middle;
}
.gallery--open:hover {
position: relative;
top: 0.2em;
left: 0.2em;
}.gallery--check で各checkboxを非表示にしています。
.gallery--close 、.gallery__modal はcheckboxがオフのときは visibility: hidden; opacity: 0; で非表示にし、:checked で visibility: visible; opacity: 1; になります。
.gallery--close,
.gallery__modal {
visibility: hidden;
opacity: 0;
}
.gallery--check:checked ~ .gallery--close,
.gallery--check:checked ~ .gallery__modal {
visibility: visible;
opacity: 1;
}
.gallery__modal が背景レイヤーで、.gallery--close が前述の透明レイヤーです。
.gallery--check:checked ~ .gallery--close は必ず最前面に来るように設定します。
サイト全体の構造にもよりますが、心配な方はz-indexをより大きな数値にすれば大丈夫なはずです。ナビゲーションバーを最前面に来るように設定している方は、z-indexの競合に注意してください。
.gallery__item は画像の位置を指定します。
.gallery__item {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 99vw;
max-height: 100%;
padding: 0.5em;
padding-bottom: 0;
border-radius: 5px;
background: #fff;
}top: 50%; left: 50%; transform: translate(-50%, -50%); で画像を上下左右中央に持ってきます。
また、paddingで余白を作ってフレームとして見せていますが、キャプションも記載できるように作ったため、padding-bottomは上書きで相殺しました。
.gallery__caption がキャプション用のclass。
.full-size で画像のサイズを指定しています。
.gallery__thumb でサムネイルのサイズを指定していますが、今回はサンプルとして元の画像をそのままCSSで切り抜いて表示するようにしてありますが、普通にサムネイル用の画像を用意しても大丈夫です。
モーダルウィンドウがHTML+CSSのみで作れるならギャラリーも作れるよね、という謎精神で作りました。
自サイトにて実装済みです。
コメント