96's blog

WEBサイト制作科 6ヶ月コース

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 developerCSSの適用状況が見られる。
  • コンテキストメニュー→要素の検証
  • コーディングの過程で逐次検証をすれば、ミスをなくしながら作業を進められる。

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を指定することになる。