【XHTML＋CSS】04_CSSデザインのための実用テクニック

CSS Nite ビギナーズの連動書籍「現場のプロから学ぶXHTML+CSS）」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

一般的なID名・クラス名から命名ルールを学ぶ

本文全体を囲むボックス（コンテナ）	container、wrapper、page、pagebody、all
ヘッダ	header、header-area
ナビゲーション	nav、navi、navigation
グローバルナビゲーション	global-nav、gnav
ローカルナビゲーション	local-nav、lnav
補足ナビゲーション	assist-nav、utility、utility-nav
パンくずナビゲーション	topicpath、breadcrumbs
コンテンツ全体	content(s)、container、wrapper
メインコンテンツ	main、maincontent(s)、content(s)、alpha、primary
サブコンテンツやサイドバー	sub、subcontent(s)、sidebar、beta、secondary
見出しと本文のまとまり	section、entrybody、article(s)
記事全体	article(s)、entry(-ies)
フッタ	footer、footer-area、copyright、publication
ロゴ	logo
キービジュアルやメインビジュアル	keyvisual、mainvisual
画像や写真、グラフなど	image、photo、fig、figure
検索	search、search-area、search-box
注釈、ヒント、本題から外れた補足や囲み記事	aside、hint、note
商品一覧	products、item-list、shopitems

複数の単語で構成するID名・クラス名は、キャメルケース（globalNav）、ハイフン区切り（global-nav）のどちらかを利用するのが一般的。アンダースコアはNetscape6など一部の古いブラウザで正しく解釈されない。

HTML5やmicroformatsで提唱されている名称を参考にする

header	ページヘッダ（head要素とは異なる）
footer	ページフッタ
nav	他のページへのリンクの集まり（ナビゲーション）
section	章、章のセクション、見出しがついたまとまり
article	ブログなどで掲載されている個々のエントリー
figure	ブロックレベルの画像

クラスの便利な使い方

見出しと本文を組み合わせたまとまりがページ内に複数出現するような場合、それぞれを

1
2
3

<div class="section">
...
<div>

で囲んでおくと、CSSで簡単にスタイリングできる。あわせて、見出しレベルに応じてsection-lv2、section-lv3といったクラスをつけておくと、見出しの階層構造ことに異なるスタイルが指定できる。

<div class="section section-lv2">
　<div class="section section-lv3">
　</div>
　<div class="section section-lv3">
　</div>
</div>

クラスは半角スペース区切りで複数適用させることができる。

a要素title属性の使い方

たとえばメールアドレスへのリンクについて、「メールでお問い合わせ下さい」といったテキストにa要素を指定し、「info@example.comへメールする」というtitle属性をつける。

表の列グループと行グループの使いどころ

<table summary="自動販売機の売上表">
　<caption>自動販売機の売上表</caption>
　<colgroup id="month"><colgroup>
　<colgroup id="tea"><colgroup>
　<colgroup id="cola"><colgroup>
　<colgroup id="coffee"><colgroup>
　<thead>
　　<tr>
　　　　<th scope="row">商品名</th>
　　　　<th scope="col">お茶</th>
　　　　<th scope="col">コーラ</th>
　　　　<th scope="col">コーヒー</th>
　　</tr>
</thead>
<tbody>
　<tr>
　　　<th scope="row">9月</th>
　　　<td>10,000円</td>
　　　<td>20,000円</td>
　　　<td>30,000円</td>
　</tr>
</tbody>
</table>

自動販売機の売上表
商品名	お茶	コーラ	コーヒー
9月	10,000円	20,000円	30,000円

表では列グループだけでなく、行グループを示すこともできる。ブラウザでは

ヘッダ行
ボディ行
フッタ行

の順に表示されるが、XHTML上は

thead要素
tfoot要素
tbody要素

の順に記述する必要がある。

フォームパーツのマークアップ

fieldset要素でグループ化する部品の範囲を示し、legend要素でグループのタイトルを示す。

フォームパーツにラベルを設定する方法は少しややこしいので、順序だてて作業することが大切。

ラベルにするテキストを書く（たとえば「お名前」）
そのテキストをlabel要素でマークアップする（
お名前
）
フォームパーツにID名をつける（<input id=”name”… />）
label要素にfor属性をつけ、パーツと同じID名を値として指定する（
お名前
）

1 2	<input type="radio" name="sex" id="man" /><label for="man">男性</label> <input type="radio" name="sex" id="woman" /><label for="man">女性</label>

CSS Sprites（シーエスエス・スプライツ）

リンクのロールオーバー前とロールオーバー後の画像、ばらばらに見えるナビゲーションアイコンの画像を、ひとまとめにしてbackground-positionプロパティを使って位置指定する方法を、CSS Sprites（シーエスエス・スプライツ）という。

テーブルのスタイリング

テーブルとセルの境界線を重なり合わせない場合は、border-collapseプロパティを指定し値をseparateとする。border-spacingプロパティはIE6/7では適用されないため、XHTMLのtable要素に

1	<table cellspacing="0">

と指定することで回避できる。

外部リンク

»CSS Nite in Ginza, Vol.28フォローアップ | CSS Nite公式サイト

こちらの関連記事もあわせてどうぞ！

返信をキャンセルする。