このマスターシリーズでは、Dreamweaver CS5.5の新機能の中からモバイル開発機能を中心に解説します。

AndroidやiPhoneなどのいわゆる「スマートフォン」は、PC(デスクトップ)向けのサイトをそのまま表示できるのが特徴です。しかし、スマートフォンの画面(スクリーン)はPCに比べて非常に小さく、そのまま表示できるとしても読みやすいとは言えません。また、タブレットも同様で、スマートフォンより画面が大きいとはいえ、サイトによっては読みづらいこともあります。

利用者のことを考えれば、やはり画面の大きさに適した見せ方をしたいところです。この対処方法としては、専用のHTMLとCSSを準備して振り分ける方法と、同じHTMLをCSSだけ切り替えて最適化する方法があります。Dreamweaver CS5.5では、これらの方法を用いてスマートフォン&タブレット対応サイトを制作する際に役立つ機能が大幅に強化されています。本記事では、Dreamweaver CS5.5の新機能を使って「同じHTMLをCSSだけ切り替えて最適化する方法」を解説します。

スマートフォン & タブレット対応サイトの例

まずは実際にスマートフォン&タブレット対応サイトを見てみましょう。アドビの特設サイト「今すぐ始めようスマートフォン&タブレット対応」をPCやスマートフォンで表示すると以下のようになります。

このサイトでは、2つのHTMLファイルを用意して、表示環境ごとに「振り分け」しているわけではありません。HTMLファイルは1つだけを用意し、適用するCSSだけを切り替えることで、表示を最適化しているのです。また、デバイスに合わせてとは限りません。PCのブラウザーで表示してウィンドウサイズを変更した場合でも、図3のようにウィンドウサイズに合わせて変わっていくのです。

つまり、ブラウザーのウィンドウの大きさ、スマートフォンやタブレットなどの画面の大きさに合わせて最適なWebページが表示されるようになっています。上記のサイトではこうした最適化を、CSS3から実装された「メディアクエリー」という機能を利用して実現しています(詳しくは後述)。本記事では、このメディアクエリーを利用したスマートフォン&タブレット対応について解説します。

※アドビの特設サイト「今すぐ始めようスマートフォン&タブレット対応」では、スマートフォン専用ページも用意しています。
http://adobe-html5.jp/sp/

DREAMWEAVER CS5.5で作る、スマートフォン&タブレット対応サイトの基本

それでは、Dreamweaver CS5.5を使って、メディアクエリーを利用したスマートフォン&タブレット対応サイトを作成してみましょう。すでにHTMLと各デバイス用のCSSが用意されている前提で、メディアクエリーで画面サイズごとにCSSを切り替える部分のみを実装します。サンプルは、アドビの特設サイトで配布されているサンプルを本記事用に加工したもので、下記のファイルが用意されています。

  • index.html:すべてのデバイスで表示されるHTML。CSSは何も適用されていない状態。
  • desktop.css:PCの画面サイズ用のCSS。
  • iphone.css:スマートフォンの画面サイズ用のCSS。
  • tablet.css:タブレットの画面サイズ用のCSS。

※メディアクエリーを利用したスマートフォン&タブレット対応サイトを作成する場合、どのようなHTMLやCSSを用意するかが重要となります。その際のポイントについては、「”レスポンシブなデザイン” のアドビ HTML5/CSS3 特設サイト制作者インタビュー」をご覧ください。

STEP1

サンプルの「index.html」をDreamweaver CS5.5で開きます。

STEP2

メニューから[挿入]→[メディアクエリー]を選んで、[メディアクエリー]ダイアログを表示します。[現在のドキュメント]と[実際の幅をレポートするようデバイスに強制する]にチェックを入れます。

STEP3

[+]ボタンをクリックすると、画面下部の[プロパティ]欄がアクティブになります。ここで、画面サイズの範囲とその範囲の時に適用するCSSを指定します。まずはスマートフォン向けの範囲とCSSを指定しましょう。

※[プロパティ]欄に入力後、[OK]ボタンをクリックするとダイアログが閉じてしまいます。続けて指定する場合は、[+]ボタンをクリックします。

STEP4

続けて[+]ボタンをクリックして、PC向けとタブレット向けの範囲とCSSを指定します。これで、各デバイス向けのCSSが指定できました。

各デバイスでの表示を確認する

各デバイスでの表示を確認してみましょう。PCのブラウザーで表示させるのは簡単ですが、スマートフォンやタブレットで直接確認するのは面倒です。そこで、Dreamweaver CS5.5に搭載された「マルチスクリーンプレビュー」機能を使えば、各デバイスでの表示を簡単に確認することができます。

ドキュメントツールバーの[マルチスクリーン]ボタンをクリックすると、[マルチスクリーンプレビュー]ウィンドウが表示され、3種類の画面サイズで表示した様子を一度に見ることができます。先程指定したCSSが画面サイズごとに適用されているのが確認できました。

[マルチスクリーンプレビュー]ウィンドウの右上の[ビューポートのサイズ]ボタンをクリックすると、ウィンドウ内の各画面サイズを変更することができます。[メディアクエリー]ボタンをクリックすると、前述の[メディアクエリー]ダイアログが表示されるので、同様に編集することも可能です。

また、[マルチスクリーン]ボタンの右端にある下三角ボタンをクリックすると、図10のような一覧が表示されて、デザインビューをその大きさに設定することもできます。ライブビューと組み合わせれば、ここでもプレビューすることができ、分割ビューなどで編集しながらリアルタイムに表示を確認することが可能です。

メディアクエリーとは

ここで設定したメディアクエリーについて、もう少し詳しく解説しておきましょう。前述のメディアクリーを設定したindex.htmlを開いてhead要素の部分を確認すると、次のようなコードが追加されています。

<!-- スマートフォン --> <link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width:0px) and (max-width:320px)"> <!-- タブレット --> <link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width:321px) and (max-width:900px)"> <!-- デスクトップ --> <link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:901px)">

通常のlink要素にmedia属性が加わっています。ここにメディアクエリーが指定されています。media属性自体は従来のCSSにもあり、印刷用の「print」やモバイル用の「handheld」など、端末に合わせてCSSを振り分ける際に利用している人も多いでしょう。CSS3のメディアクエリーでは、これに加えて画面サイズや、その他の様々な条件を指定することができるようになります。以下は、指定できる主な条件です。

width
表示領域の幅
height
表示領域の高さ
min-width
表示領域の最小幅
max-width
表示領域の最大幅
device-width
端末の幅
device-height
端末の高さ
orientation
端末の向き
resolution
画面解像度

上記のコードをみると、min-widthとmax-widthを使って、横幅0~320pxの場合は「css/iphone.css」を、横幅321~900pxの場合は「css/tablet.css」を、横幅901px以上の場合は「css/desktop.css」を読み込むように条件が設定されているのがわかります。

また、メディアクエリーは、以下のようにCSSファイル内でも定義することができます。

@media (orientation: portrait) { width: 320px; }

こうして、CSSの一部を細かく条件に合わせて変更することもできます。

おわりに

メディアクエリーを活用すると、簡単にスマートフォン&タブレット対応サイトを作ることができます。ただし、メディアクエリーの実装の検査をする際、様々なデバイスを準備したり、スクリーンの大きさを変えながら検査しなければならず、手間がかかります。Dreamweaver CS5.5を利用して、効率よく開発していきましょう。

関連記事