モバイルフレンドリーは難しい

せっかくSchooで勉強しているので、自分でもサイトを作りたくなって、ずっと放置してあったプロバイダのホームページサービスをオープンしようと思いました。それ以外にも理由はあったのですが、それはまあ今はおいておいて……最初はとってもシンプルなトップページを作ってみました。タイトルは普通に「h1」で、でもせっかく知ったのでCSSでシャドウを付けて。リンクもテキスト。Googleのモバイルフレンドリーテストも大丈夫でした。

でもやはりどうせならトップ画像なんかも使ってみたい、という誘惑に負けて再挑戦。リンク用に画像を作ったりして、これならいいかな?と何度もブラウザで確認しつつアップ。ちょっとだけ自己満足に浸っていたところ、Googleさんにモバイルフレンドリーじゃない!と言われてしまいました。「文字が小さすぎる」そうです。Chromeデベロッパツールという便利ツールで見てみると、iPhon4なら見えそうですが、6では小さいかも。自分のスマホで確認しても、確かに字が小さい。レイアウトは思った通りなのですけれど、見やすいとは言い難いのかなぁ。あーだこーだと試行錯誤していると、よけいにだんだん訳がわからなくなってきます。ううう、難しい。改めてGoogleのテストの解決策を読んでみたところ、metaタグを追加する方法がありました。

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


を追加です。さっそくやってみたところ、メディアクエリで設定した一番小さい横幅モードが適用され、「モバイルフレンドリーなサイトです」になりました。デザイン的には不満も少しあり、逆に試行錯誤の結果PCの大き目な画面ではもうちょっとリンク画像が小さい方が良かったかも、なんてこともありましたが、今夜はもうここまでにしておこうと思います。
HTML5やCSS3、はるか昔趣味で自分のホームページなるものを作ったり、フリーで提供してくれていた掲示板CGIの改造にはまっていたり、なんて事はありましたが、その頃とはルールも違います。改めて勉強するとなると、やはり難しいですね。でも楽しくもありです。
ちなみに、デベロッパツールはご存知の方も多いとは思いますが、スマホでどう見えるかも試せてとても便利です。Schooを始めるまでは、そんな機能、知りもしませんでした。ありがとう、Schoo。


けれど、自分のサイトはもっと改良の余地ありすぎです。がんばろう~