CSSのclass属性の作り方

　前に「XHTMLを構造化する」で書いたように、CSSのclass属性で、XHTMLの構造を定義することができる。

　ということは、class属性を付けるとき、デザインの違いでクラスを作ってはいけない、ということだ。classには、必ずその文書の構造的な意味を表すようなものにすべきだ。

　一つのページなり、Webサイトなりを作るとき、どういうページにするかを考え、HTMLとは別に、全体のアウトラインをまとめてみる。そのアウトラインを整理・分類し、共通なものをまとめてクラス名をつける。この段階でデザインのことは（あまり）考えない。デザインはあとで、試行錯誤して決めていけばいい。

　こういうように、内容やデザインとは別に、統一的に構造を考えてWebページを作っていく、という手順をできるかぎり守るようにしよう。

　前回はtitleとかauthorとかdateとかのクラスを紹介したが、すぐ考えつくのは、

h2.chapter { }
h2.section { }
h3.subsection { }
h3.subsubsection { }

などの見出しのクラスである。

　他に、プログラムのソースやHTMLを表すクラス

p.code { }
p.html { }

などだ。これと文章の引用は別の方がいい。引用についてはblockquoteがあるので、これはそのまま使うことができる。

　たとえば、本の引用などが多ければ、

span.book { }

というクラスを作り、<span class="book">〜</span>というように使う。さらにそのbookクラスの中で、タイトルなどを区別したいとすれば、

span.book span.title { }

とすればいい。そして、

<span class="book">
　　<span class="title">CSSのclass属性の作り方</span>
　　<span class="author">福田洋一</span>
</span>

というように使う。

　このtitleクラスは、h1.titleのh1におけるtitleクラスとは別のものになる。XMLにおける子要素と同じように（若干分かりづらいが）使える。