画像クリックで拡大⇔縮小

HTMLとCSSで作ったHTMLの部品

Webデザイン失敗の巻
　大きなリンクボタン［HTMLの部品］は，メニューページに戻るための苦肉の策でした。［新ページ］ボタンを押すと新しいページに移ります。　新ページ
HOME 情報トップ 「情報・デジタルの部屋」のトップページに戻ります。 HTML部品 古い部屋 2000年ごろに作った「情報とコンピュータの部屋」です。
最終更新：2019-09-23 ▼ スタート：2019-06-21
概要
・サムネイルをクリック（スマホ等の場合はタップ）すると画像が大きくなり，大きくなった画像をクリック（タップ）するとサムネイルに戻ります。
・サムネイル用の画像ファイルは使用しません。ここで使用した画像ファイルは，すべて長辺1200ピクセル，短辺800ピクセルです。サムネイルは長辺300ピクセル，大きい画像は長辺900ピクセルで表示させています。
・入力フォームで使用する〔input要素 type属性="checkbox"〕は，クリックするごとにチェックが付いたりチェックが外れたりします。その特性と，チェックが付いていることを判別する〔checkd擬似クラス〕を利用しました。
長所と短所 （△：長所　▽：短所）
△クリックすると拡大し，またクリックすると元に戻るので，わかりやすくて操作が楽です。
△大きい画像を表示したとき，それ以下のコンテンツが隠れません。
△複数の大きい画像を表示させておくことができます。
△サムネイル用の画像を準備する必要がありません。
△ CSSもHTMLも簡単で，少ない量で記述できます。
▽ページ内の全画像が最初に読み込まれるので，ページの表示がやや遅くなったり，通信量が多くなる傾向があります。
サンプル
たくさんの機関車が留置されているJR稲沢駅
写真にはDD51形ディーゼル機関車と，EF64形電気機関車の姿が写っている。
竹原フェリーターミナル
広島県竹原市と瀬戸内海の大崎上島を結ぶ，竹原⇔白水・竹原⇔垂水などのフェリーが発着する。
JR木更津駅前にある逆さ狸「きぬ太くん」
証城寺の狸囃子たぬきばやしの発祥の地である木更津は，街のあちらこちらにたぬきのオブジェがある。
使用したCSS
.img300-900 input {
   display: none;   /* 入力フォーム用のチェックボックスを表示しないようにします。 */
  }

   /* "+"は隣接セレクタです。HTMLソースで，次に続く要素が対象になります。 */
.img300-900 input + img {  /* input要素の次にくるimg要素が対象です。 */
   width: 300px;   /* チェックが付いていないときは，画像を幅300pxで表示します。 */
   cursor: pointer;   /* マウスカーソルの形　任意 */
  }

.img300-900 input:checked + img {   /* ":"の両隣には，スペースを入れてはだめです。 */
   width: 900px;   /* チェックが付いているときは，幅900pxで表示します。 */
  }


/* サムネイルの幅200px，大きい画像の幅600px　縦長画像用 */
.img200-600 input {
   display: none;
  }

.img200-600 input + img {
   width: 200px;
   cursor: pointer;
  }

.img200-600 input:checked + img {
   width: 600px;
  }
サンプルのHTML
　input要素に続いてimg要素があることに，ご注目ください。
　〔style="margin-bottom: 25px;"〕は，画像の下に余白をあけるために入れました。
<div 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>
</div>

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

<div 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>
</div>
ページの先頭へ