Hatena::Groupcss

#DocSeri { style: boxtile; } このページをアンテナに追加 RSSフィード

2006-10-12CSSコーディングのためのHTMLコーディング

はじめに はじめに - #DocSeri { style: boxtile; } を含むブックマーク はてなブックマーク - はじめに - #DocSeri { style: boxtile; } はじめに - #DocSeri { style: boxtile; } のブックマークコメント

CSSには様々なメリットがある。見栄えのコントロールがより柔軟かつ強力になり、またメンテナンス性が格段に向上しアクセシビリティも高まる。良いこと尽くめだ。

しかし、今までHTMLだけで見栄えをコントロールしていた人がいきなりCSS移行しようとするのは結構難しい。そこには大きな発想の転換が必要だ。

はてなダイアリーの構造などを参考にしながら、「CSSデザインするためのHTML」について書いてみたいと思う。

構造を意識する 構造を意識する - #DocSeri { style: boxtile; } を含むブックマーク はてなブックマーク - 構造を意識する - #DocSeri { style: boxtile; } 構造を意識する - #DocSeri { style: boxtile; } のブックマークコメント

HTMLは文書構造を記述するための言語である。見出しには順番に応じてh1〜h6までのタグを振り、文章は総てpで段落分けする。文中に箇条書きが登場するときはui/olやdlマークアップ

只の文書ならこれだけでも良いが、Webページの場合はこれだけでは要素が足りない。また、自在にデザインしようと思ったときにも、これだけでは要素数が不足してしまう。例えば-----メニュー部分はどんなタグで囲うべきか?リンクの機能としてのAタグは当然としても、それらの関係性や意味性をどうマークアップしたら良いのか。

XMLなら必要に応じてタグ自体を定義することもできるが、HTMLで使える要素は限られる。そこで使われるのが、意味を与えられていないタグdivとspan、及びCSS上で重要になる属性classidである。


classidは、言わばHTML存在しない分類を、個別にラベリングすることで実現する機能と言える。例えば前述したメニューなどは、HTML上にメニューを示すタグがない。そこでulリスト化するなりdivで括るなりしたところにclass="menu"などとラベリングすることで、それがメニューであることを示すようにする。

classidの違いは一般名詞固有名詞のようなもので、classが複数の箇所に利用されるようなラベリングに用いられるのに対し、idはあくまで1箇所にしか用いられない要素に対するラベリングである。先の例では、メニュー自体はclassで、メニュー内の各項目はidラベリングするのが適当だろう。


既にマークアップされている要素についてはそれぞれにラベリングすれば済むが、ときには適切な要素自体が存在しないこともある。例えば見出しといくつかの段落を纏めて一括りに扱うにはどうすれば良いだろうか。或いは見出しの一部に日付を挿入する場合は?

divとspanは、そのような「既存のタグでは対応できない」部分のマークアップに用いるためだけの「空のタグ」である。それは区切りであることを示すという以上の意味を持たず、classidによってラベリングされることを前提とした存在である。

その違いはdivがブロックレベル要素*1であるのに対しspanはインライン要素*2であるという一点のみ。

例えばはてなダイアリーの構造を見ると、日毎のタイトルを表すh2の中にspan class="date"によって日付けがマークアップされ、また日毎のタイトルとその下の同じ日のエントリ全体をdiv class="day"が囲い、またエントリ毎の見出しh3とエントリ内の段落を纏めてdiv class="section"が囲っているのが判る。


このように、ただHTMLマークアップするだけではなく、構造を考え単位を細かく区切ってラベリングしてゆくことで、この後のCSSによるデザインコントロールが容易になる。

*1:hxやpのように、独立したブロックとして扱われ、要素の前後に改行が行なわれるような要素

*2:文中に埋め込み可能な要素

トラックバック - http://css.g.hatena.ne.jp/DocSeri/20061012