2015年 04月01日(12日目)のWEB制作の勉強メモ CSSレイアウト
スタイルシートによるレイアウト
- まずレイアウトを紙に書く
- #sidebar がレイアウト上では左にあるが、HTMLの中の記述は、#sidebar よりも #content(サイト内の重要な部分)を先に書く!(必須)
- #wrapper(#content と #sidebar を包んでいる id) は、float をするレイアウト用 id の親要素になり、floatの親要素には、必ず overflow:hidden; を記述する。
#wrapper { overflow: hidden; }
レイアウトCSSのライブラリやその解説サイト
Layout GALA
レイアウトのHTMLとCSSがセットになった見本のようなソースを公開しているサイト。
Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!
↓ YUI Library
JavaScript と CSS のライブラリをフリーで公開しているサイト。
YUI Library↓ YUI Library を解説しているサイト。web-tan.forum.impressrd.jp
2カラムレイアウト-(1)
おいしい○料理レ○トラン
- このレイアウトは #header #content #sidebar の順でHTMLに記述した場合、HTMLの仕様上 少しレイアウトが難しいが、margin に「-」を付ける事で対応する。
- 授業ではまだ初歩なので #header に #sidebar に入れるリンクメニューを含む事も可ということで進められた。