CSS3について3

前回、可変グリッドレイアウトの継承について触れましたが、
その続きになります。

シンプルに言えばタブレット用CSS や デスクトップ用CSSでは、
ある要素に対してCSSを指定しなければモバイル用のCSSが
そのまま継承されるということです。

タブレット用やデスクトップ用のスタイルについては、
モバイル用のスタイルを打ち消すように上書きしていくことになります。

継承範囲の実例

	モバイル用CSSのみに指定	モバイル用CSSのみに指定	各デバイスごとに指定
モバイル用 CSS	.text {color: #f00;} 結果：Value	.text {color: #f00;} 結果：Value	.text {color: #f00;} 結果：Value
タブレット用 CSS	指定なし 結果：Value	.text {color: #06f;} 結果：Value	.text {color: #06f;} 結果：Value
デスクトップ用 CSS	指定なし 結果：Value	指定なし 結果：Value	.text {color: #090;} 結果：Value

昨今主流となりつつある、モバイル端末での表示を中心にサイト設計を行う
「モバイルファースト」的な制作手法のようです。

逆に言えば、タブレット/デスクトップ用のCSSから先にコーディングしてしまうと、
モバイル用の画面では何も反映されなくなりますので、その点を注意しなくてはなりません。

body要素の背景画像やタイポグラフィ、共通モジュールなど、
各デバイスにおいても共通となるスタイルの指定はモバイル用CSSの部分に
記述するようにしなくてはなりません。

また、可変グリッドレイアウトの Div は入れ子にして使用することはできません。
挿入そのものは可能なのですが、親の可変 Div の幅を変更している場合、
子の可変 Div はグリッドに沿わなくなり、幅がおかしくなるようです。

グローバルナビの部分などのように要素を横並べにしたい場合は、
昔ながらの実装方法のように「float」プロパティを用いてレイアウトするようにします。

可変 Div は画面やブラウザのサイズに応じて常に横幅が変わりますので、
その中に入れ込む要素も幅は「px」で固定せず「%」などの相対値で指定するなど、
可変となるようにします。

「display: table」や「display: box」など、レイアウト用の新しいCSSプロパティを
使用する方法もありますが、現段階ではできれば控えたほうがいいでしょう。

レスポンシブ Web デザインの場合、あらゆるデバイスでサイトを表示することが
目的となりますので、ある程度レガシーなブラウザでの正常な表示も必須となるからです。

この辺は、まだ統一性に欠ける部分でもあり、今後改善していくこと
なんでしょう。しかし、気をつけなくてはならないのは言うまでもありません。

今日は、ここまででまた次回です。