ブログもtwitterクライアント -> スマートフォンのブラウザで見るという流れも増えてきたので、そろそろこのブログもスマフォ対応させようと。
media-query使うよりはテンプレートで対応する方が好きだわと書いたんだけど、Flaskのやり取り読んでたら一度はmedia-query使っておくかなと思った。
media-queryでデザインするときに参考にしたサイト
- レスポンシブwebデザインで制作する時のポイント
- CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
- CSS Media Queries（メディアクエリ）を使用した指定方法
実際に画面のサイズが変わったときにどう見えるかをチェックするにはresponsivepxというサイトが便利。
でも、デザインしてる時には頻繁にcssのファイルを修正するので、変更のたびにリロードするのはちょっとめんどくさかったかも。ファイルの変更検知したら更新するようなものをローカルで動かしたほうが楽かもしれない(Node.js+Expressで作るのがいいのかな)。
未解決の問題
- adsenseみたいな広告系の大きさをCSSで変更できるのかどうか分からない
- min-widthとmin-device-widthの使い分けがよくわかっていない
- media-queryで書いていったらcssのファイルがごちゃごちゃして読みにくくなってしまった。SassかStylusを使うべきか
おまけ1
12/10にHTML5読書会があります。内容はCSS3を使った見栄えの話(media-queryを含む)とアクセシビリティ(WIA-ARIA)になる予定なので、上の話に興味があれば参加するといいと思う。
HTML5＆CSS3実践入門 最新Web標準を使いこなす (The Pragmatic Programmers)ブライアンP.ホーガン
インプレスジャパン / 2940円 ( 2011-07-08 )
それから、当日は静岡の勉強会系の合同忘年会もあるので参加すると楽しいでしょう。静岡Python(Shizu.py)の話ができたらいいなぁと密かに思っていたりする。
おまけ2
Flaskのテンプレートでゴニョるんだったら下のリンクを参考にすればよい