【XHTML＋CSS】05_CSSレイアウト

CSS Nite ビギナーズの連動書籍「現場のプロから学ぶXHTML+CSS）」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

さまざまなレイアウトパターン

コンテンツの幅は大きく分けて、ソリッドレイアウト（固定幅）、リキッドレイアウト（変動幅）、エラスティックレイアウトがある。

代表的なレイアウト

1カラムレイアウト
2カラムレイアウト
3カラムレイアウト

エラスティックレイアウト

文字サイズに応じてボックスサイズが変化するレイアウト。通常のレイアウトは幅を固定することが前提となるため、文字サイズを大きくするとレイアウトが崩れたり、文字サイズとのアンバランス感が目立つことになる。こうした問題を避けるために生まれた手法。
ソリッド（固定）レイアウトと同じようにCSSを制作し、幅や高さ、パディング、ボーダー、マージンなど、ボックスモデルに関するプロパティの指定方法をちょっと工夫するだけで実現できる（width、height、margin、border、paddingプロパティの値の単位をemで指定するなど）。

フリーレイアウト

きっちりとしたグリッドベースのデザインではなく、キャンバスに自由に絵を描いたようなデザイン。
背景とコンテンツを三次元で考えることが必要。

positionプロパティ

positionプロパティの注意点として、absoluteとrelative（起点）は必ずセットで使用する。

外部リンク

»CSS Nite in Ginza, Vol.28フォローアップ | CSS Nite公式サイト

こちらの関連記事もあわせてどうぞ！

返信をキャンセルする。