ぼつぼつと、いや今更ながらですがレスポンシブWebデザインの案件なども
受注するようになってきておりまして、IE6の亡霊ともそろそろ決別できるかな、と
思いつつある昨今ではございますが、今月中には
「製作時のひな形をまとめあげる」というのを一つの目標としたいと思っています。
思ってますじゃなくて、いつやるの？今（以下ｒ
思えばこういうひな形の見つめなおしというのは
策定されてる物が代わる度に行ってきてはいるのですけれども、
レスポンシブWebデザインとWordpressが絡んできてからは
「おおおおあああ、わっけわかんねー」というまま、なんとか今まで生きながらえてる、
というのが現状でございまして・・・・・情けない話なんですが。
そもそも「一つのHTMLで対応する」というその概念は理解できるのですけども
じゃあガラケーなんぞでアクセスしてきた場合どうなるんや、という疑問は
まだぼんやりとしか解決策を見出しておりません。
これに関しては
「Google推奨のスマホとフィーチャーフォンに最適化したサイトの作り方」という
なかなか興味深い記事を見つけました。
さすがに一つのHTMLで対応するには厳しそうな感じがしますね。
この記事の筆者も、
- スマホ向けサイトを提供するならレスポンシブ・ウェブデザインを採用する。
- フィーチャーフォン向けページは作らない（ガラケーは切り捨てる）。
という、なんともわかりやすい結論を書いておられます。
「対応するから金をくれ」と言えばいいんだな、と大阪人らしくおおらかに行こう、と
決意を新たにふんどしの紐を締め直したい気分です。
さて、Webに無数に散らばるレスポンシブWebに関しての情報ですけども
こういう時はやっぱり「紙の文書」に限ると久々に本を買いました。
ゼロから始めるレスポンシブWebデザイン入門という連載に様々なTipsを追加して
発売されたこの本ですけども、概要から丁寧に書いてありますので
ざっと「レスポンシブWebとはなんぞや？」というのを知るにはとてもいい本でした。
ここに書かれていたのが「リセットCSSの再考」というお話。
リセットCSSに関して有名なのはYUIやEric Meyer’s Reset CSSなどがありますが
HTML5向けに最適化されたHTML5 Doctor CSS Resetなんてのも出てきて
なんやわけわからん状況になってましたけども、
「リセットじゃなくてノーマライズ（正規化）」という考え方で作られた
Nomalize.cssというのが出てきているようです。
なぜリセットではなく Normalize.css を使うのか
http://yomotsu.net/blog/2013/02/23/normalize.html
もともとリセットCSSというのは「各ブラウザが持ってるCSSをリセット」して
そこから新たに組み上げていくためのものなのですが
ノーマライズCSSは
「各ブラウザが持ってるCSSはそのまま活用してブラウザ間の差異を無くした物」
という解釈なのだとか。
テキスト主体で作るサイトの場合だと、確かにこの方が楽ですし
それにスマートフォンやタブレットに一つのHTMLで対応させる事を考えると
確かにこの方が合理的なのかも知れませんね。
この本（レスポンシブWebデザイン）にはこのノーマライズCSSに
レスポンシブWeb用に数箇所書き加えた物が載っていました。
（例：伸縮する画像の為にimg要素にmax-width:100%を追加、
各要素のmargin-topを0に指定し直す）
この記事もとても参考になりました。
Normalize.cssを使ったコーディングの注意点とリセットCSSとの違い
http://cappee.net/coding/normalize-css-reset-css
さて、まずはこのノーマライズCSSにがっつりと取り組んで
てんやわんや続きでボケた自分の頭もノーマライズしないといけません（笑）
