CSS実験室(inside,block,段組み<3-10段>など事例あり)
CSS実験室
少しずつCSSがわかってきましたが、思うままにあやつるには、まだまだ。
意図に反し、予期せぬ結果になってしまうことが多いです。
いつか完全制御したいです。
フォントタグ
リストスタイルポジション
行間隔を空ける
display
- block と inline
- block (グローバルナビゲーションの横並びリンクをブロックにする)
ささやかな発見
- font-sizeをbodyに設定すると、文字以外の、たとえば画像も影響を受ける。
font-sizeを900%にすると、画像の上下に大きなスペースが空く。 - line-heightで、200%と2emとは微妙に差異が生じる場合もある。
- line-heightを、(ulではなく)liに指定しなくてはいけない。
- メモ帳で、(Enterキーで)改行すると、htmlで見た場合、改行はしていないが、微妙なスペースが間に入る。
- グローバルナビゲーションを、ヘッダー領域に、横に並べる方法は、display:inline; もしくは、float:left;
- ulに設定するか、liに設定するか
(再実験必要)- padding-leftは、ulに設定しても変化なし(ということもないか)。liに設定すると、行頭記号と文字との間隔に変化。
- margin-leftは、ulに設定しても変化なし(ということもないか)。liに設定すると、エリア左端ラインと行頭番号との間隔に変化。
段組レイアウト(多種ある方法の一例として)
(FMV上級模擬試験第3回規定問題、問題8を参考にした段組です)
(以下で動作確認済:2011年10月15日)(10月22日-IE7)
- Firefox 6.02、Safari 5.1、Google Chrome 14、Internet Explorer 7、8
Webクリエイター能力認定試験の参考書にて、2順目以降は参考書を開かず、
CSSがあらかじめ書いてある場合はそれらをすべて削除。
その上で、「完成したhtml」だけを見て、(htmlと)cssをメモ帳に書いている。
おかげで、CSSに対する「勘」が多少働くようになった。発見もある。
上級の自由問題を、参考書を開くことなく、CSSなどをカンニングすることなく、メモ帳で解けるようになるまでには、時間がかかった。
参考書を開く必要が生じるのは、coords(イメージマップの座標指定)くらい。色や画像名であれば参考書を開かずなくてもわかるようになった。