今回はメディアクエリーについて説明します メディアクエリーとは、CSSの一部で デバイスのサイズに応じて、Webサイトのレイアウトとスタイルを 変える機能があり、モバイルフォン、タブレット、デスクトップや 様々な出力先に対応できます サイトを印刷する場合にも有効です Dreamweaver CCでは、メディアクエリーの 追加と更新が簡単にできます ご覧ください これは標準ビューですが ライブビューを最大表示しています 上部のこの部分が メディアクエリーバーです CSSコードのメディアクエリーを ビジュアル表示したものです クリックしたメディアクエリーに応じて サイトのサイズが変わるため 出力先による表示の違いを確認できます バーが表示されない場合は 左側のこのアイコンで表示できます メディアクエリーを非表示にするには 右側のグレー領域をダブルクリックします ここまでは、Dreamweaver CCの ライブビューでプレビューしましたが ブラウザーでも確認できます 右下の「リアルタイムプレビュー」ボタン このアイコンをクリックします メディアクエリーによるレスポンシブデザインを どのデバイスのブラウザーでも ライブプレビューでき リアルタイムに表示して、操作できます リアルタイムプレビューの設定については 別のチュートリアルがありますので そちらをご覧ください メディアクエリーの作成に使用したコードを確認しましょう 分割ビューに切り替えて 「styles.css」を選択します このサイトの一番下にあります メディアクエリーはこのような形式です @mediaが先頭に付きます 画面の幅に応じて 3つのビューがあります メディアクエリーでは ブラウザーでWebサイトを開くと そのブラウザーの幅に適した表示になります 例えば、タブレットで開けば このメディアクエリー内のCSSが適用されます この矢印を展開すると タブレット表示用のコードを確認できます このメディアクエリーも同様です デスクトップを想定した大画面表示用の設定です ウィンドウ／CSSデザイナーから CSSデザイナーパネルを開きます ソースウィンドウには このWebページに関連付けられた 外部と内部のスタイルシートが表示されます この例では「styles.css」があります。
クリックします 下に「@Media」があります メディアクエリーをクリックすると そのメディアクエリーに対応する セレクターが 下に表示されます セレクターセクションに メディアクエリーで定義されている すべてのセレクターが入っています サイトで定義されたすべてのメディアクエリーで グローバルスタイルもその1つです グローバルスタイルがこのサイト全体の基本であり この3つが、各画面で表示されたときに 基本スタイルに優先する メディアクエリーです グローバルは、モバイルデバイスです モバイルファーストでデザインを行うため モバイルデバイス用の スタイルとレイアウトを 最初に設定します つまり、幅768px未満のブラウザーを基本として サイトがそれよりも大きくなると セレクターが適用され タブレットやデスクトップサイズで最適な表示になります では、メディアクエリーを編集してみましょう まず使用するstyles.cssを 選択します この見出しを 編集しましょう hero-titleセレクターが使われています 旧デスクトップ用「992px」のみを 調整します 文字のサイズを大きくするには 変更するメディアクエリーをクリックして 下にある 「.hero-title」を選択します styles.cssコードでは その行が選択されますので そのままコードビューでも編集できます これがCSSデザイナーパネルです こちらもセレクターにある すべてのプロパティが表示されます 例として、フォントサイズを変更します クリック＆ドラッグします 実際には大きすぎますが メディアクエリーの切り替えによる 変化がわかるようにするためです パネルを閉じます 大画面にすると このように、適切なサイズで表示されます タブレットでも適切なサイズです それよりも小さい モバイルサイズにしても うまく調整されますが 992pxのメディアクエリーでは 極端なサイズになっていることが分かります CSSデザイナーパネルを使用しない方法もあります 編集するエレメントを選択すると エレメントディスプレイに「.hero-title」と表示されます 右クリックして、「コードへ移動」を選択します グローバルの「.hero-title」は 一番上です 次のメディアクエリーが 768pxです その次が、変更した992px 次が大画面用です 編集対象を選択します クリックすると 下部の該当する コード行へジャンプします こちらで直接値を編集します 「8.4vw」に戻します 説明のため、メディアクエリーのない ページを用意しています CSSデザイナーパネルで設定しましょう スタイルを設定する CSSシートを選択します ここでは、styles.cssを使用します 「@Media」の+記号をクリックします ドロップダウンリストの条件に応じて設定を追加します 「media」では出力先を指定します 画面への出力か 書式設定して印刷するかなどです これがそのコードです 「orientation」クエリーは 横長か、縦長か 「resolution」では 高解像度ならば、「144 dpi」などに設定します 下部ではコードが生成されます レスポンシブデザインのメディアクエリーのため 「min-width」を選択して 「768px」に設定します 初期単位はピクセルですが 他の単位への変更も可能です 複数の条件を設定するには、+記号をクリックします 「max-width」を「991px」に設定します 'and'ステートメントが追加されました 両方の条件を満たす場合に有効となる意味ですが 目的とは異なるため -記号をクリックして、2つ目を削除します 「OK」をクリックします メディアクエリーは CSSデザイナーパネルだけでなく メディアクエリーバーにもあります 最小幅を指定したので この矢印で メディアクエリーが開始される 最小値から、次のメディアクエリーまでの 範囲が示されます 最小幅が紫色で区別されているのも わかりやすいですね 別の例で説明を続けます 「max-width」を指定すると 緑色で表示されます 最小幅と最大幅を設定したものは 青色で表示されます 元のプロジェクトに戻りましょう 3つ目のメディアクエリーは styles.cssの下部にあります 一番下のメディアクエリーです ここにコードを追加しましょう 波カッコの中で 何度か改行します 作成済みのコードをペーストします このクラスセレクターが この見出しのスタイルを制御します フォントや間隔を変えてみてください 確認しましょう このメディアクエリーは CSSデザイナーパネルで作成したものです サイドバーをドラッグすると モバイルファーストのデザインなので 基本デザインの通りに 表示されます メディアクエリーの条件に達すると 「.hero-leadin」が上書きされます タブレットサイズに最適な大きさです これがメディアクエリーの仕組みです CSSデザイナーパネルで作成しましたが こちらは閉じるか、折りたたんで 今度はメディアクエリーバーで 作成してみましょう どちらの方法でも結果は同じですが よりビジュアル的に作成できます 任意の場所で +ボタンをクリックすると +ボタンをクリックすると 「max-width」と サイドバーの数値が表示されます ここでは、「min-width」と 「992px」を設定します 「新規CSSファイルを作成」を styles.cssに変更して 「OK」をクリックします この方法で作成しても CSSデザイナーパネルを使っても 結果は同じです コードの一番下に 「min-width」ができました 次に、作成済みのセレクターを追加します CSSデザイナーパネルでも追加できますが 私はここで、ペーストします 先ほどと同じ「.hero-leadin」クラスですが 992px以上で有効になります ここまでがモバイル用の設定 次のメディアクエリーで変わり 992pxになるとまた変わります バーをクリックしても、切り替わります メディアクエリーの説明は以上です このビデオのコードは このページからダウンロードできます 画面上部のライブビューと 下部のコード、CSSデザイナーパネルを 連動させ、メディアクエリーを使用すれば すばやく簡単にレスポンシブな Webサイトを構築できます Dreamweaver CCには他にも多数のチュートリアルがあります ぜひご覧ください
