概要

サムネイルをクリック（スマホ等の場合はタップ）すると画像が大きくなり，大きくなった画像をクリック（タップ）するとサムネイルに戻ります。

サムネイル用の画像ファイルは使用しません。ここで使用した画像ファイルは，すべて長辺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;}
/* サムネイルの幅200px，大きい画像の幅600px */
.img200-600 input {display: none;}
.img200-600 input + img {width: 200px; cursor: pointer;}
.img200-600 input:checked + img {width: 600px;}
/* 右側のテキストを下に回す場合に追加 */
.rt-text {display:flex; flex-wrap:wrap;}
.mr20 {margin-right:20px;}

　display: none;：入力フォームのチェックボックスを表示しないように，これを置きます。

　+：隣接セレクタです。input要素に続く要素，すなわちimg要素にスタイルを適用します。
　チェックボックスにチェックが付いていないときは，画像を幅300px等で表示します。
　cursor: pointer;：マウスをのせたときのカーソルの形を〔リンク用〕にしました。これは任意です。

　input:checked：チェックが付いているときは，画像を幅900px等で表示します。
　注意：input: checkedというように，スペースを入れると無効になります。

サンプルのHTML （画像を拡大するだけの場合）

<p class="img300-900" style="margin-bottom: 25px;">
たくさんの機関車が留置されているJR稲沢駅<br>
写真にはDD51形ディーゼル機関車と，EF64形電気機関車の姿が写っている。<br>
 <label for="p01">
  <input type="checkbox" id="p01">
   <img src="photo01.jpg" alt="たくさんの機関車が留置されているJR稲沢駅">
 </label>
</p>

<p class="img300-900" style="margin-bottom: 25px;">
竹原フェリーターミナル<br>
広島県竹原市と瀬戸内海の大崎上島を結ぶ，竹原⇔白水・竹原⇔垂水などのフェリーが発着する。<br>
 <label for="p02">
  <input type="checkbox" id="p02">
   <img src="photo02.jpg" alt="竹原フェリーターミナル(広島県)">
 </label>
</p>

<p class="img200-600" style="margin-bottom: 25px;">
JR木更津駅前にある逆さ狸「きぬ太くん」<br>
証城寺の<ruby>狸囃子<rt>たぬきばやし</rt></ruby>の発祥の地である木更津は，
街のあちらこちらにたぬきのオブジェがある。<br>
 <label for="p03">
  <input type="checkbox" id="p03">
   <img src="photo03.jpg" alt="JR木更津駅前にある逆さ狸「きぬ太くん」">
 </label>
</p>

サンプルのHTML （右側のテキストを下に回す場合）

<div class="rt-text">
 <p class="img300-900 mr20">
  <label for="p04">
   <input type="checkbox" id="p04">
    <img src="photo01.jpg" alt="たくさんの機関車が留置されているJR稲沢駅">
  </label>
 </p>
 <p style="width:580px;">
たくさんの機関車が留置されているJR稲沢駅<br>
写真にはDD51形ディーゼル機関車と，EF64形電気機関車の姿が写っている。
 </p>
</div>

<div class="rt-text">
 <p class="img300-900 mr20">
  <label for="p05">
   <input type="checkbox" id="p05">
    <img src="photo02.jpg" alt="竹原フェリーターミナル(広島県)">
  </label>
 </p>
 <p style="width:580px;">
竹原フェリーターミナル<br>
広島県竹原市と瀬戸内海の大崎上島を結ぶ，竹原⇔白水・竹原⇔垂水などのフェリーが発着する。
 </p>
</div>

<div class="rt-text">
 <p class="img200-600 mr20">
  <label for="p06">
   <input type="checkbox" id="p06">
    <img src="photo03.jpg" alt="JR木更津駅前にある逆さ狸「きぬ太くん」">
  </label>
 </p>
 <p style="width:580px;">
JR木更津駅前にある逆さ狸「きぬ太くん」<br>
証城寺の<ruby>狸囃子<rt>たぬきばやし</rt></ruby>の発祥の地である木更津は，街のあちらこちらにたぬきのオブジェがある。<br>
 </p>
</div>

　input要素にcheckbox属性を指定して，マウスボタンをクリックするたびに，チェックが付いたりチェックが外れたりする働きを利用しています。
　各画像に名前（ここではp01〜p06）を付けて，forとidで使用します。
　名前は，ページ内で重複しないように付ける必要があります。
　名前は，漢字等も使用できるようですが，半角英数字を用いた方が確実でしょう。
　input要素のタグに続いて，img要素のタグを置く必要があります。間に他のタグが入ると無効になります。