cssで作るイメージギャラリー

HTML/CSS

htmlとcssしか自由に編集できない環境でLightBox風のイメージギャラリーを作りたい。となったとき、これまでは :target疑似クラスを使用していたのですが、input type=”radio”を使えばURLを汚すことなくギャラリー制作できると知ったのでサンプルとメモを残しておきます。

ギャラリーに限らずスライドにも応用できると思います。

なお、最初に申し上げておくと面倒くさい作業なので、javascript jQueryのありがたみを感じることができます。

スポンサーリンク

動作サンプル

See the Pen Image Gallery without jQuery by Takashi Abe (@TakeshiAbe) on CodePen.

radioボタンをnameでグループ化しておき、選択されたボタンに連動してギャラリーの入れ替えるシンプルなものです。

display属性で出し入れしようとすると上手く動作しなかったので、left: -9999px → left:0; で切り替えています。

:targetクラスとの違い

モーダルなどに使用できる :targetクラスですが、URLにid値がセットされてしまうという難点がありました。

:targetのデモボタン

デモボタンが押されました

とじる

なので、ブラウザの戻る機能で前ページに戻ろうとすると、素直に前のページに戻れないという弱点がありました。

その点、今回のイメージギャラリーはradioボタンで切り替えているだけでURLは一切変更されません。

おとなしくcolorboxなり自作jsに頼るのがベストですが、どうしてもcssしか使えないときにお使いください。

ミフネWEB
タイトルとURLをコピーしました