| -1202- レスポンシブのついでに |
|
昨日書いたように、この e日記のページが(おそらく)スマホなどでも一応見やすくなったと思う。つまり、スマホなどのモニター画面の横幅画素数に応じて、右側のカラムが下に移動したり、文字の折り返しが適当に行われる。但し、最近のスマホのブラウザでは画像が大きい時には適当にリサイズして表示するので横にはみ出すなどの問題はないと思うが、PCのブラウザではそうした事はなくあくまでページの記述通りの表示をするので、ブラウザの幅を狭めようとしても幅の広い画像があればその幅でテーブルの幅が決まってしまい、画像の右側がウインドウ枠に隠れて見えなくなり、上下の文字行もその画像の幅以下にはならないので隠れて読めなくなる。 そこで、画像サイズをウインドウの幅に応じて縮小する設定が必要になるが、それは下記の通り スタイルで記述する。(もちろん スタイルシートで Class="" などとしても可能だが) < img alt="" src="*.JPG" style="width:100%;height:auto;max-width:500px;"> 但し、FLV動画の swfプレーヤは簡単には同じことが出来ないみたいだ。もう少し検討が要りそう。 写真はハナトラノオに停まって蜜を吸っている黒アゲハ。黒アゲハはじっと停まっていることがほとんどないが、ハナトラノオの蜜が吸いづらいのか?余程美味しくて危険を忘れてしまうのか?珍しくおとなしく写真を撮らせてくれた。 |
|
2014/09/08 |