こんにちは、デジタルスケープの伊藤和博です!

今週も、Dreamweaverの新機能に関してご紹介していきます。

前回のHTML5に絡めて、今週はCSS3のメディアクエリーについてご紹介します。


マルチスクリーンプレビュー


Dreamweaverで作成したページは、「どのデバイスで見たときに、どのように見えるか?」をシミュレーションできるようになりました。これは、CSS3の勧告にある「メディアクエリー」の定義を反映したものですが、このボタンはデザインビューの中でクリックするとアクティブになります。




マルチスクリーンをクリックすると、マルチスクリーンプレビューパネルが表示され、現在のページが、メディアクエリーで設定されているウインドウサイズに合わせて、それぞれ表示されます。




サイズの変更を行う場合は、マルチスクリーンプレビューパネルの右上にある「メディアクエリー」をクリックすると、各デバイスの最小サイズと最大サイズを指定することが可能です。







@media


具体的に各デバイス毎に応じたサイズを指定する場合には、CSSでは@mediaを使って指定します。

@mediaでは、各デバイス毎に応じた指定をすることが可能ですが、今回はウインドウサイズの違いに応じて異なる結果になるように、以下のように指定します。




@mediaの次にデバイスを記述し、{xxx}のxxxの箇所に、そのメディアで表示させるCSSを入れます。

上記の例では、スクリーンに表示した時に、ウインドウサイズの幅が最大320pxまでは背景色を緑、幅最小400pxまでは背景色オレンジ、とCSSで指定していますが、これをマルチスクリーンプレビューパネルで見ると以下のように見ることが可能です。




固定されたウインドウサイズの場合ではなく、ウインドウサイズをユーザーが変更した場合にそのサイズに連動して表示が変わるため、上記の例では、ウインドウサイズが400pxを超えると背景色がオレンジになり、320px以下になると背景色が緑に、ということになります。

これから様々な携帯デバイスが登場すると、「どのサイズの時に、どのように表示する」ということを意識する必要性がより高まってきますね。




もっとDreamweaver CS5 を使いこなすなら!
Dreamweaver CS5の使い方・基本トレーニングの受講がオススメです!




イトウ先生が、Twitterを始めました!
みなさんもぜひ、フォローしてくださいね!

http://twitter.com/itoh_sensei