Web ページを作成します。
最終更新日 :
2021年4月27日
メディアクエリーを使用すると、報告されたデバイス特性に基づいて 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)">
メディアクエリの本格的な紹介については、Adobe Developer Center の Don Booth のアーティクルwww.adobe.com/go/learn_dw_medquery_don_enをご覧ください。
W3C からのメディアクエリの詳細については、www.w3.org/TR/css3-mediaqueries/をご覧ください。
メディアクエリーの作成
Dreamweaver では、サイト全体のメディアクエリファイルまたはドキュメント固有のメディアクエリを作成できます。
サイト全体のメディアクエリファイル
ファイルを含むサイト内のすべてのページの表示設定を指定します。
サイト全体のメディアクエリファイルは、サイト内のすべてのメディアクエリの中央リポジトリとして機能します。このファイルを作成した後、表示にファイル内のメディアクエリを使用する必要があるサイト内のページからリンクします。
ドキュメント固有のメディアクエリ
メディアクエリがドキュメントに直接挿入され、挿入されたメディアクエリに基づいてページが表示されます。
修正／メディアクエリーを選択します。
次のいずれかの操作を実行します。
サイト全体のメディアクエリファイルを作成するには、「サイト全体のメディアクエリファイル」を選択します。
ドキュメント固有のメディアクエリーを作成するには、「現在のドキュメント」を選択します。
サイト全体のメディアクエリーを作成する場合は、次の操作を実行します。
「指定」をクリックします。
「新規ファイルを作成」を選択します。
ファイル名を指定して「OK」をクリックします。
一部のデバイスは実際の幅をレポートしない可能性があります。デバイスに実際の幅をレポートさせるには、「デバイスに実際の幅をレポートさせる」オプションが有効になっていることを確認してください。
このオプションを選択すると、次のコードがファイルに挿入されます。
<meta name="viewport" content="width=device-width">
次のいずれかの操作を実行します。
「+」をクリックして、メディアクエリファイルのプロパティを定義します。
標準のプリセットから始めたい場合は、「デフォルトプリセット」をクリックします。
表の行を選択し、「プロパティ」の下のオプションを使用してプロパティを編集します。
説明
CSS ファイルを使用する必要があるデバイスの説明です。例えば、携帯電話、テレビ、タブレットなどの説明を入力します。
最小幅、最大幅
デバイスから報告された幅の値が指定の範囲内である場合に、この CSS ファイルを使用します。
メモ
デバイスに対して幅の範囲を明示的に指定しない場合は、「最小幅」と「最大幅」のいずれかを空白にしておきます。 例えば、幅 320px 以下の携帯電話をターゲットにする場合は「最小幅」を指定しないことがよくあります。
CSS ファイル
「既存のファイルを使用」を選択し、デバイス用の CSS ファイルを参照します。
まだ作成していない CSS ファイルを指定したい場合は、「新しいファイルを作成」を選択します。CSS ファイルの名前を入力します。「OK」をクリックするとファイルが作成されます。
「OK」をクリックします。
サイト全体のメディアクエリーに、新しいファイルが作成されます。 ファイルを保存します。
サイト全体のメディアクエリ：既存のページの場合、すべてのページの<head>タグにメディアクエリファイルを含めるようにしてください。
www.adobe.com:のサイト全体のメディアクエリファイルである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ファイルを選択します。
メモ
サイト全体のメディアクエリファイルを変更しても、別のまたは以前のサイト全体のメディアクエリファイルにリンクされているドキュメントには影響しません。
「保存」をクリックします。
メディアクエリに基づいて Web ページを表示
メディアクエリで指定されたサイズが、マルチスクリーンボタン/ウィンドウサイズのオプションに表示されます。メニューからサイズを選択すると、次の変更が表示されます：
サイズの指定を反映して、ビューのサイズが変更されます。 ドキュメントのフレームサイズは変更されません。
メディアクエリで指定されたCSSファイルがページの表示に使用されます。
