ホームページを作成していて、特にスマホなどの小さな画面のデバイスが登場してから画像と文章の配置に工夫が必要になった。パソコンモニターは大型化して 1920pxが普通になったのでそこそこのサイズの画像の横に文章を配置しても成り立つが、スマホの場合画面が小さいので充分なサイズの画像を表示できない。しかし説明文などでは文章と画像のつながりに加えてある程度の表示サイズでないと理解できないことが多い。
大手のブログ・サイトなどを見ていると最初は小さな画像を表示させて、そこをクリックしたりすれば大きな画像をオーバーレイさせて表示させる手法が主流になってきたようだ。
私も今まで小さな画像を表示させておいてそれをクリックすると原寸サイズの画像を表示させるリンクを使って来たが、最近になってマウスカーソルを画像の上に乗せると大きなサイズの画像が表示されマウスを外すともとに戻ると言う機能が、Javaを使わずに cssだけで記述できるということを知った。スマホなどの場合は画像をタップすれば大きな画像の表示、「戻る」ボタンで元のページに戻る。
早速試してみると、結構いい感じで動作する。
htmlの例：
<a href="*.jpg" class="popup"><img src="*.jpg" alt="" class="image fltr" style="width: 200px;"><span><img src="*.jpg" alt=""></span></a>
cssの例：
a.popup:hover { position: relative; text-decoration: none;}
a.popup span { display: none; position: absolute; top: 1em;left: 0;}
a.popup:hover span { border: none; display: block; box-shadow: 4px 1px 3px 2px #777;}
a.popup:hover span img { vertical-align:bottom;}
htmlの例では *.jpg と3つのイメージファイルのURLを指定しているが、1番目がクリックした時にリンク先で表示される画像、2番めは最初に表示されている画像、3番めはマウスホバーで表示させる画像。3つとも同じURLでも構わないが、通常2番めの大きさより3番目の表示サイズは大きく指定する。

---

今日の写真は前回に続いて匂いの強い桜。上匂と言う種類。駿河台匂ほど強くは感じなかったが、時期の違いかもしれない・・・と言うより両者の違いが良くわからない。