exp_Note

cssの勉強にと参加しました。
画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会
エディタとブラウザ(Firefox)を開いてカタカタとコーディング。3時間程度で作りました。細かいところは気にせず（汗）
作ったのがそのうち公開されるはずｗ
こちら↓に掲載させていただいております
color-chips.net Style
やってて気づいたことなどを。

正しい文書構造に素直に従ったcssを組むとcssハックが少なく済む

今回はhtmlがもう決められていたので楽でした(しかも自分で組むのと違って綺麗な文書構造。勉強になります)。css組むだけｗ
実際組むときはブラウザごとにcssの解釈が違うので(みんな独自にわがままにブラウザ作ってるのでここが面倒なところ。)、cssハックに大変時間がかかる(汗)
普段Firefoxで見ながら全部タグ手打ちで組んで、IE6で時々確認。ハッキング。の繰り返しで作ってます。他のブラウザは。。ははｗ
でも、今回cssハックが少なく。というよりぜんぜんやってなく、でもFFでもIEでも同じように見れました。正しい文書構造にしたがって素直なcss組むとこうなのかなー。と。

初めてエラスティックレイアウトにしてみました

「エラスティック(elastic)レイアウト」：伸び縮みするレイアウト。(ブラウザによって)文字サイズが変わっても、全体のレイアウトが崩れないようなWebデザインのこと。らしいですｗ(知らなかった)
普段は「固定幅レイアウト」(ボックスのサイズなどをかっちり固定値指定のデザイン)しかしてなかったので勉強にと挑戦しました。見やすくて結構いいかも。
使い分けできるといいと思った。動かしたくないところはpx単位で指定して、文字サイズ等々でレイアウト崩したくないところはem単位やex単位で指定。といった風に。
ちなみに「リキッドレイアウト」なんてものもあります。ブラウザのウィンドウサイズによって変更されるレイアウト。この場合は%単位で値を指定。ウィンドウの真ん中に表示させたいとか、中央そろえとかに使いますな。

参考

• Web標準の教科書- XHTMLとCSSで作る"正しい"Webサイト - 益子貴寛(著)
• 画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会