サムネイルをクリックする

HTMLとCSSで作ったHTML部品

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

.img300-900 input {
   display: none;   /* 入力フォーム用のチェックボックスを表示しないように */
  }

.img300-900 input + img {   /* "+"は隣接セレクタ.input要素に隣接するimg要素を指定 */
   width: 300px;   /* img要素で表示する画像の幅を300pxに */
   cursor: grab;   /* マウスカーソルの形 任意 */
  }

.img300-900 input:checked + img {   /* ":"の隣にスペースを入れてはだめ */
   width: 900px;
  }


/* サムネイルの幅200px,大きい画像の幅600px 縦長画像用 */
.img200-600 {
   margin-bottom: 25px;
  }

.img200-600 input {
   display: none;
  }

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

.img200-600 input:checked + img {
   width: 600px;
  }
サンプルのHTML
<div class="img300-900">
たくさんの機関車が留置されている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">
竹原フェリーターミナル<br>
広島県竹原市と瀬戸内海の大崎上島を結ぶ,竹原⇔白水・竹原⇔垂水などのフェリーが発着する。<br>
 <label for="p02">
  <input type="checkbox" id="p02">
    <img src="photo02.jpg" alt="竹原フェリーターミナル(広島県)">
 </label>
</div>

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