マルチデバイスのためのCSS

様々な端末で閲覧可能（マルチデバイス）に対応するためのCSSの書き方。

「様々な端末」を挙げてみると
・ディスクトップPC
・ノートPC
・モバイル
・TV
・その他
OSやCPU、ブラウザなど機能面の違いももちろんあるが、大きな違いはやはり「画面サイズ」。
そこで想定する画面サイズに合わせてレイアウトやデザインが変わるようCSSを設定する。

参考サイト
http://www.instantshift.com/
http://www.kayac.com/

CSSでマルチデバイスに対応する２つの方法
１。読み込むCSSファイルを振り分ける
例
link rel=”stylesheet” href=”スタイルシート１.css” type=”text/css” media=”only screen and (min-device-width : 768px) and (max-device-width : 1024px)”
link rel=”stylesheet” href=”スタイルシート２.css” type=”text/css” media=”only screen and (max-device-width:480px)”

２。CSSのなかで画面サイズによる指定の振り分けをする
例
@media screen and (max-width: 640px) {
//640pxのサイズ用スタイルを書く（フルスクリーンとの相違点を上書き）。
}

画面サイズで変更する主な項目
floatの解除
　小さくなるほど回り込みを解除して、縦長に配置する
エリアの非表示
　画面が大きい場合はサブ的な情報も表示するが、小さい画面ではメインコンテンツとナビのみ表示など
ボタンサイズの変更
　画面が小さくなる（モバイルなど）場合、メニューなどのリンクエリアを大きくして指でクリックしやすくする
イメージサイズの変更
　画面が小さくなった場合、相対的にイメージも小さくするなど。CSS3では背景画像の拡大縮小も可能。
文字サイズの変更
　イメージとは逆に画面サイズが小さい場合、逆に文字サイズを大きくして読みやすくするなど

できればサーバーサイドの対応も必要
CSSで出来る事は見た目の制御のみ。たとえば右カラムなど非表示にしてもデータとしては取り込まれているので、モバイルなどのパケット的には最適化されている訳ではない。
CSSによる見た目の最適化のほかにも、サーバー側でのデータの最適化も必要。

とりあえず最初はこんなところ。