謹賀新年2018 ～ レスポンシブデザインでモバイルフレンドリー編

●謹賀新年。元日は天皇杯決勝でマリノスがセレッソ大阪と戦い、タイトル獲得を夢見たものの、延長戦で力尽きてしまった。相手が一枚上手だった。うまくて、ハードワークするチーム。水沼の活躍に複雑な心境になる。マリノスは去った選手がよく育つクラブ。トホホ。
●さて、年末の間に今さらながら当ブログをスマホ対応させた。いわゆるレスポンシブデザインで、モバイルフレンドリーに。今までだって適度に拡大したり横にしたりすればスマホでも読めなくはなかったが、これからはすっきりスマホ向けに最適化された画面で読める（たぶん、大方の環境では）。どうやってモバイルフレンドリーにすればいいのか、その対応法を新たに覚えるのが億劫でどうにも腰が重かったのだが、一念発起して久々にcssファイルを開いてみたところ、すっかり文法を忘れていてぜんぜん読めなくて焦った。でもまあ、やってみるとなんとかなる。完璧にしようとするとなにかと大変そうだが、個人サイトなんだから突貫工事でおおざっぱに対応するという程度でいいだろうという姿勢。なんどか試行錯誤した後、グーグルの「モバイルフレンドリーテスト」でOKが出てくれて、ほっ。
●以下、ほとんどの方は関心ないと思うけど、なにをやったかだけ記しておこう。まず「レスポンシブ ウェブ デザイン」にあるように、ページが各種デバイスに対応していることをブラウザに知らせるために、各ページのヘッダに一行メタタグを追加する。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

続いて、メディアクエリを用いてcss内に必要に応じてスマホ用の記述を加える。ウチのブログの場合は7インチとかの大きい画面ならデスクトップ用と同じ画面を表示させても問題ないと判断して（右側のメニューエリアが切れて表示されても文章は読めるし、まれに必要なときのみ横スクロールすればいい）、画面表示が横500ピクセルまでの場合のみ、スマホ向けのデザインを適用させる。たとえば、今この文章が書かれているエリアであれば、デスクトップ用の記述の後に @media screen and (max-width: 500px) などと続けて、スマホ用の記述を書く。以下の部分は、スマホ用にフォントを一回り大きくして、かつ行間をやや狭めると指定している部分。

.asset-content {
font-size: 89%;
margin: 5px 0;
line-height:180%;
}

@media screen and (max-width: 500px) {
.asset-content {
font-size: 100%;
margin: 5px 0;
line-height:150%;
}
}

●これはほんの一例で、ほかにもページレイアウトの横幅を狭め、右側のメニュー欄は本文のお尻に続く形にし、なるべく狭い画面を有効に使えるように左右の余白をギリギリに近いくらいにまで狭めるなど、細部を調節してみた。ただ、それでもまだいろいろと不完全なところはあって、たとえば固定幅で指定している横幅いっぱいの写真などはスマホでは右端が切れてしまうし、スマホでも機種によってはまだ左右の幅が広すぎるかもしれないのだが、最終的には「ま、それくらいはいいだろ」と大らかな気持ちで手を打つことに。
●どうしてこうして逐一なにをしたかを書いているのかというと、きっと数年したら自分のやったことをさっぱり忘れてしまっているだろうから、後から思い出せるように書いている。苦笑。まー、ホントによく忘れるんだ、これが。以前ほど技術的な面に労力をかけられなくなっているので、なんでもかんでも自分でやってしまおうというのは本当は得策ではない。でも、なかなかねえ……。