マニュアルキャンセル

Dreamweaver でのメディアクエリーの作成と使用

検索

最終更新日 : 2021年4月28日

ビジュアルメディアクエリーなら、様々な画面サイズに対応した様々なブレークポイントで 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 デザイナーパネルに表示されるメディアクエリーにもこれらの色が設定されます。

各カテゴリーを 1 つ以上のメディアクエリーで構成できます。メディアクエリーの条件がドキュメント内に定義されていない場合、対応するビジュアルメディアクエリーバーも表示されません。例えば、ドキュメントに min-width 条件が含まれていない場合、紫のバーは表示されません。

ブレークポイントの値がバーに示されます（バーの右側に min-width、バーの右側に max-width）。

A. ブレークポイント B. ビジュアルメディアクエリーバー C. メディアクエリーアイコンの追加 D. Scrubber

ビジュアルメディアクエリーの表示と非表示

ビジュアルメディアクエリーバーは、デフォルトでライブビューで表示されます。バーを非表示にするには、ツールバーにあるビジュアルメディアクエリーバーの切り替えを使用します。

ブレークポイントの切り替え

特定のサイズ（ブレークポイント）でページを表示するには、対応するメディアクエリーバーをクリックします。ドキュメントがブレークポイントにスナップされます。

または、Scrubber を目的のブレークポイントにドラッグします。

ビューを Dreamweaver ドキュメントウィンドウのサイズに変更するには、次のいずれかの操作を実行します。

ドキュメントの右側の「ダブルクリックして幅を合わせる」というテキストが表示されたグレーの領域内の任意の場所をダブルクリックします。グレーの領域が表示されていない場合は、Scrubber を左にドラッグします。
ドキュメントウィンドウの下部にあるドロップダウンリストで「全幅」オプションを選択します。

このオプションが表示されない場合は、Scrubber をドラッグして Web ページのサイズを縮小します。

メディアクエリーを視覚的に編集する

編集するメディアクエリーに対応するビジュアルメディアクエリーバーをクリックします。

サイズ変更ハンドルが表示されます。min および max-width の両方の値を持つメディアクエリーの場合、サイズ変更ハンドルは、バーの両サイドに表示されます。

サイズ変更ハンドル
ハンドルを目的のサイズにドラッグします。

メディアクエリーが新しい min-width および max-width、またはその両方の値で自動的に更新されます。メディアクエリーが正常に編集されたことを示す通知が表示されます。ビジュアルメディアクエリーバーに対応するメディアクエリーが複数ある場合は、すべてのメディアクエリーが更新されます。更新されたメディアクエリーの数が、成功メッセージと共に表示されます。

注意：

操作を取り消すには、Ctrl+Z（Win）または Command+Z（Mac）を押します。

または、ブレークポイントの値をダブルクリックして、キーボードを使って値を入力できます。

新規メディアクエリーの追加

Scrubber をルーラーに沿って目的のサイズにドラッグします。
クリック .

メディアクエリーの追加
表示されるポップアップで、max-width オプションが既定で選択されます。min-width（最小幅）または max-width（最大幅）を指定するには、ドロップダウンリストの適切なオプションを選択し、必要な単位を選択します。

次に、メディアクエリーを追加する必要がある CSS ソースを選択します。

新しい CSS ファイルの作成を選択した場合、別のポップアップも表示されます。新しい CSS ファイルの名前とパスを指定して、「OK」をクリックします。

注意：

操作を取り消すには、Ctrl+Z（Win）または Command+Z（Mac）を押します。

メディアクエリーの削除

対応するビジュアルメディアクエリーバーを右クリックします。
「削除」をクリックし、削除するメディアクエリーをクリックします。
「OK」をクリックして、すべてのメディアクエリーと関連するセレクターを削除するかどうかを確認します。

注意：

操作を取り消すには、Ctrl+Z（Win）または Command+Z（Mac）を押します。

メディアクエリーのコードを表示する

目的のビジュアルメディアクエリーバーを右クリックし、「コードへ移動」にマウスカーソルを合わせます。

特定のブレークポイント範囲内のすべてのメディアクエリーとそれらが宣言されたファイルの一覧が表示されます。
目的のメディアクエリーをクリックして、コードビューの対応するコードに移動します。

コードビューが表示されていない場合は、ドキュメントが分割ビューに切り替えられ、コードが表示されます。

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト

詳しく見る

Dreamweaver でのメディアクエリーの作成と使用

ビジュアルメディアクエリーバー

ビジュアルメディアクエリーの表示と非表示

ブレークポイントの切り替え

メディアクエリーを視覚的に編集する

新規メディアクエリーの追加

メディアクエリーの削除

メディアクエリーのコードを表示する

ヘルプをすばやく簡単に入手

アドビサポートコミュニティ

サポート