すべての環境に同じファイルがDLされることになってしまうのが問題。
スマートフォンでは必要以上に大きなファイルをDLすることになってしまったりする。
また、スマートフォン閲覧用に位置情報機能を組み込んだ場合、
デスクトップ閲覧には不要なHTMLやJavaScriptをDLすることになる。
メディアクエリは、表示をコントロールすることはできても、ファイルのDLを制御できない。
個々のデバイスごとつくり込む場合は、この点への考慮が必要になる。
デバイスごとの最適化を追求するなら、個別にHTMLを作成したほうが、
よりユーザーの満足度、ユーザーエクスペリエンス を向上させられる可能性は高い。
しかし制作/運用コスト、そして今後ますます増加するであろうデバイスの種類を考えると、
「レスポンシブなデザイン」のように複数のデバイスで
HTMLを共有するというアプローチの重要性は高まりそうである。
「レスポンシブなデザイン 」では、「%」や「em」のような、相対値による指定を多用する。
たとえば、img要素のwidthをピクセル数で指定するかわりに100%と相対値で設定することによって
画像が含まれている領域に合わせて大きさが変わる。
もちろん全て相対値指定する必要はない。
ボーダーやパディングをピクセル指定する場合は、box-sizingにborder-boxを指定すれば
widthに100%を設定してもデザインが崩れるのを防げる。
DW5の最新アップデートでは、正式にHTML5/CSS3を利用した開発ワークフローがサポートされた。
その１つである「マルチスクリーンプレビュー」は、メディアクエリに対応すべく追加された機能。
これは、同時に３種類の画面サイズをそれぞれ異なるスタイルが適用された状態で確認が可能。
body―header領域（ページタイトルやロゴを表示する領域）
―content領域（コンテンツを表示する領域）
content―main領域（主要な情報を表示、レイアウトが変わっても常にページ左上に表示）
―sub領域（３つのsection要素から構成され、各sectionはカラム数に応じてその配置を変える。）
各section領域の位置は、使用するCSSによって決定される。
そして、どのCSSを使用するかは、HTML内に記述されたメディアクエリによって選択される。
用意されているCSSは、デスクトップ用、タブレット用、スマートフォン用の３種類。
デスクトップ用CSSだけはfloat属性を使って複数のカラムが表示される。
●CSS
<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:910px)">
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and(min-width:911p)">
この場合のCSS指定。0～320ピクセル、321～920ピクセル、921ピクセル以上という画面幅を条件として、
メディアクエリによって３種類のCSSファイルから選択される。
デスクトップ用のCSSにはさらにメディアクエリが含まれていて、
ブラウザの幅によっては３つのsection領域をすべて横に並べる４カラム表示まで対応している。
メディアクエリをサポートしていないブラウザでは、ウィンドウ幅によらず２カラムのレイアウトで表示される。
メディアクエリによってCSSを切り替えることで、
レイアウト以外の最適化も可能になっている。
たとえば、1カラム表示でsub領域がmain領域の下に配置されるときは、
sub領域にもmain領域と同様のボーダーや影が表示される。
また、スマートフォン用のCSSをでは、見やすさを考慮して大きめのフォントが指定されている。
この他に、タッチデバイスの最適化を行うことも可能。
１つのHTMLファイルを、スマートフォンからデスクトップまで、さまざまな種類の画面に積極的に適応させるという新しいデザイン手法。
表示幅に応じて、カラムの幅、コンテンツのレイアウトも動的に変化する。
基本となる要素
１：カラムの幅やイメージの大きさなどを相対値で指定すること。
⇒これにより、表示するウィンドウの幅に合わせて、カラムの幅やカラム内のコンテンツの大きさが決定されるようになる。
⇒しかしこれだけでは、ウィンドウの幅が大きく変わった場合の対応が難しい。320ピクセル幅の画面と、1024ピクセル幅の画面ではどちらかが使いにくくなってしまう。
２：メディアクエリ
⇒メディアクエリ を使用してウィンドウ幅に応じてCSSを切り替えれば、カラム数をウィンドウ幅に応じて増減させることが出来る。
このように、小さな変更には相対値を用いたレイアウトのもつ流動性で対応し、
大きな変化にはCSSの切り替えによるレイアウトルール自体の変更で対応する、というのが
「レスポンシブなデザイン」の考え方。
カラム数が動的に変わるため、コンテンツを再配置可能なモジュール構造として設計する必要がある。
したがって、幅や位置が固定のHTMLページと比較して、ビジュアルデザインを行う際の制限が多くなることが注意点。
デザイナーには、基本的なCSS3のレイアウト機能の知識と、
モジュールの並べ替えとして実現されるデザインへの洞察力が求められることになる。
HTML5についかされた新しい機能の１つ。
メディタイプの構文を拡張し、
メディア属性に関する条件を記述できるようにしたもの。
たとえば、表示幅に応じてCSSファイルを切り替えることが可能。
アドビシステムズhttp://adobe-html5.jp/
アドビシステムズのHTML5/CSS3特設サイト。
ブラウザ幅に応じて画面が３カラムから１カラムへと変化するが、
使用されているHTMLは同じもの。
サンプルのソースが提供されている。
