CSS実験室

少しずつCSSがわかってきましたが、思うままにあやつるには、まだまだ。
意図に反し、予期せぬ結果になってしまうことが多いです。
いつか完全制御したいです。

フォントタグ

• 一行にまとめて書くと、違う結果になってしまう例　その1、その2

リストスタイルポジション

• inside と outside

行間隔を空ける

• line-height と margin-bottom と padding-bottom

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（イメージマップの座標指定）くらい。色や画像名であれば参考書を開かずなくてもわかるようになった。