講師だって、最初は初心者だもの[番外]Dreamweaver CS5.5をチェック(2)〜マルチデバイス対応が格好イイ?!〜/森 和恵

投稿:  著者:  読了時間:9分(本文:約4,000文字)


こんにちは。森和恵です。
前々回に続き、Adobe Dreamweaver CS5.5の気になる新機能を紹介します。

今回は、「マルチスクリーン」と「メディアクエリー」機能をお話しします。
前バージョンにもあった機能が、さらに便利になりました。

マルチデバイスとは、iphone(320×480)・ipad(768×1024)・スマートフォン(メーカーによりさまざま。320×240、640×480、800×480など)・デスクトップ(ユーザー設定によりさまざま。1024×768以上)...など、画面解像度が異なる機器(デバイス)を指します。

機器ごとに見やすいレイアウトに最適化するのが、マルチデバイス対応のページです。マルチデバイス対応にするには、大きく分けて2つの方法があります。



●機器ごとに異なるHTMLページを作成する。
●HTMLページはひとつで、画面解像度ごとに最適化したCSSレイアウトを組み、メディアクエリーでCSSを切り替える。

 |メディアクエリーについての解説は、ここでは省きます(別の機会にお話
 |しますね)。詳しくは下記のサイトを参考にしてください。
 |【参考】CSS3のMedia Queries(メディアクエリー)の使い方と実装例
 |(coliss)
 |< http://coliss.com/articles/build-websites/operation/css/css3-media-queries.html >

今回ご紹介する「マルチスクリーン」と「メディアクエリー」機能は、メディアクエリーを利用したマルチデバイス対応のページを作る補助機能です。

さて、実際に見ていきましょう。

■サンプルファイルを手に入れましょう。

今回の機能を確認するには、マルチデバイス対応のサイトデータが必要です。下記サイトがメディアクエリーでのマルチデバイス対応で、ソースコードが公開されています。画面下の「互換サイト(マルチデバイス対応)のファイルをダウンロード」よりZIPファイルをダウンロードしておきましょう。解凍後、htdocsフォルダをDreamweaverでサイト定義しておきます。

 |【画面】< http://r360studio.com/dgcr/dgcr-extra5-1.jpg >

 |【参考】今すぐ始めようスマートフォン & タブレット対応
 |-アドビ & HTML5-
 |< http://adobe-html5.jp/ >
 |※ちなみにこのページ、ブラウザの横幅を変えると応じてレイアウトが可
 |変します。

 |【参考】Dreamweaverのサイト定義
 |< http://tv.adobe.com/jp/watch/learn-dreamweaver-cs5/6639/ >
 |※Dreamweaverの基本中の基本ですが、ファイルを扱うには、サイト定義
 |が必要です。

■メディアクエリーの設定

サンプルファイル(index.html)には、すでにメディアクエリーの設定が行われています。外部CSSファイルを参照するlink要素の media属性が下記のように指定されています。

media="only screen and (min-width: 0px) and (max-width: 320px)"

media属性では、画面(もしくは表示ウインドウ)幅の最小値(min-width)〜最大値(max-width)を決めています。この条件が満たされた場合に外部CSSファイルを参照します。

このページでは、画面解像度ごとに3つのlink要素が指定されています。

画面解像度が0〜320px(iphoneなどの低解像度スマートフォン)の場合は、iphone.cssを読み込み、321〜910px(タブレット用)の場合は、tablet.cssを読み込み、911px以上の場合は、desktop.cssを読み込みます。

例えば ipadの場合だと、縦置き(768×1024)状態ではtablet.cssを読み込み、横置き(10247×68)状態ではdesktop.cssを読み込みます。

 |【画面】< http://r360studio.com/dgcr/dgcr-extra5-2.jpg >

このメディアクエリーの設定をダイアログで行えるのが、「メディアクエリー」機能です。画面上のドキュメントツールバーの[マルチスクリーン]ボタンより[メディアクエリー]ダイアログを呼び出します。

 |【画面】< http://r360studio.com/dgcr/dgcr-extra5-3.jpg >
 |【画面】< http://r360studio.com/dgcr/dgcr-extra5-4.jpg >

[メディアクエリーを書き込み]では、複数ファイル対応にするために"サイト全体のメディアクエリーファイル"として外部CSSファイルに@importで指定するか、現在のファイルのみ対応にするために"現在のドキュメント"としてhead要素内に指定するかを選択できます。

 |HTMLファイルを保存しないと、"サイト全体の〜"は選択できません。

[実際の幅をレポートするようデバイスに強制する]では、ユーザー側の利用環境によらず、各デバイスの実際の幅を取得するためにhead要素内に下記のコードを追加します。
<meta name="viewport" content="width=device-width" />

その後、[+]ボタンを追加し、プロパティでメディアクエリーの指定を行います。

■マルチデバイスでの表示確認

各デバイスごとの表示確認をする機能が、「マルチスクリーン」機能です。今回のバージョンから、ドキュメントウインドウで直接表示ができるようになりました。

まず、デザインビューかライブビューに切り替えます。続いて[マルチスクリーン]ボタンから、表示したいデバイスを選択します。

 |【画面】< http://r360studio.com/dgcr/dgcr-extra5-5.jpg >
 |※数値指定の解像度だけではなく、縦横回転や
 |※メディアクエリーの条件が成り立つ時...などさまざま選べます。
 |※元に戻すときは[フルサイズ]を選択します。

例えば、横置きiphone(320×480の横方向)だと↓な風になります。

 |【画面】< http://r360studio.com/dgcr/dgcr-extra5-6.jpg >

CS5の時からあった[マルチスクリーン]ボタンから、[マルチスクリーンプレビュー]機能も残っています。こちらだと、3つ同時に確認できるのが便利です。

 |【画面】< http://r360studio.com/dgcr/dgcr-extra5-7.jpg >

■おまけ:Device Centralでリアルに表示確認

もっとリアルに表示チェックを行いたいときは、別ソフトの Adobe Device Centralを使います。Dreamweaverから連携で呼び出せます。ドキュメントツールバーの[ブラウザーでのプレビュー/デバック]をクリックし、[ブラウザでプレビュー Device Central]を実行します。
 |【画面】< http://r360studio.com/dgcr/dgcr-extra5-8.jpg >

テストデバイスから、確認したい機器を選択し、表示確認を行います。

 |REGZA Phone T-01Cの確認画面。
 |【画面】< http://r360studio.com/dgcr/dgcr-extra5-9.jpg >
 |ipad2の確認画面。画面下のボタンで画面の回転なんかもできます。
 |【画面】< http://r360studio.com/dgcr/dgcr-extra5-10.jpg >

 |あらかじめ、テストデバイスに機器を追加しておきます。
 |起動後のスタート画面から、[デバイスを参照]を選択します。
 |【画面】< http://r360studio.com/dgcr/dgcr-extra5-12.jpg >
 |次に機器を検索し、右クリック-[デバイスプロファイルのダウンロード]
 |からテストデバイスを追加しておきます。
 |【画面】< http://r360studio.com/dgcr/dgcr-extra5-11.jpg >


...ということで、報告終わりです。
今回も短めですね。ごめんなさいです。(汗)

次回は、JQuery Mobileなどスマホサイトを作るのに便利な機能をご紹介の予定です。ではでは。(<ゝω・)綺羅星☆

※記事へのご意見・ご要望は下記より受付ま〜す。お手柔らかに。
< http://bit.ly/gIHFfu >

【 森和恵 r360studio 〜 Web系インストラクター 〜 】
<site: http://r360studio.com > <twitter: http://twitter.com/r360studio >
<mail: r360studio@gmail.com >

近況報告:先月・今月と立て続けにWeb系イベントに参加して、インプットしてきました。まとめたいレポートも一杯あるのに消化しきれてません。もったいない...。今週は消化する週に充てたいと思います。週末頃に< http://r360studio.com >を覗くとレポートがアップされてるかも?

明日は、師匠↓たちと天王寺で飲み会です。
私にWebって何なのかを教えてくれた、素敵な先生です。
「説明できないデザインはするな!」という教えが、いまだに心に響いてます。
久しぶりにお会いするので、楽しみ〜。
<加々本裕樹: http://ja.wikipedia.org/wiki/%E5%8A%A0%E3%80%85%E6%9C%AC%E8%A3%95%E6%A8%B9 >