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
ボックスモデルで指定ができるブロックレベル化要素にできサイズ指定ができる