FC2ブログ
CSS Nite Vol.16 Part.2
第二部は鷹野雅弘さんによる「CSSレイアウトに関する2、3のメモ」でした。

●CSSレイアウトの種類●
1.横幅固定(frozen)タイプ
2.横幅可変(liquid)タイプ
3.レイアウト可変(elastic)タイプ

●横幅固定(frozen)タイプ
1.左揃え…右側の余白が目立ってしまう
2.中央揃え…スクロールバーが表示されたり、されなかったりする

●横幅可変(liquid)タイプ
○利点
・横幅を%で指定するため、ブラウザ画面に余白が表示されない

×欠点
・解像度の高いモニタで見ると、1行あたりの文字数が増えてしまい、文章が読みにくくなる
・横幅を狭くすると、レイアウトが崩れてしまう

解決策としては、min-width, max-widthを設定する。しかしこの方法は、(Macを含む)IE 6以下では非対応である。

●横幅をem指定
横幅をemで指定してあげることで、たとえ文字サイズを変更したとしても、1行あたりの文字数が変わらないようにすることが出来る。

この例は上ノ郷谷さんのサイト2xupで見ることができます。

●レイアウト可変(elastic)タイプ

このタイプの例として挙げられていたサイト(ウィンドウの大きさを変更すると、それに伴いレイアウトも変更になる)
MMC computers ltd
Nickcowie.com
KuraFire Network

これにてCSS Nite Vol.16のレポート終了です!
スポンサーサイト



コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック