HTML5 で作ってみました、その2。
1ページだけなので、実験するのに中身が少なくていいかなと思い HTML5, CSS3 を使ってみました。
デザインについて考えたこと
デザインは、
- フライヤーのようなデザイン
- Fluid Grid と Media Queries で変化するレイアウト
- わずかにグラデーションやテクスチャ
がポイントです。
ミニマルな感じのフライヤーを意識しました。ブログなどのデザインなどと比べると文章は少ないので、テキストというよりもデザイン要素の一部として扱っています。
タイトルや 02 に薄くグラデーションをかけたり、墨色の背景にノイズを載せたりしてあります。
印刷物であれば紙などの微妙なテクスチャや光源の影響などがありますが、液晶自体が発光しているということもあり、ベタ塗りが均一すぎて、今回のデザインには合わない気がしたので色々やってみました。
モノであれば紙の厚みだったり、インクの厚みだったり、写真であれば周辺光量落ちだったり、そういうものが視覚に与える効果があって、Web デザイン的なやり方でそういったものを取り入れるには、どうするんだろう？と考えていました。
レイアウトはそもそもは iPhone でも見やすいようにしたいというのがあり、狭めに max-width を指定した Fluid Layout にした上で、Media Queries でレイアウトが変わるようにしました。Fluid Layout ベースで作っておくと Media Queries で幅を狭めるのが楽でした。もっとダイナミックにレイアウトが変化してもよさそうです。
コーディングについて考えたこと
コーディングは、
- HTML5
- CSS3
- Media Queries
- Fluid Layout
- Modernizr
を試行錯誤中です。
今後個人的に作るものは、HTML5 と CSS3 でいいんじゃないかと思っています。
今回は、Modernizr を初めて使ってみたのですが、html5shiv の代わりとして、IE で HTML5 をレンダリングするために使ってみたぐらいで、Modernizr によるブラウザの機能の検出で追加される class は使ってません。Modernizr は、対応が必要でない所はそのままにしておいて、多くのブラウザで同じようにしたい所（角丸は必須！など）ごとに段階的に CSS を追加していきやすいと思います。
Media Queries については、ダイナミックにレイアウトが変化させられるというのは、紙では出来ないことなので面白いのなーと。アプリ制作ではなく、html であれば対象となるデバイスも増えます。レイアウトの変更と情報の変更、デバイスの物理的な大きさの違いと解像度の違い、デバイスによって持ち方や画面との距離も変わると思います。この辺りは今後もっと取り組みたいなと思っているところです。
IE6 と Firefox 2 でかなり崩れていましたが、さきほど直しました。
IE6 は max-width が効かないのでその対応
<!--[if lt IE 7]>
<link href="css/ie.css" rel="stylesheet" media="all" type="text/css" />
<![endif]-->
Firefox 2 の対応はこちらを参考にしました。
HTML5 を IE や Firefox 2 でも使えるようにする方法 – html5doctor – HTML5.JP
もともと php で書いたので、コンテンツタイプを application/xhtml+xml にして対応しました。
参考にしたもの
HTML5 Boilerplate とドキュメントが勉強になります。Changelog を見て知らないものを調べたりしました。