CSS3について2

続、Dreamweaver CS6 の可変グリッドレイアウト（CSS3の Media Queries）んいついて
です。（レスプンシブデザイン）

「可変グリッドレイアウト」機能を利用して、実際に3つのデバイスでレイアウトが
可変する大枠のHTMLまでを準備していきました。

今回は、実際の細かい部分のコーディングにあたってのTipsや注意点についてです。
可変グリッドレイアウトでのコーディングのコツです。

CSSの継承順序と Media Queriesは、モバイル→タブレット→デスクトップという
ことになります。

 responsive.css というCSSファイルのコードを参照しています。
デザインビューで、それぞれの可変 Div の幅や位置を変更すると
自動的にCSSが書き換えられます。

幅を変更した div#nav に対して、 各デバイスごとに異なる
「width」と「margin-left」の値が自動的に指定されています。

「@media」ではじまるカッコ内で画面サイズによって適応するCSSを振り分ける、
CSS3 の Media Queries が使用されています。

/* モバイルレイアウト : 480 px およびそれ以下. */
#nav { clear: both; float: left; margin-left: 0; width: 100%; display: block; }

/* タブレットレイアウト : 481 px ～ 768 px。モバイルレイアウトからスタイルを継承。 */
@media only screen and (min-width: 481px)
{ #nav { clear: none; float: left; margin-left: 2.5641%; width: 74.3589%; display: block; } }

/* デスクトップレイアウト : 769 px ～最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */
@media only screen and (min-width: 769px)
{ #nav { clear: none; float: left; margin-left: 2.0408%; width: 69.3877%; display: block; } }

可変グリッドレイアウトが生成するCSSでは、
モバイル用 → タブレット用 → デスクトップ用の順番でスタイルが指定・継承されています。

モバイル用CSSは、すべてのデバイスで適用される。

タブレット用CSSは、幅481px以上のデバイスで適用される。

デスクトップ用CSSは、幅769px以上のデバイスでのみ適用される。

という事になっています。
カスタマイズの時は、これを良く理解していないと、迷って解らなくなってしまいます。

でも、継承のおかげで、とても効率的なソースになるのは間違いない事です。

それでは、また次回にて。