2013年3月24日日曜日
CSS3について5
続、Dreamweaver CS6 の可変グリッドレイアウト（CSS3の Media Queries）んいついて
です。（レスプンシブデザイン）
回線の貧弱なスマートフォンでの閲覧も考慮することについてです。
この可変グリッドレイアウト機能で実装できるレスポンシブWebデザインのサイトは、
パソコンはもちろん、電話回線接続でのスマートフォンでも閲覧されることになります。
マルチデバイスに対応するということは、速い回線、遅い回線、
パソコンと比較してスペックの低いモバイル端末など様々な環境で
閲覧されることと等しいということです。
よって、サイトの設計段階からの時点でよくよく考慮し、
不要なコンテンツは極力排除する、サイズの大きい画像に使用を控えるなど、
なるべく”軽い”サイトを目指すしかないようです。
サイト全体のスタイルを仕上げるにあたって、DreamweaverCS6の可変グリッドレイアウト
であれば、比較的簡単に実装できますが、
可変 Div の中身については、今回の作例も従来通りのサイト制作の
手法の延長線で実装可能です。
ただし、HTML5の新機能やCSS3の新しいプロパティなどは、
サイトがレガシーなブラウザで閲覧されることも考慮した上で
使用するに注意が必要のようです。
IE6,7,8用の調整を行うには、
可変グリッドレイアウトのHTMLの冒頭にある、
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
HTML要素負に付与された class により、IE6,7,8だけに
適用するスタイルを指定することができます。
例は以下のとおりです。
/* IE6,7,8 のみに適用*/
.oldie #footer nav li { display: inline; zoom: 1; }
/* IE 6 のみに適用*/
.ie6 #footer nav li { (スタイルの指定) }
/* IE7 のみに適用*/
.ie7 #footer nav li { (スタイルの指定) }
/* IE8 のみに適用*/
.ie8 #footer nav li { (スタイルの指定) }
「.oldie」や「.ie6」などのクラス名の子孫セレクタを利用することで、
旧バージョンのIEのみに適用されるようなスタイルの指定ができます。
また、その他、IE6,7,8のHTML5の使用の仕方などもありますが、
まだ、実装経験がないので、やった後に書きたいと思います。
登録:
コメントの投稿
(
Atom
)
0 件のコメント :
コメントを投稿