CSS3について1

今回は、CSS3についてですが、たくさん機能がありますが、
僕が取り組んでいる、DeamweaverCS6の可変グリッドレイアウト（レスポンシブデザイン）
機能に絞って表現してみようと思います。まだ、解っている範囲になります。

レスポンシブデザインは、１枚のファイルで、PC、タブレット、スマートホンなど各幅widthや
その変化によって、コンテンツの表示、非表示も設定できるという事です。

たくさんのレイアウト設定の中から、可変グリッドレイアウトを選択しますと、
上記の様に、あらかじめ最初に用意されている３つのディバイスの設定ができる

画面が出現します。ここで既に、CSS3の Media Queriesの設定が完了してしまいます。
Media Queries 自体は、CSS2）からある、MediaTypeの拡張です。

<link rel="stylesheet" href='style.css' type="text/css" media="screen" />

パソコン用のスタイルシート

<link rel="stylesheet" href='print.css' type="text/css" media="print" />

 

プリンタ用のスタイルシート

 

 

ということで、mediaごとにスタイルを割り振っていました。

 

CSS3のMedia Queriesは、さらに便利になり、デバイスの細かい仕様に応じて、

スタイルシートの割り振りを指定できるようになります。

 

・スクリーンサイズに応じて、CSSを使い分ける。

・デバイスの解像度に応じて、CSSを使い分ける。

などです。
スクリーンサイズごとに対応 … という感じですね！

ユーザーエージェントによって振り分けている
.htaccessやJavascriptやPHPではなく、CSSファイルの記述内の
命令で、振り分けられてしまうので、とてもシンプルで、軽いのです。

基本は、DIVタグ挿入でブロックをレイアウトしていくのですが、
その時に、ソースを追加するなどの作業は、全くなくて、グリッドレイアウト上に

表示されているDIVのボックスを、右側のハンドルで、左右に調節して
合わせていくだけです。

また、その時にCSS3のwidthがオートマチックに変化するわけですが、
この時の単位は、常に「％」で設定をしなくてはなりません。

PXでやってしまうと、固定幅になってしまい、ディバイスごとに表示が突き抜けてしまったり
短くなってしまったりしてしまいます。

細かい修正などしなくてはならない時は、100%がどの親タグになっているかを
確認しながらやっていくという事になります。

その辺は、慣れが必要かもしれません。

でも、ベースを決めてしまえば、後は楽勝ペースだと思います。

それでは、また次回にて・・・・・