こそこそと新しいサイトを作成中のみはら（@masashi_385）です。今回つくっているのは、みはらのメモ用のみはら.comで紹介したラーメン屋とかをGoogleマップ上で一覧できるようなサイトです。そのため、GoogleMapsAPIとかをごにょごにょしながらこそこそとつくっています。
レスポンシブデザインにした
そして、今回は、どこで道を間違えたのか、レスポンシブデザインにしようと思いついてしまったのが、いろいろと大変になるスタートでした。でも、自分用のメモでしかもラーメン屋メインだったら、大抵はiPhoneで見ると思うんで、さすがにWPtouchじゃまずいかなと思った次第であります。
で、まずハマったのが、Googleマップのナビゲーション達がきちんと表示されないこと。こんな風に表示されてしまいます。
ほとんど消えてしまっています。まぁ、iPhoneで見る分には全然問題ないんですけど、PCで見た時のザンネン感がハンパじゃなかったんで、Bootstrapをあきらめました。どうやら原因はBootstrapのようなんです。他のテーマに変えてみたら問題なく表示されるようになりました。いや、もちろんBootstrapをベースにしたテーマを片っ端からテストしてみたんですが、全部ダメだったんです。
img要素問題をCSSで解決する方法
で、今回の本題はここからです。Bootstrapの時は、画像のサイズもブラウザに合わせて縮小してくれていたんですが、今回使っているOrionではなぜか画像は縮小してくれないんです。なので、iPhoneで確認してみたらこんなヒドイことに。
こういう風にはみ出した画像があるサイトって、iPhoneだとすごくスクロールしにくいんですよね。下に行きたいのに右に行っちゃうみたいな。あ、またマシンガンかよ！とかそういうのは、まず置いておいてください。
そこで、数日間レスポンシブデザインと戦い続けたみはらは思いついたんです。これを追加してやればいいじゃん！
[cc lang=”CSS”]
img: {
max-width: 100%;
}
[/cc]
これではみ出さないぞと、意気込んでサイトをiPhoneで確認すると、違う意味でヒドイことになってました。
こういう風になってるのを見て、ザンネンだなぁと思っていたんですが、まさか自分のサイトも同じことになろうとは思ってもみませんでした。
でも、ここでまた思いついちゃったんです。これです。
[cc lang=”CSS”]
img: {
max-width: 100%;
height: auto;
}
[/cc]
これでカンペキだろうと思って確認したら、カンペキでした。
でも、実際にはカンペキとはいえないですね。そもそもの問題としては、PCと同じ画像を回線速度の低いモバイルデバイスでも表示させるのか、というところですよね。でも、いいんです。だって、この新しいサイトも基本的にみはら用ですから…
追記
そのサイトができ上がりました。いや、つくりかけですが。
