デバイス毎、画面の向き毎にデザインを変える手段

質問

毎度お世話になっております。

http://okwave.jp/qa/q7773302.html(簡素化したHTMLを書けるようCSSを勉強中です)
http://okwave.jp/qa/q8296498.html(html5とcss3、 jQueryで動きのあるメ)

上記の各質問で、ある程度のサイトは出来ました。

今度はもう一段階レベルを上げて、フィーチャーフォン・スマートフォン・タブレット端末・パソコンの各デバイス毎、画面の向き毎にデザインを変える方法を調べてみたのですが、

http://okwave.jp/qa/q7793385.html

のように、@import"●●"でやる方法と、.htaccessを用いての振り分けというのはよく聞くのですが、両者の違いや、それぞれの注意点など、教えて頂けないでしょうか。

フィーチャーフォンは別にした方が良いとも聞きますが....

勿論、タブレット端末はパソコンと共通でも良いのかもしれませんし、スマートフォンの横とタブレット端末の縦表示も共通でも良いのかもしれませんが、分けておけば別のデザインにしたくなっても設定が楽だろうと思ったのですが、この考えは正しいでしょうか？

また、PHPで各パーツごとにファイルを分けているのですが、"body section section nav"の中のhtmlと"body section header nav"の中のhtmlは共通の『nav.html』を使い、"section nav"の方は左寄せ縦並び、20％幅とし、"header nav"の方は項目を減らし、"body section header"の幅８０％で、２０％幅の画像の右に表示したいと思っているのですが、そんなことは可能でしょうか？

また、私は各デバイスで共通の項目、例えば文字色やヘッダー情報、フッター情報などを『style.css』に書き、各デバイスで違う項目(プロパティ)のみ、各CSS『desktop.css tablet-lay.css tablet-erect.css s-phone-lay.css s-phone-erect.css c-phone.css』に書けば良いと理解していますが、問題は有りますか？

belatero.cmbc。ｊ○

回答No.1

ORUKA1951 · ベストアンサー

HTML4.01の時代には、スタイルシートで
　⇒外部スタイルシート( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.3 )
　⇒カスケードするスタイルシート( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.4 )
に詳しく書かれています。
　基本的には、基本的なmedia別のスタイルシート
・media="screen"　media="print" 程度はほしい
・ついで、
　1) 固定スタイルシート
　2) 優先スタイルシート
　3) 必要ならCSS3/HTML5のmediaqueryです。
@importは、細切れにするだけですから無関係
.htaccess、新しい端末が登場するたび設定を変更しなけりゃならないので非実用的

★基本はリキッドで作成して、それでもカバーできない時にMediaqueryを使うので良いかと。
　デザインなんて所詮、作者の自己満足に過ぎません。大事なのはコンテンツです。デザインで訪問するのじゃなく、内容がも止めている物だからですよ。

　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　このページ、ブラウザの表示メニューからスタイルシートを選択するとデザインが変わる。しかし印刷するとURLまで印刷される・・。多くのデザインはリキッドなので、そのままスマホも幅広ディスプレイに対応している。