二十四日目！（ID・クラス使い分け、名前）

つづき進めます。

IDとクラスの使い方・使い分け
XHTMLに用意されている要素だけでは示しきれない構造を補ったり、スタイルの適用対象を示すのに利用。
IDはXHTML内で1回しか利用できないのに対し、クラスは複数回利用できるが、出現回数を理由にIDにするかクラスにするかを決めるわけではない。あくまで名前をつけたい要素の役割にあわせて、こゆうの役割ならIDを、グループならクラスを、というように使う。

●見出しと本文のまとまりを構造化
例）
<h2>チョコチップクッキーの作り方</h2>
<p>チョコチップクッキーを簡単に作る方法を解説します</p>
<h3>材料を用意する</h3>
<p>チョコチップクッキーの材料は以下のとおりです。</p>
<ul>
  <li>小麦粉　200g</li>
  ・・・（中略）・・・
</ul>


h2要素の下にp要素（段落）、次の小見出しにはh3要素、その下にp要素、ul要素とつづく構成。マークアップとして何ら問題はないが、見出しと本文のまとまりをdiv要素でブロック化してIDやクラスを与えておくと、何に関するブロックなのかがひと目でわかるだけでなく、IDやクラスを手がかりに合理的にスタイリングできる。

<div id="how-to-making" class="section-lv2">
  <h2>チョコチップクッキーの作り方</h2>
  <p>チョコチップクッキーを簡単に作る方法を解説します。</p>
 <div id="materials" class="section-lv3">
    <h3>材料を用意する</h3>
    <p>チョコチップクッキーの材料は以下のとおりです。</p>
    <ul>
      <li>小麦粉　200g</li>
      ・・・・（中略）・・・・
　　</ul>
 </div><!--  /#materials  .section-lv3   -->
</div><!--  /#how-to-making   .section-lv2   -->


●一般的なID名・クラス名から命名ルールを学ぶ
広く使われている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
キービジュアルやメインビジュアル	keyvidual、mainvisual
画像や写真、グラフなど	image、photo、fig、fugure
検索	search、search-area、search-box
注釈、ヒント、本題から外れた補足や囲み記事	aside、hint、note
商品一覧	products、item-list、shopitems

複数の単語で構成するID名・クラス名は、キャメルケース（globalNav)、ハイフン区切り（global-nav）、アンダースコア区切り（global_nav）の３つのパターンのいずれかを利用するのが一般的。

ID名・クラス名はアルファベットで開始する名称をつけるが、日本語のローマ字表記で「okaimono」とつけるのではなく、英単語で「shopping」とつけるのが一般的。あくまで慣習のようなものであって、ローマ字表記でも問題ないが、頭の中で一度音読して漢字やかなに変換する必要があるため、パッと理解できないことがある。

●XHTMLやmicroformatsで提唱されている名称を参考にする
よく使われるID名・クラス名のなかにHTML.5で追加予定の新しい要素名と同じものや似たようなものがある。HTML.5は、現在求められるWeb制作のニーズを満たすために提案されている新たなHTML仕様であり、HTML4.01やHTML1.0で足りなかった要素が追加されているため、ID名・クラス名を考えるときも参考になる。

microformats(http;//microformats.org/)は、Web全体で共通のクラス名を使うことで、情報の汎用性を高めるためのプロジェクトで、たとえば連絡先やプロフィールについて、microformatsの「hCard」にもとづいたマークアップをしていると読み込みに対応したロボットがvCard形式に自動変換し、アドレス帳などのアプリケーションで利用できるようになる。また、テクノラティなどの検索サービスがmicroformatsに対応しており、マークアップをきちんと理解してくれる。Webサイトでmicroformatsを正式に利用するかどうかは別途考えておきたいポイントですが、簡潔でわかりやすいクラス名が採用されているため、命名の参考に。

●クラスの便利な使い方
コンテンツがXHTMLで利用できる要素の種類にあてはまらない場合、div要素（汎用ブロックレベル要素）やspan要素（汎用インライン要素）を使って「それがどのようなコンテンツなのか」を示す。それぞれを「<div class="section">.....</div>で囲んでおくとCSSで簡単にスタイリングできます。あわせて、見出しレベルに応じて「section-lv2」「section-lv3」といったクラスをつけておくと、見出しの階層構造ごとに異なるスタイルが指定できる。

<div class="section section-lv2">
  <h2>役立つ趣味を身につけませんか？</h2>
  <p>趣味で。。。。。豊かにしましょう</p>
 <div class="section section-lv3">
  <h3>お料理を趣味に</h3>
  <p>食事は日々の生活にかかせないものです。。。。楽しみましょう！</p>
 </div>
 <div class="section section-lv3">
  <h3>おもてなしを趣味に</h3>
  <p>喜んでもらえたときの顔がみたい。。。。。だから私はおもてなしを趣味にします。</p>
 </div>
</div>


●複数のクラス指定
クラスは半角スペース区切りで複数適用させることができる。たとえば注釈文のような段落で、さらに注意を喚起する役割をもっているときは「<p class="note attention">....</p>」というようにふたつ以上のクラス名をつけ、スタイルを適用することが出来る。

.note {
  padding-left: 1.6em;
  font-size: 85%;
  background: url(note.png) no-repeat;
}


.attention {
  color: red;
}


今日はここまで。