dreamweaverでbootstrapレスポンシブスクリーンサイズ設定の3色のバー

Question

dreamweaverでレスポンシブ対応サイトを作っているのですが、スクリーンサイズを決定する3色（緑、紫、青）のバーの使い方がわかりません。

どれかをスライドさせると画角が変わり、アップするとスマホの表示サイズが変わるくらいまではわかったのですが、どのバーでどのスクリーンサイズやナビゲートが変わるかがいまいち分からないので教えてください。

nmatsuo5 · Answer

レスポンシブサイトは、デバイスの画面サイズによってメディアクエリーを定義して読み込まれるCSSの内容を変更するテクニックなんですが

緑は、「max-widthで定義されている最大画面サイズ」

紫は、「min-widthで定義されている最小画面サイズ」

青は、「max-widthとmin-widthで定義された中間のサイズ」

として表示されています。

Dreamweaverのウィンドウサイズを変更してみると、各バーの値を起点に読み込まれるCSSが変化することが分かると思います。

Dreamweaverのメディアクエリーの作成と使用方法については、以下のサイトの解説が詳しいと思いますので、そちらを参照してみて下さい。

Sign up