Dreamweaver CCでWordPressテーマをちょっと加工 第3回：メディアクエリーを利用してマルチデバイスに対応しよう
メディアクエリーを利用すれば、WordPressサイトの見た目を、様々なデバイスの表示サイズに合わせて変えることができます。今回は、［ライブビュー］でメディアクエリーを使った表示にする方法、［CSSデザイナー］パネルでメディアクエリーに関連したCSSスタイルを変更する方法を解説します。
メディアクエリーをサポートしているDreamweaver CC
メディアクエリーとは
メディアクエリーとは、様々な条件に応じて、HTMLに適用するCSSスタイルを変えるという仕組みで、CSS3から登場しました。その条件には、デバイスの画面解像度やサポートしている色数などを設定できます。
メディアクエリーを利用することで、1つのHTMLファイルと1つのCSSファイルでありながら、PCとスマートフォンそれぞれにおいて最適な画面構成になるように表示を変えることが可能です。マルチデバイス対応のWebページを作成する際には、非常に便利な仕組みです。
例えば、「screen and (min-width:673px)」と指定した場合、画面サイズの横幅が673px以上のときに特定のCSSスタイルが適用されます。
Dreamweaver CCのメディアクエリー関連機能
Dreamweaver CCにはメディアクエリーに関連した機能が用意されています。例えば、メディアクエリーが設定されたサイトを［ライブビュー］で表示し、表示サイズを変更すると、その表示サイズに応じたCSSスタイルが適用されます。
また、第2回「CSSデザイナーパネルで、コードを書かずに見た目を変更しよう」で取り上げた［CSSデザイナー］パネルでは、メディアクエリーに関するCSSを表示・編集することもできます。
本連載で利用しているWordPressサイトのテーマ「Twenty Fourteen」は、メディアクエリーを利用してマルチデバイスに対応しています。今回は、Dreamweaver CCのこれらの機能を使って、WordPressサイトのCSSファイルの中で、メディアクエリーに関連した部分を調整する方法を解説します。
ライブビューでメディアクエリーを使った表示にする
Dreamweaver CCでは、画面サイズを擬似的に変えて、メディアクエリーを使った表示にすることができます。
Twenty Fourteenのindex.phpを開き、［ライブビュー］に切り替えます。画面右下にある［モバイルのサイズ］ボタンをクリックすると、表示サイズが横幅480px、高さ800pxになります。それと同時に、CSSファイルにあるメディアクエリーの指定によって、横幅480pxで使用されるCSSスタイルが適用されます。
［タブレットのサイズ］ボタンをクリックすると、表示サイズが横幅768px、高さ1024pxになります。
［デスクトップのサイズ］ボタンをクリックすると、表示サイズが横幅1000pxになります。
表示サイズに応じたCSSスタイルが適用され、デザインが変わることが確認できます。
これら3つの設定済みの表示サイズ以外を指定したい場合は、一番右側にある表示サイズの表記部分をクリックするとメニューが表示されるので、他の表示サイズを選びます。
メニューの［サイズの編集］を選ぶと、任意の表示サイズを作成できます。［環境設定］ダイアログボックスの［ウィンドウサイズ］カテゴリが開くので、［＋］ボタンをクリックして、新しい表示サイズを登録します。登録すると、先程のメニューから呼び出すことが可能です。
このメニューからは、［横方向］や［縦方向］の表示を切り替えることもできます。［モバイルのサイズ］で横向きに持ったときの表示などをシミュレートすることが可能です。
このメニューの下には、「screen and ～」という文字列が列記されています。これは、CSSファイルに記述されているメディアクエリーの指定です。チェックされているのが、現在適用されているメディアクエリーの指定です。チェックのないメディアクエリー指定をクリックすると、その指定に応じた表示サイズとCSSスタイルに切り替わります。
［CSSデザイナー］パネルでメディアクエリーに関連したCSSスタイルを変更する
［CSSデザイナー］パネルを使って、メディアクエリーに関連したCSSスタイルを変更したり、新規にCSSスタイルを作成したりできます。今回は、ヘッダー部分の背景色を変えてみましょう。方法は色々とありますが、前回同様［インスペクト］を利用します。
まず、［CSSデザイナー］パネルの［@Media］ペインで、CSSスタイルを変更したいメディアクエリーの指定を選びます。ここでは、「screen and (min-width:401px)」を選択します。すると、表示サイズの横幅が401pxに切り替わります。
この状態で［インスペクト］をクリックし、ブログのヘッダー部分の「div.header-main」をクリックします。
［CSSデザイナー］パネルの［セレクター］ペインで「.header-main」が選択されているので、そのまま［プロパティ］ペインの「background-color」から適当な色を選択します。これで、横幅401px以上の表示サイズでは、ブログのヘッダー部分の背景色に指定した色が適用されるようになります。
次に、［@Media］ペインで「screen and (min-width:673px)」を選択します。
［セレクター］ペインを見ると、「.header-main」が2つあります。これは、この表示サイズの場合、「.header-main」について別々の2カ所でスタイル定義が行われており（メディアクエリーを利用していないスタイル定義と、メディアクエリーを利用したスタイル定義）、それらが計算されて表示されていることを表しています。
それぞれにマウスオーバーすると、「.header-mainで定義された＠media screen and (min-width:673px)」、「.header-mainで定義されたグローバル」とツールチップが表示されます。「グローバル」というのは、メディアクエリーを利用せずに定義されているスタイルのことです。メディアクエリーの条件に当てはまらない場合に適用されます。
今回は、［@Media］ペインで「screen and (min-width:673px)」を選択しているので、「.header-mainで定義された＠media screen and (min-width:673px)」と表示された「.header-main」を選択し、［プロパティ］ペインの「background-color」から適当な色を選択します。
これで、横幅673px以上の表示サイズでは、先ほどの「screen and (min-width:401px)」の背景色の指定が上書きされ、今指定した背景色が適用されます。
指定が終わったら、確認してみましょう。［モバイルのサイズ］ボタンをクリックします。ブログのヘッダー部分の背景色は青色です。
［タブレットのサイズ］ボタンをクリックします。背景色がピンク色に変わりました。
［モバイルのサイズ］では表示サイズの横幅が480pxのため、「screen and (min-width:401px)」で指定した背景色が適用され、［タブレットのサイズ］では横幅が768pxのため、「screen and (min-width:673px)」で指定した背景色が適用されます。これでアクセスするデバイスの画面幅によって背景色が変わるようになります。
メディアクエリーを使った新しいセレクターを定義する
［インスペクト］モードを利用して、ブログのヘッダー部分の「div.header-main」をクリックしたあと、［CSSデザイナー］パネルの［@Media］ペインで「screen and (min-width:810px)」を選択します。
［セレクター］ペインを見ると「.header-main」が3つあります。しかし、マウスオーバーしても「.header-mainで定義された＠media screen and (min-width:810px)」は出てきません。
これは、メディアクエリーのmin-wdith:810pxでは「.header-main」が定義されていないためです。そのため、表示サイズが810pxあるときに適用されるセレクターたち、「.header-mainで定義されたグローバル」、「.header-mainで定義された＠media screen and (min-width:401px)」、「.header-mainで定義された＠media screen and (min-width:673px)」が列記されています。
画面サイズが810px以上の場合に、「.header-main」に対して適用するスタイルを新規に定義しましょう。［セレクター］ペインの［+］ボタン（セレクターの追加）をクリックし、「body」と書かれたところを削除して、「.header-main」と入力します。
これで新しいセレクターが「＠media screen and (min-width:810px)」のところに定義されたので、［プロパティ］ペインの「background-color」から適当な色を選択します。
［モバイルのサイズ］ボタン、［タブレットのサイズ］ボタン、［デスクトップのサイズ］ボタンをクリックし、背景色を確認しましょう。［デスクトップのサイズ］は表示サイズの横幅が1000pxあるため、「screen and (min-width:810px)」で指定した背景色が使用されます。
このような手順を踏むことで、複雑なメディアクエリーを使ったCSSスタイルの定義も比較的楽に設定することができます。
Dreamweaver CCを使うことで、WordPressサイトの複雑なテーマも画面を見ながら変更が可能なことが理解できたかと思います。Dreamweaver CCでは、WordPressサイトのテーマで使われているテンプレートタグなどもサポートしているので、一からテーマを作成していく場合でも強力にサポートしてくれます。［CSSデザイナー］パネルを使い込んで、自分らしいテーマを作ってみてください。