マニュアルキャンセル

メディアクエリーの作成

検索

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

メディアクエリーを使用すると、報告されたデバイス特性に基づいて CSS ファイルを指定できます（レスポンシブデザイン）。メディアクエリーはデバイス上のブラウザーによってチェックされ、対応する CSS ファイルが Web ページの表示に使用されます。

例えば、次のメディアクエリーでは、幅が 300 ～ 320 ピクセルのデバイスに対して phone.css ファイルが指定されています。

<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 320px)">

メディアクエリーについて詳しくは、アドビデベロッパーセンターの Don Booth の記事（www.adobe.com/go/learn_dw_medquery_don_jp）を参照してください。

W3C のメディアクエリーについて詳しくは、www.w3.org/TR/css3-mediaqueries/ を参照してください。

メディアクエリーの作成

Dreamweaver では、サイト全体のメディアクエリーファイルを作成することも、ドキュメント固有のメディアクエリーを作成することもできます。

サイト全体のメディアクエリーファイル

サイト内でこのファイルをインクルードしているすべてのページに適用される表示設定を指定します。

サイト全体のメディアクエリーファイルは、そのサイトのメディアクエリーすべてに関する中央リポジトリとして機能します。このファイルを作成した後は、表示のためにファイル内でメディアクエリーを使用することが必要なサイト内のページに、サイト全体のメディアクエリーファイルへのリンクを作成します。

ドキュメント固有のメディアクエリー

この種のメディアクエリーはドキュメント内に直接挿入します。ページの表示は、そのページに挿入したメディアクエリーに基づいて実行されます。

Web ページを作成します。
修正／メディアクエリーを選択します。
次のいずれかの操作を実行します。
- サイト全体のメディアクエリーファイルを作成するには、「サイト全体のメディアクエリーファイル」を選択します。
- ドキュメント固有のメディアクエリーを作成するには、「現在のドキュメント」を選択します。
サイト全体のメディアクエリーを作成する場合は、次の操作を実行します。
1. 「指定」をクリックします。
2. 「新規ファイルを作成」を選択します。
3. ファイル名を指定して「OK」をクリックします。
デバイスによっては、報告してくる幅の情報が実際の幅と一致しない可能性があります。必ず実際どおりの幅を報告することをデバイスに対して強制するには、「実際の幅をレポートするようデバイスに強制する」オプションを有効にする必要があります。

これを有効にすると、次のコードがファイルに挿入されます。
```
<meta name="viewport" content="width=device-width">
```
次のいずれかの操作を実行します。
- 「+」をクリックし、メディアクエリーファイルのプロパティを定義します。
- 標準的なプリセットを基にして設定を開始する場合は、「デフォルトプリセット」をクリックします。
表内の行を選択し、「プロパティ」でそれらの行のプロパティを編集します。

説明

指定の CSS ファイルを使用するデバイスの説明です。例えば、携帯電話、テレビ、タブレットなどの説明を入力します。

最小幅、最大幅

デバイスから報告された幅の値が指定の範囲内である場合に、この CSS ファイルを使用します。

注意：

デバイスに対して幅の範囲を明示的に指定しない場合は、「最小幅」と「最大幅」のいずれかを空白にしておきます。例えば、幅 320px 以下の携帯電話をターゲットにする場合は「最小幅」を指定しないことがよくあります。

CSS ファイル

「既存のファイルを使用」を選択し、該当するデバイス用の CSS ファイルを選択します。

使用する CSS ファイルをまだ作成していない場合は、「新規ファイルを作成」を選択します。CSS ファイルの名前を入力します。「OK」をクリックするとファイルが作成されます。
「OK」をクリックします。
サイト全体のメディアクエリーに、新しいファイルが作成されます。ファイルを保存します。

サイト全体のメディアクエリー：既存のページについては、使用するメディアクエリーファイルを、すべてのページの <head> タグでインクルードする必要があります。

次の例は、www.adobe.com/jp サイト全体のメディアクエリーファイル mediaquery_adobedotcom.css に対するメディアクエリーリンクを示しています。

<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">

既存のメディアクエリーファイルの使用

新しい Web ページを作成するか、既存のページを開きます。
修正／メディアクエリーを選択します。
「サイト全体のメディアクエリーファイル」を選択します。
「指定」をクリックします。
メディアクエリーの CSS ファイルを作成済みの場合は、「既存のファイルを使用」を選択します。
参照アイコンをクリックし、ファイルを選択して指定します。「OK」をクリックします。
「サイト全体のメディアクエリーファイル」を選択します。
必ず実際どおりの幅を報告することをデバイスに対して強制するには、「実際の幅をレポートするようデバイスに強制する」オプションを有効にする必要があります。これを有効にすると、次のコードがファイルに挿入されます。
```
<meta name="viewport" content="width=device-width">
```
「OK」をクリックします。

サイト全体のメディアクエリーファイルの切り替え

前にメディアクエリーダイアログボックスで指定したサイト全体のメディアクエリーファイルを別のファイルに切り替えるには、次の手順を実行します。

サイト／サイトの管理を選択します。
サイトの管理ダイアログボックスで、サイトを選択します。
「編集」をクリックします。サイト定義ダイアログボックスが表示されます。
左側のパネルで、「詳細設定」の「ローカル情報」を選択します。
右側のパネルで、「サイト全体のメディアクエリーファイル」の「参照」をクリックし、メディアクエリー CSS ファイルを選択します。

注意：

サイト全体のメディアクエリーファイルを切り替えても、その他のメディアクエリーファイルや以前のサイト全体のメディアクエリーファイルにリンクしているドキュメントは影響を受けません。
「保存」をクリックします。