トップページのデザインを変更してみた
サイトのトップページのデザインを変更してみた。
ブログのテーマを現在のものに変えたときトップもフラット風なデザインに変更したのだけど viewport が未定義なためスマホだとかなり小さく表示されていた。また表示位置やサイズ指定もイマイチで単に viewport を指定しただけでは崩れまくりだった。
そんなわけで改めてデザインし直すことにした。サイズ系の指定には em や % などの相対値を利用し絶対値を避けている。各種アイコンは Font Awesome、配色は Flat UI の値を利用。
ついでにこれまでトップページを履歴管理してなかったので、よい機会だから GitHub へ登録しておく。
あまりにも小規模なため今まで登録をためらっていたけど、人のリポジトリを見るとスクリプトがひとつだけとかざらにある。また GitHub 自身が Gist みたいな小規模リポジトリのサービスを提供しているのだし気にするのはやめた。
おまけ
おまけとしてスマホ上でサイトの表示を確認するために利用した方法を書いておく。もっと楽なアプリとかサービスがあるよ！という方は Twitter などで教えていただけるとありがたい。
今回の対応により viewport を利用するようになったので PC ブラウザのサイズを変更するのではなくスマホ上で確認したくなった。しかし開発段階で実機にリソースを持ってゆくのは面倒だし (Dropbox も考えたけど却下) 本番サーバーにいきなり置くのはよろしくない。
そこで MAMP (Android だけなら Windows & XAMP でもよい) の htdocs にサイトを配置して iPhone シミュレータと Android エミュレータから localhosot を表示させることにした。
iPhone シミュレータなら同一 Mac 上の Safari から localhost をそのまま開ける。ただしポートの指定が必要。MAMP の標準だと 8888 なので Safari のアドレスバーに http://localhost:8888/ と入力すれば htdocs のルートが表示される。
Android エミュレータは localhost や 127.0.0.1 ではアクセスできない。これらは AVD 上のローカルを指す。AVD をホストしている PC には 10.0.2.2 が割り当てられているので http://10.0.2.2:8888/ へアクセスすればよい。このように Android エミュレータでサポートしている特殊な IP アドレスについては公式にドキュメント化されている。
実際に表示してみる。
Android は端末メーカーによってブラウザの挙動が異なる可能性もあり、エミュレータだけ信用するのは危ういという話もある。今回のように簡単な Web ページならこれで十分だけど。
なおブログのテーマはまだ viewport 未指定である。こちらについてはシングル カラム移行も検討してるので対応はもう少し後になりそう。