サムネイル見本用の小さい画像をクリックすると画像が大きくなり，大きくなった画像をクリックするとサムネイルに戻る部品（テクニック）を紹介します。HTMLとCSSだけを使用した方法ですが，動作は安定していて，コードの記述も簡単です。
もくじ
概要
長所と短所
サンプル
概要
長所と短所
サンプル
概要
小さい画像をクリックすると画像が大きくなり，大きくなった画像をクリックすると小さい画像に戻ります。この機能は，基本的に，モバイル機器では使用しません。
小さい画像用の画像ファイルは使用しません。ここで使用した画像ファイルは長辺1200ピクセル，短辺800ピクセルです。小さい画像は長辺300ピクセル，大きい画像は長辺900ピクセルで表示させています。
入力フォームで使用する〔input要素 type属性="checkbox"〕は，クリックするごとにチェックが付いたりチェックが外れたりします。その特性と，チェックが付いていることを判別する〔checkd擬似クラス特定の状態にあるときにスタイルを適用します。〕を利用しました。
長所と短所 （△：長所 ▽：短所）
△クリックすると拡大し，またクリックすると元に戻るので，わかりやすくて操作が楽です。
△大きい画像を表示したとき，それ以下のコンテンツが隠れません。
△複数の大きい画像を表示させておくことができます。
△サムネイル用の画像を準備する必要がありません。
△CSSもHTMLも簡単で，少ない量で記述できます。
▽ページ内の全画像が最初に読み込まれるので，特に画像サイズが大きい場合は通信量が多くなり，ページの表示が遅くなります。
サンプル
JR稲沢駅にはたくさんの機関車が留置されています。写真にはDD51形ディーゼル機関車とEF64形電気機関車の姿があります。
竹原フェリーターミナルには，竹原市と瀬戸内海の大崎上島を結ぶ竹原⇔白水・竹原⇔垂水などのフェリーが発着します。
証城寺の狸囃子の発祥の地である木更津は，街のあちらこちらにたぬきのオブジェがあります。写真はJR木更津駅前にある，逆さ狸「きぬ太くん」です。
使用した主なCSS
基本的なことにしぼってあります。
/* サムネイルの幅300px，大きい画像の幅900px */
.img300-900 input {display: none;}
.img300-900 input + img {width: 300px; cursor: pointer;}
.img300-900 input:checked + img {width: 900px;}
【解説】
display: none;：入力フォームのチェックボックスを表示しないように，これを置きます。
+：隣接セレクタです。input要素に続く要素，すなわちimg要素にスタイルを適用します。
チェックボックスにチェックが付いていないときは，画像を幅300px等で表示します。
cursor: pointer;：マウスをのせたときのカーソルの形を〔リンク用〕にしました。これは任意です。
input:checked：チェックが付いているときは，画像を幅900px等で表示します。
注意：input: checkedというように，スペースを入れると無効になります。
使用した主なHTML
JR稲沢駅にはたくさんの機関車が留置されています。写真にはDD51形ディーゼル機関車とEF64形電気機関車の姿があります。 <p class="img300-900"> <label for="p01"> <input type="checkbox" id="p01"> <img src="photo01.jpg" alt="たくさんの機関車が留置されているJR稲沢駅"> </label> </p>
【解説】
input要素にcheckbox属性を指定して，マウスボタンをクリックするたびに，チェックが付いたりチェックが外れたりする働きを利用しています。
各画像に名前（ここではp01〜p03）を付けて，forとidで使用します。
名前は，ページ内で重複しないように付ける必要があります。
名前は，漢字等も使用できるようですが，半角英数字を用いた方が確実でしょう。
input要素のタグに続いて，img要素のタグを置く必要があります。間に他のタグが入ると無効になります。