CSS03
リセットCSS
- ブラウザは自動的に各要素の周囲に空きを入れて表示するので、思いどおりに表示させるためには、最初に各要素の周囲の空きをすべてなしにする設定をしたあとで(リセットCSS)、各要素へ位置の指定をする。
- 従来は、全ての要素の空きをリセットするという意味で「*」を用いてmargin・paddingを0にしていた。
- 現在は、使う要素のみ指定している。ただし、margin・paddingが0の要素であっても、必ず指定する。
- listの文字色は、ulやolの属性値として指定する。
- listのマーカーはbackground外に表示される。
- listのマーカーの表示を消すlist-style-typeの記述は、リセットCSSの次に書く。
ページを構成する要素をdivでつくる
- 空箱のdivに名前をつけて、ページを構成する要素をつくる。
- containerはすべての要素を入れる箱。
- wrapperは複数の要素を入れる包み。
- 日本ではwrapperの中にcontainerを入れてしまうケースが見られるが、本来の使い方ではない。
- marginは横に対してのみautoで指定できる。
- Fire Foxのweb developerでCSSの適用状況が見られる。
- コンテキストメニュー→要素の検証
- コーディングの過程で逐次検証をすれば、ミスをなくしながら作業を進められる。
webの見やすさ・使いやすさ
- 官公庁のページはJIS X8341-3:2010に準拠。
- 海外では罰則規定がある場合も。
- webの資格はなくても食える。
CSSによるページ構築
- 全体の枠を作ってから、中の枠へ。
- webは要素を横に並べることが苦手。
- 情報の優先順位をもとに書く。表示したい順番に書いてはダメ。
- 表示位置を決めるのはCSS。
- content =日本人がいうコンテンツ。
- contents=目次。
要素を横に並べるfloat
- wrapperで横並びにする要素のcontentとsidebarを包む(divで入れ子にする)。
- contentをfloat:right、sidebarをfloat:leftと指定する。
- floatを指定すると、要素が浮かんだ状態になり、中身のなくなったwrapperは表示する面積がなくなる。
- これに伴ってwrapperの下に表示されるfooterがwrapperの位置まで、contentとsidebarの裏にもぐり込む現象が起きる。
- このとき、footerのbackgroundは裏にもぐり込むが、文字や画像はfloatしたcontentとsidebarの下に回り込んで表示される。
- これを防ぐために、wrapper側ではoverflow:hiddenを、footer側ではcrear:both(floatとの位置関係をrightもleftもcrearする)と両方で指定する。
- wrapperとfooter間に間隔をあける場合、crear:bothを指定したfooter側からmargin-topの指定は無効になるため、wrapper側からmargin-bottomを指定することになる。