レスポンシブWebデザインでのCSS

自分のサイトをレスポンシブデザインにするために検討し始めたのに、仕事でいちから作ることになったため、どうせなら、と考えてみた。
本家のサイトでもそうなんだけど、今まではどんなサイトでもまずは以下のようなcssを読み込ませていました。

/* 以下のcssを読み込み */
　@import "reset.css"; /* ブラウザの違いを吸収 */
　@import "hack.css"; /* ハック用css */
　@import "container.css"; /* divやpなどで全体を構成 */
　@import "text.css"; /* テキスト装飾用 */

なので、htmlファイルで読み込むcssは常に一枚「import.css」のみ。
この後、reset.cssで

*{ margin: 0; padding: 0; color: #000; background-color: #fff; }

ユニバーサルセレクターで全てをクリア、hack.cssはIE用のCSSハック、メインはcontainer.cssでレイアウトに関するcssを記述して、text.cssで文字装飾を記述する、といった具合です。
なので、今回も@importでやろうと思って調べていたんですが、レスポンシブにするためには大凡３通りの方法があるらしいです。

1. デバイス別にCSSを用意し、@importでそれぞれを読み込む
2. jQueryなどのスクリプトで対応
3. @mediaで一枚のCSS内部に収める
4. htmlのlink要素の時点で分岐させてしまう

４は１と何ら変わらないので割愛して考えて３つ。

さて、どれでいこうかな、という時点でまずは２が真っ先に除外されました。
詳しい人とかデザイナーとコーダーが分かれてる大規模な制作案件とかなら可能でしょうけど、何もかも一人でやらなければならないわ、CSS3はまったく気にしてなかったわ、そもそもWebデザイナーじゃないわで、その程度の人間 がそんな立派なサイトを作れるはずもない。
とりあえずPCでもスマートフォンでもちゃんと見られればいいわけです。付け加えれば、請け負った案件がごく限られた人しか見ないようなサイトだったので、いっそのことIE8以下をばっさり切り捨てた思い切りの良い、言ってみればやけっぱちな（※）サイトでも構わない。
※これに関しては自棄とも言い切れないかな。2013年7月時点でIE8はシェア３％切ってるので。

こうなると１か３なんですが、１のデバイス別に用意するのも大変だな、と。
ついつい楽な方へ流されてしまうので、幅などをpx指定してしまいそう。ちゃんと％指定を意識すればいいじゃん、となるんですが、それなら最低限の指定で済むわけで、つまりデバイス別に分ける必要がない、と。
更に言えば、後で何かしらのIDやクラスを指定するとなった場合に、出来る限りそれぞれのCSSで同じ場所に書いた方がいいでしょうから、場所を探すのが大変。スマートフォン用、タブレット用、PC用と３枚作ったら、３枚の同じ場所を探さないといけない。

という訳で、３しかないわけです。
今あるサイトを手直しする場合でも、新しくサイトを構築する場合でも、結局はこれが一番じゃないのかなと思います。
最初のデザインとCSS作成 を、PC用でするのかどうかという問題はありますが、PCでは表示してそれ以外では非表示という項目はあっても逆はないような気がするので、

1. PCサイトを作るつもりでデザインし、HTMLとCSSを作成
2. CSSに@mediaでタブレット用とスマートフォン用に必要な部分だけ追加

これに決めました。 例えば全体のレイアウトに関しても、PCなら３カラム、スマートフォンならカラムを全部縦に並べるという場合に、

div#left_box{****} div#main_box{****}

とかを書いて、その下に

@media only screen and(max-width:479px;){ div#left_box{****} }

とか書いていけばいいわけです。

これなら記述するコードは最小限で済むし、修正するにしてもHTMLを見ながらdivのleft_boxの幅の割合を変えたいな、と思った時にPC用もスマートフォン用もすぐに変更できるな、と思ったので。 いざ作るか、となった際に注意しないといけないのは、IE9だとCSS3のflexboxに対応していないこと。

これが便利だからCSS3で作りたいのに、未だ20％シェア（日本）のあるブラウザで未対応とか……相変わらずIEには泣かされますね。