Dreamweaverでカスタムメディアクエリを作成する方法 - 流体グリッドレイアウト機能を使用してページを作成するときにダミー

流体グリッドレイアウト機能を使用してページを作成すると、Dreamweaverによって自動的に対応するメディアクエリが作成されますが、独自のカスタムメディアクエリを作成し、独自のCSSルールをターゲットにすることができます。

メディア照会は、印刷用に最適化された代替ページデザインを作成するなど、他の用途に10年以上ウェブ上で使用されてきました。メディアクエリは、スクリーンやプリント（最も一般的な2つ）などのメディアタイプと、高さや幅などの特定の機能をチェックするオプションの式で構成されています。最も一般的に使用されるメディアタイプは

<！すべてのデバイスに適しています。

print：印刷プレビュー用に設計され、ページ印刷時に表示されます。
screen：任意の画面に表示されるコンテンツ用
ハンドヘルドメディアタイプほとんど使用されなくなり、携帯電話などの小さな画面、限られた帯域幅、およびビットマップグラフィックスのみをサポートするモノクロディスプレイを備えた他のデバイスにのみ最適です。 iOSデバイスおよびほとんどのスマートフォンは、スクリーンメディアタイプとして分類されています。

<！スタイルシートをDreamweaverのページデザインに適用する方法

スタイルシートをリンクしたり読み込んだりすることでスタイルシートを外部ファイルとして適用することも、スタイルシートを外部スタイルとしてヘッドスタイルに含めることもできますページのHTMLコード。インラインスタイルを使用してデバイスをターゲティングすることもできます。特定のルールを特定のデバイスにのみ適用する場合は、便利なオプションです。

これらのオプションを組み合わせて使用すると、複数の外部スタイルシートを同じWebページにインポートまたはリンクできます。ターゲットにするメディア機能を使用してメディアタイプを定義したら、スタイルをページに適用する方法を指定します。

<！ - 3 - >

Dreamweaverの外部スタイルシートでメディアクエリを使用する方法

外部スタイルシートを使用してメディアクエリを使用する方法は2通りあります。最初のオプションは、メディアクエリで区切られた複数のスタイルセットを持つ1つの外部スタイルシートにリンクすることです。これは、流体グリッドレイアウトを作成するときにDreamweaverがスタイルをリンクする方法です。

2番目のオプションは、2つ以上の別々の外部スタイルシートを各HTMLページにリンクし、各スタイルシートにメディアクエリを含めることです。いずれにしても、CSSとHTMLのコードは別々のファイルに保存され、タグによってそれらが結び付けられます。

すべてのメディアクエリと関連スタイルを1つのファイルまたは別々のCSSファイルに保存するかどうかにかかわらず、追加のスタイルシートを任意のHTMLページにリンクすることもできます。たとえば、別のスタイルシートに別のスタイルセットを組み込むことができます。別のスタイルシートは、ページがプリンタに送信されるときにページをフォーマットするように設計されています。

Dreamweaverでメディアクエリを作成する方法

Dreamweaverで好きなだけメディアクエリを作成し、1つまたは複数のメディアファイルに含めることができます。 Dreamweaverで新しいメディアクエリを作成するには、次の手順を実行します。

[CSS]パネルを開くには、[ウィンドウ]→[CSSスタイル]を選択します。

「ソース」パネルで既存のスタイルシートを選択するか、「ソース」パネルでプラス記号（+）をクリックして新しいスタイルシートを作成します。

CSS Designerパネルの@Mediaパネルのプラス記号（+）をクリックします。
メディアクエリの定義ダイアログボックスが開きます。
最初のドロップダウンリストからメディアを選択し、2番目のドロップダウンリストから[画面]を選択します。

各ドロップダウンリストの右側にカーソルを移動して、プラス記号を表示させ、プラス記号をクリックして新しいフィールドを追加します。
Media Queriesダイアログボックスに新しいフィールドが表示され、方向を指定できます。このフィールドはオプションですが、タブレットまたはスマートフォンの横向きおよび縦置きのビュー用に異なるデザインを作成する場合によく使用されます。向きに基づいて追加のレイアウトを作成しない場合は、マイナス記号をクリックしてこのフィールドを削除します。
注意：

プラス記号とマイナス記号は、ダイアログボックスの右側にカーソルを置いた場合にのみ表示されます。

カーソルをドロップダウンリストの右側に移動し、プラス記号をもう一度クリックしてフィールドを追加し、最小幅条件を入力します。 [メディアクエリ]ダイアログボックスに[最小幅]フィールドが表示され、クエリのターゲットに使用する最小幅を指定できます。最小幅は重要です。メディアクエリは、指定した最小から最大の幅の範囲に基づいてスタイルをターゲットにするため、次の手順で説明します。
カーソルをドロップダウンリストの右側に移動し、プラス記号を3回クリックしてフィールドを追加し、最大幅条件を入力します。

ダイアログボックスに[最大幅]フィールドが表示され、クエリのターゲットに使用する最大幅を指定できます。
OKをクリックします。

Media Queriesダイアログボックスが閉じ、メディアクエリが生成され、CSS DesignerパネルのSourcesパネルで選択したスタイルシートに追加されます。
選択したスタイルシートにメディアクエリを追加するには、手順3〜8を繰り返します。別のスタイルシートにメディアクエリを追加するには、手順2〜8を繰り返します。

メディアクエリは、さまざまなスタイルシートに保存できますが、1つの外部スタイルシートにすべて保存する方が効率的です。これは、各スタイルシートを別途サーバーからダウンロードしなければならず、帯域幅が増えます。複数のメディアクエリを含む1つの長いスタイルシートをダウンロードする方が、複数のスタイルシートをダウンロードするよりも少し効率的です。