Web Directions East : 2 日目

2008年11月8日 土曜日

Web Directions East 2 日目のお手伝いに行ってきました。2 日目の内容はEric Meyer(エリック メイヤー)氏による CSS に関するワークショップが行われました。

当日の朝は小雨が降っていて、準備で走っていたらズサーという感じに激しい転び方をしてしまいました。ちょうど通りかかった人がいて吹っ飛んだ携帯を拾っていただいてしまいました。かなり恥ずかしかったけどありがとうございます…。

こんな感じでお手伝いをしながらでしたが、講義も一部聞くことができました。気になったことのメモ。

• float はもともとは画像などを回り込ませるためのもので、レイアウトにことは想定していない。しかし、clear を利用できるからレイアウトにつかわれるようになった
  • position にも clear のようなものがあったらもっとレイアウトにつかわれていたかもしれない。
  • なぜ margin-top が clear の仕組みにつかわれたかという質問が参加者からあった。これについてEric Meyer(エリック メイヤー)氏は、2.1 の仕様にはかいてある。新しい仕組みを実装するより、既にあるものを利用したほうがいいし、こうなってしまったものは仕方が無いといった感じの返答だった
• Web ブラウザーが持つデフォルトのスタイルシートについてのセッションも行われた。Firefox の初期設定のスタイルが書かれている html.css を開いてそれをいじったり少し見たりという感じの内容　(file:///Applications/Firefox.app/Contents/MacOS/res/html.css に格納されている)
  • ブラウザの初期のフォントサイズが 16 px の理由はモザイクのデフォルトのフォントサイズが 16 px だったから
  • body の margin が 8 px なのはモザイクが body に 8 px の margin をつけていたから
  • 同様に blockquote のマージン、リンク箇所のスタイルなどもモザイクを参考にされたらしい
  • html.css のには -moz- の接頭辞がついたセレクターも一部ある。これは、デフォルトのスタイルでも Mozilla が独自に作らなくてはいけない箇所があったため。既存 CSS では不十分ということがわかる。
  • 互換時は同ディレクトリ内の quirks.css を読みに行く。
  • html.css をいじればユーザー CSS できる。また、これを消せば、完全な無スタイル (プレーンテキストのような状態) になる。(これは各要素が初期状態では display : inline だからですね)
  • Opera や IE ではまた微妙に違ってくる。そのためにリセットをする。
• positioning
  • top : 0; bottom : 0; height : auto; を指定すればコンテイナーブロックの高さまで伸びる。
  • positioning はレイアウトにすごくよさそうだけどabsoluteが適用されると通常のレイアウトのフローとは完全に切り離されてしまいはみ出してしまったりする。クリアランスの方法もない。なのでカラムのレイアウトなどには向いていない。
• 属性セレクター
  • div[class=example] と div.example では一見同じに見えても役割が違う。例えば <div class='example style1'></div> のような HTML ソースの断片には、前者は適用されないが、後者は適用される。
  • 「.」は HTML 用。クラス属性のないマークアップ言語でも CSS を柔軟に使うために属性セレクターがある。

他にもいろいろやっていましたが聴けず。参加された方などの blog などを参考にしたいと思います。全体的には知識の再確認といった感じの内容でした。

ワークショップ中にあった質問の内容についてせっかくなので復習してみました。

• Cascading Style Sheets, level 1 には an element will be moved below any floating element としか書かれておらず、matgin-topを利用するとは書かれていなかった
• CSS2 Specification には The top margin of the generated box is increased enough that the top border edge is below the bottom outer edge のように書かれており、top border edge まで top margin を増やすと書かれている
• Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification には This position is determined after the top margin of the element has been collapsed with previous adjacent margins (including the top margin of the parent block). のように書かれている

昔は margin-top を使うことにはなっていなく曖昧だったけど、CSS 2 では margin-top を利用すれば新しい仕組みを用意しないでいいから margin-top を利用してクリアランスすることにしたんですねー。

終了後、Web Directions East のスピーカーのかたたちとご飯を食べてきました。Eric Meyer(エリック メイヤー)は紳士な感じで、Jeremy Keith(ジェレミー キース)は喉を痛めてしまっていて声を出すのがつらそうでした。あと、タチコマがお気に入りの様子でした。Doug Schepers(ダグ シェパーズ) (SVG の人) がとても面白い方でした。他にもすごい人が目の前にいるのですが、英語…

最後に写真撮ってもらってきました。最近の課題は英語 !! もっと勉強します。