きちんとスマホ対応、レスポンシブデザインでモバイルフレンドリー続編

●年末年始の間に当ブログを突貫工事でようやくスマホ対応させた。いわゆるレスポンシブデザインとやらでグーグル先生の診断サイトで「モバイルフレンドリー」のお墨付きをもらえてほっとしたのであるが、そうはいってもあれは応急処置。その場しのぎの対応だったので、もう一度cssファイルを見直して、今回ようやく納得のいく形で調整することができた。これで狙った通りのデザインで読めているはず。たぶん。きっと……。ほうら、小さな画面でもこんなに読みやすく！
●なにを直したか、例によってほとんどの方は関心がないと思うが、未来の自分のために書き残しておこう。まず先日の突貫工事では、この画面の横幅をピクセル数で絶対指定してしまっていた。これだと機種によって両サイドの余白がまちまちで、見た目が美しくない。そこで、これを相対指定に書き換えた。っていうか、どう考えても最初からそうすべきだったのに、なぜ思いつかなかったんだろ。たとえばこんな感じ。

@media screen and (max-width: 460px) {
#container-inner {
width: 96%;
}
}

で、このときにまちがえやすいのだが、96%というのは親要素に対する割合であって、画面全体に対するものではない。だから外枠を96%に指定して、その内側ぴったりに文章を入れる箱を置くなら、箱の横幅は100%と指定すべきなんである（未来の自分、なにを言ってるか、わかるかな？）。最初はうっかりまちがえて余白だらけになってしまったぜー。
●続いて、写真等の画像について。このブログで現状使っている写真は最大で横幅411ピクセルとしている。これはいかにも石器時代のブログの仕様だが、今はそこは置いておく。で、平均的なスマホの画面だと写真が全部入りきらず、右側だけが切れてしまう。年末年始の突貫工事では「ま、それくらい平気だろ」と思っていたのだが、んなわけないんである。この問題にはきちんと対処する方法があって、imgタグに対して「横幅が収まりきらないときのみ縮小する」と指定すればいい。以下のようにすると、きれいに写真が収まった。

@media screen and (max-width: 460px) {
img {
max-width: 100%;
height: auto;
}
}

●あとは細かいところだが、スマホとミニタブレットの境目を460pxで判定することに微調整。それとスマホでは画面最上部のバナー広告を非表示にした。どうせだれもバナーなんて見てない。バナー要素adに対してこうすればOK。

@media screen and (max-width: 460px){
.ad {display:none}
}

●なお、巷にあふれる多種多様なスマホから、どう見えているかというクロスデバイスチェック（って言うの？）については、Chromeに標準装備されている「デベロッパーツール」を使った。最初からメニューにGalaxy S5とかiPhone Xとかいろんな機種がセットされていて、それぞれの機種からどう見えるかをチェックすることができる。なんて便利なの。今頃になってスマホ対応など周回遅れもいいところだが、それでもやったほうがいいに決まっている。