ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

リセットCSSなど制作時のひな形を考えなおそうという試み

September 07 2013

ぼつぼつと、いや今更ながらですがレスポンシブWebデザインの案件なども
受注するようになってきておりまして、IE6の亡霊ともそろそろ決別できるかな、と
思いつつある昨今ではございますが、今月中には

「製作時のひな形をまとめあげる」というのを一つの目標としたいと思っています。
思ってますじゃなくて、いつやるの?今(以下r

思えばこういうひな形の見つめなおしというのは
策定されてる物が代わる度に行ってきてはいるのですけれども、
レスポンシブ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にがっつりと取り組んで
てんやわんや続きでボケた自分の頭もノーマライズしないといけません(笑)

| Posted in CSS | Comments (0)

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« Jul 2017 August 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31