Web Directions East : 2 日目
2008年11月8日 土曜日
Web Directions East 2 日目のお手伝いに行ってきました。2 日目の内容は
当日の朝は小雨が降っていて、準備で走っていたらズサーという感じに激しい転び方をしてしまいました。ちょうど通りかかった人がいて吹っ飛んだ携帯を拾っていただいてしまいました。かなり恥ずかしかったけどありがとうございます…。
こんな感じでお手伝いをしながらでしたが、講義も一部聞くことができました。気になったことのメモ。
- 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 のスピーカーのかたたちとご飯を食べてきました。
最後に写真撮ってもらってきました。最近の課題は英語 !! もっと勉強します。
トラックバックURI
http://www.yomotsu.net/wp/wp-trackback.php?p=475
この記事へのコメントはまだありません
コメントフォーム