編集するメディアクエリに対応するビジュアルメディアクエリバーをクリックします。
最終更新日 :
2021年12月20日
ビジュアルメディアクエリーなら、様々な画面サイズに対応した様々なブレークポイントで Web ページを表示して編集できます。
メディアクエリーは、様々な種類のデバイスまたはメディアに様々な形式のルールを定義してレスポンシブな Web サイトをデザインするための CSS3 モジュールです。 これらのルールに基づいて、画面サイズ、ブラウザーウィンドウサイズ、デバイスサイズと向き、解像度などの様々な条件に適応するようにコンテンツがレンダリングされます。
メディアクエリーは、@media ルールを使用して CSS に追加できます。 または、異なるメディアタイプ用に個別のスタイルシートを作成し、次の構文を使用してそれらを呼び出すことができます：
<link rel='stylesheet' media='all' href='normal.css' />
<link rel='stylesheet' media='print' href='print.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />
メディアクエリーはデバイス上のブラウザーによってチェックされ、対応する CSS ファイルが Web ページの表示に使用されます。
詳しくは、こちらの記事を参照してください。
HTML または CSS ファイルに関連するコードを追加することで、メディアクエリーを追加できます。 さらに、Dreamweaverでは以下を使用してメディアクエリを簡単に作成・管理できます：
これら 2 つの方法は基本的に視覚面で異なります。 コードを記述し、ライブビューで変更を表示する場合は、CSS デザイナーを使用します。 ページを様々なブレークポイントで視覚化しながらデザインの変更を行う場合は、ビジュアルメディアクエリーバーがより適しています。ビジュアルメディアクエリーバー
ビジュアルメディアクエリーバーは、ページに存在するメディアクエリーを視覚的に表現したものです。 これらのバーにより、様々なブレークポイントでの Web ページを表示したり、Web ページの各コンポーネントが異なるビューポートでどのように表示されるかを確認できます。 ページを様々なビューポートで表示しながら、そのビューポートに固有のデザイン変更を、他のビューポートのページデザインに影響することなく行えます。
ビジュアルメディアクエリーは、それぞれがメディアクエリーのカテゴリーを表す水平の次の 3 つのバーで構成されます。
緑：max-width条件を持つメディアクエリ
青 ：min-widthとmax-widthの両方の条件を持つメディアクエリ
紫 ：min-width条件を持つメディアクエリ
CSS Designerパネルに一覧表示されるメディアクエリにも、これらの色が表示されます。
各カテゴリーを 1 つ以上のメディアクエリーで構成できます。 メディアクエリーの条件がドキュメント内に定義されていない場合、対応するビジュアルメディアクエリーバーも表示されません。 例えば、ドキュメントにmin-width条件が含まれていない場合、紫のバーは表示されません。
ブレークポイントの値がバーに表示されます - min-widthはバーの左側、max-widthはバーの右側に表示されます。
A. ブレークポイント B. ビジュアルメディアクエリーバー C. メディアクエリーの追加アイコン D. Scrubber
ビジュアルメディアクエリを非表示または表示
ビジュアルメディアクエリーバーは、デフォルトでライブビューに表示されます。 バーを非表示にするには、ツールバーの「ビジュアルメディアクエリバーの切り替え」を使用します。
ブレークポイント間の切り替え
特定のサイズ（ブレークポイント）でページを表示するには、対応するメディアクエリーバーをクリックします。 ドキュメントがブレークポイントにスナップします。
または、スクラバーを必要なブレークポイントにドラッグすることもできます。
Dreamweaverドキュメントウィンドウのサイズに表示をリサイズするには、以下のいずれかの操作を実行します：
- ドキュメントの右側の「ダブルクリックして幅を合わせる」というテキストが表示されたグレーの領域内の任意の場所をダブルクリックします。 グレーエリアが表示されない場合は、スクラバーを左にドラッグします。
- ドキュメントウィンドウの下部にあるドロップダウンリストで「フル幅」オプションを選択します。
このオプションが表示されない場合は、スクラバーをドラッグしてwebページのサイズを小さくします。
メディアクエリを視覚的に編集
サイズ変更ハンドルが表示されます。 minとmax-widthの両方の値を持つメディアクエリの場合、バーの両側にリサイズハンドルが表示されます。
ハンドルを必要なサイズにドラッグします。
メディアクエリーが新しい min-width および max-width、またはその両方の値で自動的に更新されます。 メディアクエリーが正常に編集されたことを示す通知が表示されます。 ビジュアルメディアクエリーバーに対応するメディアクエリーが複数ある場合は、すべてのメディアクエリーが更新されます。 更新されたメディアクエリの数が成功メッセージと共に表示されます。
元に戻すには、Ctrl+Z（Win）またはCmd+Z（Mac）を押します。
または、ブレークポイントの値をダブルクリックして、キーボードで値を入力することもできます。
新しいメディアクエリを追加
スクラバーをルーラーに沿って必要なサイズにドラッグします。
をクリックします。
表示されるポップアップで、max-width オプションが既定で選択されます。 min-widthまたはmin-maxを指定するには、ドロップダウンリストで適切なオプションを選択し、必要な単位を選択します。
次に、メディアクエリを追加するCSSソースを選択します。
新しい CSS ファイルの作成を選択した場合、別のポップアップも表示されます。 新しいCSSファイルの名前とパスを指定し、OKをクリックします。
元に戻すには、Ctrl+Z（Win）またはCmd+Z（Mac）を押します。
メディアクエリを削除
対応するVisual Media Queryバーを右クリックします。
削除をクリックし、削除するメディアクエリをクリックします。
すべてのメディアクエリと関連するセレクターを削除することを確認するためにOKをクリックします。
元に戻すには、Ctrl+Z（Win）またはCmd+Z（Mac）を押します。
メディアクエリのコードを表示
必要なVisual Media Queryバーを右クリックし、Go To Codeにマウスを合わせます。
特定のブレークポイント範囲内のすべてのメディアクエリと、それらが宣言されているファイルのリストが表示されます。
必要なメディアクエリをクリックして、コードビューの対応するコードに移動します。
コードビューが表示されていない場合、ドキュメントは分割ビューに切り替わってコードが表示されます。
