1月の授業日記

1/16 ボックスモデル

セレクタの指定先

ボックスモデル

CSSでは各要素が「ボックス」と呼ばれる矩形領域を持ち、以下のような設定が行える

margin

ボックス同士の外側の間隔

border

paddingの外側に枠線が指定できる

padding

ボックスと内容物との余白

ボックスのサイズ

幅は親要素一杯高さは内容物のサイズだが指定できる

width,height

ボックスの大きさをpxで指定できる

ボックスのセンタリング

ボックスの左右のマージンを同じ値にする(auto)と真中に配置される

margin:auto

互換モードの解除

IEはデフォルトでCSSの指定が他と異なる古いIEとの互換モードになっているので切り替える必要がある

<!doctype html>

(doctype宣言)をhtmlの1行目に入れる

1/23 擬似クラスとフロート

リンクへのCSS

擬似クラス

文書構造では表せない状態などをセレクタに出来る

セレクタ:擬似クラス名{プロパティ:値}

aへの指定は擬似クラス要素に継続される

インライン要素のブロックレベル化

aは改行を伴わないのでサイズ指定ができず、文字幅によってクリックしやすさが変わる

display:block

ボックスモデルで指定ができるブロックレベル化要素にできサイズ指定ができる