前回Googleのモバイルフレンドリーテストに敗れ、「メディアクエリ」を活用する必要を知ったわけですが、その単語を初めて知ったへっぽこ管理人にはちょっと難しい説明のサイトが多く理解するまで苦労しました。
要約しますと・・・
パソコンでの閲覧向けに作られたサイトは、広い横幅を最大限生かすためにサイドバーなどを活用して見やすく・記事を選択しやすくレイアウトされています。また、文字サイズもパソコンで見た時に見やすい大きさに指定されています。
それをスマホなどの縦長で画面が小さい端末でそのまま閲覧すると、文字が読めないわ画面が見切れて縦に横にスクロールしながら読まなくてはならないので不便なわけですね。
メディアクエリとは、そういった問題を解決するため、そのページを開いた端末の画面環境に応じて、適用するスタイルを切り替える機能のことで、CSSに記述していきます。
例えば、横幅（Width）が480px以下であればこのスタイルを読み込みますよーと記述すれば、パソコンなどのそれ以上大きな画面では反映されないし、それより小さいスマホ画面などであれば反映されるわけです。
@media screen and (max-width: 480px) { p { font-size:10px } }
@media screen and (min-width: 481px) { p { font-size:14px } }
こう書けば、
スマホ・・・・480px以下なので文字サイズが10pxになる
パソコン・・・481px以上なので文字サイズが14pxになる
というわけですね。うんうん、ここまでは分かりますわ。
じゃあさっそくやってみますか！
・・・・・・アレ？全く反映されないぞ？？
何かアルファベットの打ち間違えでもあるのかと思って何度も修正してみるのですが、一向に反映される気配がありません。
こいつぁお手上げということで、もっと調査したいところですがその日は酒を飲んでバタンキュー。
自分のやりたい事がしたいから明日は会社サボってやるぜ！と言いながら出社するのが正しい会社の奴隷なのです。
翌日、帰宅後調べてみたら「ビューポートタグを設置しないといけかった」みたいです。
<meta name="viewport" content="width=device-width">
こういうやつですね。こいつが端末画面の幅に合わせる指定になりますので、これを忘れると反応しないわけなのです。前日1時間以上格闘して諦めたのに、こんな簡単なことが抜けてただけだとは・・・
まぁ世の中そんなもんですよね（悟ったように言ってみる）
試しに記述を終えたページをプレビューしてみて、ウインドウサイズを変更してみると・・・
反映されたー！やったー！！
それからその他様々なレイアウトを弄り、パソコン用とスマホ用のスタイルを設定してみてアップロード。因縁のモバイルフレンドリーテストを再受講してみました。
結果・・・合格！なんとかモバイルと仲良くなれたみたいです。
でも取り急ぎ合格したくて書き上げているので、自分のスマホでページを見てみたらまだまだ歪なレイアウトです。これを更に改良して、噂のレスポンシブデザインなサイトにしたいと思うドコえもんなのでした。（※1）
※1 とりあえず横文字を使って出来る男を演出してみたかったことは秘密です。
というか改良しないと現状はかなりマズいレイアウトなのでまだまだ頑張らねばなりません