- October 22, 2005 3:56 PM
- Movable Type | XHTML CSS
というキャッチーな見出しを付けてみたけれど、(X)HTML(以下HTML)なんてのは自由に書いて、伝えたい人たちに思っている事が伝わるならば、それでいーんです。と、最初に言っておくよ。
自分の作ったWEBページのメンテナンス性を上げたいと考える人や、ソースコードを簡潔にしてダイエットしたいと思う人も中にはいるでしょう。複雑なBlogツールのテンプレートソースに四苦八苦してる人、単にW3Cの仕様に準拠させたページを作りたいと思ってる人も多いかもしれない(それは素晴らしいことだよ！)。
コンテンツの利用価値を高めたいと思っている人達、そういった方へ向けて、僕がよく見かける「もっといい方法があるよ」と思えるHTMLの記述を、代替ソースとセットで書いていきます。
項目をa要素やbrを使って整形する
リストをリンクのためのA要素でマークアップして並べるという、ブログのメニュー部分などでよく見られる記述です。
<div id="menu"> <div>コンテンツメニュー</div> <a>About</a><br /> <a>Profile</a><br /> <a>Gallery</a><br /> <a>Links</a><br /> </div>
メニューなどのリストや箇条書きを示すには、ul,liという要素タイプが用意されています。使い方もシンプルで、項目をliでマークアップし、リストが順不同なら外側をul、項目に順番や順位がある場合はolでマークアップします。
また、上の例だと「コンテンツメニュー」という文字がdiv要素としてマークアップされていますが、この場合、「コンテンツメニュー」は見出しになりえるので、見出しを表すh1～h6要素タイプでマークアップしましょう。(DL,DT,DDという方法もあります)
<div id="menu"> <h2>コンテンツメニュー</h2> <ul> <li><a>About</a></li> <li><a>Profile</a></li> <li><a>Gallery</a></li> <li><a>Links</a></li> </ul> </div>
li要素はブロック要素なので、多くのブラウザーでは前後に改行が入り整形されます。わざわざbr要素を入れないですみますね。
CSSでリストを横並びにすることも出来ます。
2重マークアップ
ひとつの要素をさらにdiv要素などでマークアップする記述です。これもメニュー部分でよく見られます。旅行鞄をわざわざ大きな袋に入れて持ち歩かないですよね。
<div id="navi"> <ul> <li><a>About</a></li> <li><a>Profile</a></li> <li><a>Gallery</a></li> <li><a>Links</a></li> </ul> </div>
上のソースでは、liのリスト項目をulで「順序の無い箇条書き」と明示しているのに、それを更にdiv要素としてマークアップしています。ほとんどの要素に対してid属性やclass属性は付けることが出来ますので、これなら直接ul要素にidを付加させましょう。
<ul id="navi"> <li><a>About</a></li> <li><a>Profile</a></li> <li><a>Gallery</a></li> <li><a>Links</a></li> </ul>
<div class="heading"> <h2>2重マークアップ</h2> </div>
上も意味のないマークアップと言えますね。class="heading"(見出し)というのは既にh2で明示しています。(ちなみに、classの値はただの文字列ですので明示たということにもなりません)
妥当な文書構造を保ったまま複雑な見栄えを設定する
見栄えのためにマークアップを増やすのは良い事だとは言えませんが、CSSの力不足からHTMLの記述を変更しないと表現できない見栄えはあります。そういった場合、出来るだけ妥当なHTMLの文書構造を保てるように要素を追加してあげます。
<div id="navi"> <h2>コンテンツメニュー</h2> <ul> <li><a>About</a></li> <li><a>Profile</a></li> <li><a>Gallery</a></li> <li><a>Links</a></li> </ul> </div>
リストに対する見出しを作り、divにはul要素とhx要素をグループ化するという役目ができました。まぁ妥当な文書構造だと言えます。これだけの要素があれば、角丸などの少し複雑な見栄えでもCSSで表現できますね。h2要素を表示したくない時は div#navi h2 {display:none;}とCSSに書いておけば表示されません。
【図1】
【図1】では、body直下すべてをdivで囲うという2重マークアップがされています。wrapper(包む)やcontainer(容器)というid名が付けられて2重3重にされていることもあります。固定幅中央寄せなどのレイアウトをするために追加されたdivだと思われますが、これもdiv#header,div#content,div#footerと、divで文書を３つのグループに分けることで"やや"妥当なHTML文書構造にすることができ、１つのdivで囲うよりもさらにCSSでの装飾の幅を広げることが出来ます。例えばdiv#headerとdiv#footerを角丸にするなどなど。
下は、3つのdivで固定幅中央寄せするCSSの記述。
div#header,
div#content,
div#footer {
width: 650px;
margin: auto;
}
【図2】
div#headerの中身には文書のタイトルやナビゲーション、パンくずリストや概要を含められるとheaderらしいのですが、構造によっては中身が１つでdiv#headerで2重マークアップになってしまうこともあります。div#headerを削除しても特にレイアウトに問題ないのなら作る必要もありません。
トップページではdiv#headerに含めるものがあり、カテゴリーページには含めるものが無い、ということもありますが、この場合はサイト全体の階層構造を統一する目的でカテゴリーページにもdiv#headerを作ってあげてもいいと思います。
見栄え依存なid名、class名
idやclassの値となる文字をコンピュータは理解しません。アルファベットA-Za-zで始まり、後はアルファベット,[0～9][_][.][,]を組み合わせた名前にするという約束はありますが、それが守られれば、class="oppai"でもid="unko"でも構わないのです。でも、これでは名前から直接意味が理解できないので、管理しやすいとは言えませんね。
では、管理しやすい名前とはどういうものかと考えると、id属性やclass属性の名前を見ただけで、それらの属性が付いている要素を連想する事が出来れば良い名前と思います。
【図3】
【図3】左のメニュー部分のdiv要素にはid="left"と付けられ、右にはid="right"と付けられています。要素の位置を属性名にする名前付けは、直感的に要素が連想できて管理しやすいと思われますが、idの名前が要素の見栄えに依存しているので、もし、後々レイアウトを変更しようと思ったときにはHTMLも修正しないといけなくなってしまいます。(div#leftのメニュー部分を右に配置したくなった時など)
【図4】
【図4】では、要素持つ論理的な意味を属性名にしました。これで文書構造に変更が無い限り、HTMLを修正することはありません。
不要なclass
無意味なclassを増やすことは、HTMLが煩雑になるだけでなく、CSSでのメンテナンス性も下げてしまいます。
<div class="entry" id="entry0001"> <h2 class="entry_heading">不要なクラス</h2> <p class="entry_date">10/22</p> . . . . </div>
上のような記述の場合、h2.entry_headingは、その名の示す通り「エントリーの見出し」という位置付けですが、この見出しはclass属性をつけなくてもCSSの文脈セレクター(パターンマッチング)で特定することが出来ます。
div.entry h2 {...}
classを汎用的にする
また、エントリーの日付部分にp.entry_dateという名前をつけるより、p.dateとしておくことで、entry内に出現する日付以外にも使え、.dateクラスの汎用性があがります。
.date {
font-color: gray;
}
/* entry */
.entry p.date {
font-weight: bold;
}
/* ゲストブックスタイル */
div#guestBook dd.date {
background-color: #F7F7F7;
font-style: italic;
}
HTMLでclassの種類は減っても、結局はCSSで「この文脈の時にはこうする」と記述する事になります。class名を具体的にして複数に分けるか、抽象的なclassを文脈セレクターで使い分けるかは好みですが、同じ意味や役割を持ったものは見栄えも共通することが多いため、上手く使えば一貫したデザインを組むことが出来るようになります。また、ブラウザー側がCSS2の文脈セレクターに対応していけば、更に多くのクラスをなくすことができます。
アンカー用の空っぽ要素
同一文書内で特定の場所に移動させるためには、リンク先にフラグメントとなるid属性を指定します。この移動先にフラグメント専用の空っぽ要素を作ってる人を良く見かけます。
<body> <a id="top"></a> . .
<div class="entry"> <a id="entry0001"></a> <h2>フラグメント用空っぽ要素</h2> . . </div>
div要素でグループ化されている場合は、そのdivのidをフラグメントとして使います。divが無い場合は、見出し要素などにフラグメントを付けます。
<div class="entry" id="entry0001"> <h2>フラグメント用空っぽ要素</h2> . . </div>
最後に書くやつとか
CSSの研究は怠らないけど、(X)HTMLには無関心という人が増えているような気がします。いくら美味しいフリカケを作れるようになっても、白いご飯を上手く炊けないのではもったいないと思うのですが、いかんせん、HTMLの解説では難しい話になりがちですなんですよね。Blog運営してる人なんかにも読みやすいように、部分的に摘んで解説というのもいいんじゃないかなーなんて思って書いてみました。
あ、あと冒頭でも書いたけど、このエントリーは「HTMLを綺麗に書け！」という記事ではありません。自由に気軽にHTMLを書きまくって、そのうちふと「WEBってもっと便利くさい！」って思ったときにわかるとこだけ書き直せばいいと僕は思います。(X)HTMLを理解するとCSSもクソ面白くなるゾ～。
div要素の使い方を解説したページもありますので、興味ある方はぜひ読んでみてください。
- 2006-3/21追記
- Movable Type テンプレートを配布しました。
- Newer: 新動物占い
- Older: ソーシャルブックマーク
