戻る
画像にマウスをのせると拡大
HTMLとCSSで作ったHTMLの部品
最終更新：2019-09-23 ▼
スタート：2019-06-29
概要
・サムネイルにマウスをのせると画像が大きくなり，マウスをのけるとサムネイルに戻ります。（スマホ等の場合は，タップすると画像が大きくなり，画像以外をタップするとサムネイルに戻ります。）
・サムネイル用の画像ファイルは使用しません。ここで使用した画像ファイルは，すべて長辺1200ピクセル，短辺800ピクセルです。サムネイルは長辺300ピクセル，大きい画像は長辺900ピクセルで表示させています。
長所と短所 （△：長所 ▽：短所）
△マウスをのせると拡大し，のけると元に戻るので，操作が楽です。
△大きい画像を表示したとき，それ以下のコンテンツが隠れません。
△サムネイル用の画像を準備する必要がありません。
△ CSSもHTMLも非常に簡単で，少ない量で記述できます。
▽マウスを横方向に動かして画像の上にのせたりのけたりすれば問題ありませんが，縦方向に動かすと，意図しない画像が大きくなることがあります。
▽サムネイルの上に，無意識にマウスをのせただけでも大きくなるので，煩わしく感じられることがあります。
▽ページ内の全画像が最初に読み込まれるので，ページの表示がやや遅くなったり，通信量が多くなる傾向があります。
サンプル
たくさんの機関車が留置されているJR稲沢駅写真にはDD51形ディーゼル機関車と，EF64形電気機関車の姿が写っている。
竹原フェリーターミナル広島県竹原市と瀬戸内海の大崎上島を結ぶ，竹原⇔白水・竹原⇔垂水などのフェリーが発着する。
JR木更津駅前にある逆さ狸「きぬ太くん」証城寺の狸囃子の発祥の地である木更津は，街のあちらこちらにたぬきのオブジェがある。
使用したCSS
/* サムネイルの幅300px，大きい画像の幅900px 横長画像用 */
.mo300-900 {
width: 300px; /* マウスがのってないときは，画像を幅300pxで表示します。 */
cursor: grab; /* マウスカーソルの形 任意 */
}
.mo300-900:hover { /* ":"の両隣には，スペースを入れてはだめです。 */
width: 900px; /* マウスがのっているときは，900px幅で表示します。 */
}
/* サムネイルの幅200px，大きい画像の幅600px 縦長画像用 */
.mo200-600 {
width: 200px;
cursor: grab;
}
.mo200-600:hover {
width: 600px;
}
サンプルのHTML
たくさんの機関車が留置されているJR稲沢駅<br>
写真にはDD51形ディーゼル機関車と，EF64形電気機関車の姿が写っている。<br>
<img class="mo300-900" src="photo01.jpg">
<div style="height:25px;"></div> ← 画像の下に余白をあけるために入れました。
竹原フェリーターミナル<br>
広島県竹原市と瀬戸内海の大崎上島を結ぶ，竹原⇔白水・竹原⇔垂水などのフェリーが発着する。<br>
<img class="mo300-900" src="photo02.jpg" alt="竹原フェリーターミナル(広島県)">
<div style="height:25px;"></div>
JR木更津駅前にある逆さ狸「きぬ太くん」<br>
証城寺の<ruby>狸囃子<rt>たぬきばやし</rt></ruby>の発祥の地である木更津は，
街のあちらこちらにたぬきのオブジェがある。<br>
<img class="mo200-600" src="photo03.jpg" alt="JR木更津駅前にある逆さ狸「きぬ太くん」">