だいたい決まった構造の HTML を書くようになってきたので、俺の場合を紹介してみる。body 以下を書く。
- body
- (div#all)
- h1#top
- a
- div.section#navigation
- h2
- (p#skip-to-main-content)
- a
- map
- ul
- li#navigation-home
- a
- 以下似たようなのが続く
- div.section#content
- div.section
- h2
- 内容
- 以下似たような(ry
- div.section#footer
- address
おおむね上のような感じ。っていうか ol, li で書くとすげぇ大変なんですが!!
これはもちろん現実的にこうなっただけであって、いろんな妥協に溢れている。
body 直下の div#all なんてもちろんいらない要素だけど、実際問題 CSS 書くときに、これがあるだけで、クロスブラウザ用の無駄にややこしいハックを減らせるので、安全になる。幅も広がる。
div#navigation map なんて、パっと見変な風に見えないかもしれないけど、ぶっちゃけた話、こじつけられた div 要素みたいなもの。意味的には問題ないので、使ってみると結構便利。ただし display: block を書かないとハマるときがある。こいつには一枚多く背景に画像突っ込めるわけだ。あと実は p#skip-to-main-content も、アクセシビリティの配慮とか、そういうの関係なく、あると便利な要素の一つ。サイトによっては書かなかったり (そもそもナヴィゲーションがないとか) するけど。
できるだけ意味をこじつけて、div じゃない要素を使おうとしているだけ。いろいろ置換してけば div 厨になるんです。なんでもいいけど、悪いのは微妙な仕様の CSS と、その CSS に対応してない IE なんですよ!! 俺は悪くない! 放せ!
- トップ
-
sw
-
俺的 XHTML 構造
- トップ
-
web
-
俺的 XHTML 構造
- トップ
-
csS
-
俺的 XHTML 構造