CSS実験室

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

フォントタグ
  • 一行にまとめて書くと、違う結果になってしまう例 その1その2
リストスタイルポジション
行間隔を空ける
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に設定すると、エリア左端ラインと行頭番号との間隔に変化。
段組の計算をExcelに任せよう段組レイアウト(多種ある方法の一例として)

(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などをカンニングすることなく、メモ帳で解けるようになるまでには、時間がかかった。
(参考書を開く必要が生じるのは、mapのcoordsくらい。色も画像名も参考書を開かずなくてもわかる)