【CSSサンプル】CSSで作るフォトギャラリー
どうも！LSSです！！
JavaScriptを使わず、CSSだけで動作するフォトギャラリーを作ってみました。
CSSで作るフォトギャラリー
小さい画像をクリックすると中央に大きく表示されます。
中央に表示されている画像よりも前の画像は左列に、後の画像は右列に並べられます。
コード
<style>
.cglry{
display:grid; /*gridレイアウト*/
grid-template:repeat(8,1fr)/1fr 6fr 1fr; /*縦8行に分割／横1:6:1の比で3列に分割*/
gap:5px; /*各グリッドの間に5pxの隙間*/
}
.cglry input{display:none;} /*ラジオボタン非表示*/
.cglry label{grid-column:1/2;} /*左列に配置*/
.cglry input:checked~label{grid-column:3/4;} /*右列に配置*/
.cglry input:checked+label{grid-column:2/3;grid-row:1/9;} /*中央に配置*/
</style>
<div class="cglry">
<input id="cglry0" checked="checked" name="cglryn" type="radio" />
<label for="cglry0"><img src="画像ファイルのURL" /></label>
<input id="cglry1" name="cglryn" type="radio" />
<label for="cglry1"><img src="画像ファイルのURL" /></label>
<input id="cglry2" name="cglryn" type="radio" />
<label for="cglry2"><img src="画像ファイルのURL" /></label>
<input id="cglry3" name="cglryn" type="radio" />
<label for="cglry3"><img src="画像ファイルのURL" /></label>
<input id="cglry4" name="cglryn" type="radio" />
<label for="cglry4"><img src="画像ファイルのURL" /></label>
<input id="cglry5" name="cglryn" type="radio" />
<label for="cglry5"><img src="画像ファイルのURL" /></label>
<input id="cglry6" name="cglryn" type="radio" />
<label for="cglry6"><img src="画像ファイルのURL" /></label>
<input id="cglry7" name="cglryn" type="radio" />
<label for="cglry7"><img src="画像ファイルのURL" /></label>
<input id="cglry8" name="cglryn" type="radio" />
<label for="cglry8"><img src="画像ファイルのURL" /></label>
</div>
使い方
上記コードをコピペして、「画像ファイルのURL」を表示させたい画像ファイルのURLに変更するだけで使用できます。
サンプルでは９枚の画像を扱っていますが、数を減らしたい場合、
<input id="任意のID" name="cglryn" type="radio" />
<label for="任意のID"><img src="画像ファイルのURL" /></label>
の２行が１つの画像を表示するためのセットですので、この２行単位で削除する事で数を減らす事ができます。
また、増やしたい場合も、この２行をセットで９つ並んでいるものと同様に追加し、「任意のID」に半角英数字でIDをつける事で増やす事ができます。
また、その場合は、コードの最初の方にある、
grid-template:repeat(8,1fr)/1fr 6fr 1fr;
の8を、「写真枚数-1」より大きい数にしておいてください。
あとがき
今回のサンプルは、
の「ラジオボタンの前と後で色を変える」動作を「色を変える→gridレイアウト内の配置位置を変える」に変更したものです。
（右列に入る小さい画像、本当は上詰めにしたかったのですが…どうもそれが出来ずにこういう形になりました^^;）
.cglry label{grid-column:1/2;} /*左列に配置*/
.cglry input:checked~label{grid-column:3/4;} /*右列に配置*/
.cglry input:checked+label{grid-column:2/3;grid-row:1/9;} /*中央に配置*/
の部分がその指定で、「1/2」や「3/4」とあるのは、「横３列に分割した４本の境界線（両端含む）の１本目と２本目の間の領域」「〃３本目と４本目の間の領域」を指します。
（最後のgrid-row:1/9は縦8分割した境界線の１本目～９本目までブチ抜いた領域）
CSSは「後から書いたほうが優先される」ので、
.cglry label{grid-column:1/2;} /*左列に配置*/
で全ての写真が左列に入る指定、次に
.cglry input:checked~label{grid-column:3/4;} /*右列に配置*/
チェック中のラジオボタンより後ろの写真は全て右列に配置しなおす指定、
.cglry input:checked+label{grid-column:2/3;grid-row:1/9;} /*中央に配置*/
チェック中のラジオボタンの直後の写真のみ、中央に配置しなおす指定、という３段階の指定をかける事で、３列に分けて配置しています。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
