今までのテンプレートでは、CSSファイルの管理方法がアバウトだったため、カスタマイズの際にどこに手を付ければ良いのか？が非常に分かりにくいものになっていました。

どうじに、制作効率も落ちてしまうような構造になっていました＾＾；

この状態を改善するために、CSSファイルの分割方法を見直し、制作効率のアップとカスタマイズの容易性を高めることに成功しました。

各CSSファイルの構成と解説

基本的なCSSファイルの構成

1. import.css
2. common.css
3. colors.css
4. base.css
5. class.css
6. ie
   1. ie6.css
   2. ie.css

基本的には、全テンプレートで上記のようなCSSファイル構成になっており、リストアップした順番に読み込まれていきます。

各ファイルの役割解説

import.css

一番さいしょに読みこまれ、以下につづく全てのCSSファイルの読み込みを行います。それ以外の役割はありませんので、新たに読み込ませたいCSSファイルが増えた場合いがいでは、編集の必要はありません。

common.css

ブラウザ間での初期状態の差異をリセットし、最低限の再定義を行います。状況によって内容に違いがありますが、基本的に編集の必要はありません。

colors.css

テンプレートの配色を管理するもので、デザインのベースとなる配色は全てここでコントロールされています。サイト内で使われる配色ごとに部類して記述されています。基本的な配色の変更をおこなう場合に、このファイルを編集します。

base.css

colors.cssで指定された配色を元に、実際にレイアウトを組んでいきます。例えば、サイトの横幅や表示位置・背景画像の指定などです。見た目のカスタマイズを行うばあいに、もっとも多く手をいれるファイルになります。

class.css

画像の左右寄せやテキストの装飾など、特定の役割をもったクラス(class)の集合体です。何かしらの役割を持ったclassを追加する場合には、このファイルを編集します。

ie

1. ie6.css
   • インターネットエクスプローラー６（ie6）のみに適応されるスタイルです。主にie6のバグ回避などになります。
2. ie.css
   • 全てのバージョンのインターネットエクスプローラーに適応されるスタイルです。じっしつ、ie6未満は切り捨てで作成していますので、ie6とie7の共通バグ回避などがメインです。

<h1 id="siteName"><a href="">サイト名</a></h1>
<p class="excerpt">サイト概要</p>
<div class="chapter" id="articleText">
    <h2>コンテンツタイトル</h2>
    <p>コンテンツ本文本文</p>
    <div class="section">
        <h3>見出し</h3>
        <p>テキストテキストテキスト</p>
    </div>
    <p class="pageNavi"><a href="#siteName">pageTop</a></p>
</div>
<address>Copyright 略....</address>

基本的には、以下のようなコードを使用しています。１行目と２行目に関しては、以下のようにdivで囲むパターンもありかな？と思いますが、この場合はh1タグの影響範囲はbody以下すべてなので、あえてdivで囲っていません。

１行目と２行目をdivで囲ったパターン

<div id="pageHeader">
    <h1><a href="">サイト名</a></h1>
    <p>サイト概要</p>
</div>
<div class="chapter" id="articleText">
    <h2>コンテンツタイトル</h2>
    <p>コンテンツ本文本文</p>
    <div class="section">
        <h3>見出し</h3>
        <p>テキストテキストテキスト</p>
    </div>
    <p class="pageNavi"><a href="#pageHeader">pageTop</a></p>
</div>
<address>Copyright 略....</address>

また、5行目から１２行目までの<div class="chapter" id="articleText"</div>の部分も、h2タグの出現回数が増えることが想定される場合は、以下のように変化させることもあります。

<div id="pageHeader">
    <h1><a href="">サイト名</a></h1>
    <p>サイト概要</p>
</div>
<div id="articleText">
    <div class="chapter">
        <h2>コンテンツタイトル</h2>
        <p>コンテンツ本文本文</p>
        <div class="section">
            <h3>見出し</h3>
            <p>テキストテキストテキスト</p>
        </div>
    </div>
    <div class="chapter">
        <h2>コンテンツタイトル</h2>
        <p>コンテンツ本文本文</p>
    </div>
    <div class="chapter">
        <h2>コンテンツタイトル</h2>
        <p>コンテンツ本文本文</p>
    </div>
    <p class="pageNavi"><a href="#pageHeader">pageTop</a></p>
</div>
<address>Copyright 略....</address>

Quick*Templateで配布している１カラムテンプレートはこのうちのどれかに当てはまることが殆どです。（フッター部分だけちょっと違いますが・・）

このような最低限とも言えるようなXHTMLの構成で、CSSをどのように使って用意されたデザイン通りにくみ上げていくか？これを考えるのが最もたのしく、時間の掛る部分です（笑）

無闇やたらにdivタグを使うよりも、このような必要最低限の構成で制作するようにしていくと、結構色々なスキルが身につくので面白いですよっ。

おまけ

h1タグをサイト名にした場合のコーディングを紹介しましたが、それとはちょっと違うパターンで、記事名をh1にした場合は、以下のようなコーディングもありかなーと思います。

<div id="pageHeader">
    <p class="title"><a href="">サイト名</a></p>
    <p class="excerpt">サイト概要</p>
</div>
<div id="articleText">
    <h1>大見出し！</h1>
    <div class="chapter">
        <h2>コンテンツタイトル</h2>
        <p>コンテンツ本文本文</p>
        <div class="section">
            <h3>見出し</h3>
            <p>テキストテキストテキスト</p>
        </div>
    </div>
    <p class="pageNavi"><a href="#pageHeader">pageTop</a></p>
</div>
<address>Copyright 略....</address>

ちなみに、この構成にあれこれとプラスしていくと、このブログの骨組みと同じコードが出来上がります（笑）

HTMLとXHTML。一目見れば分かるとおり、「X」の１文字が頭についただけの違いしかありません。このことからも何となく分かるように、HTMLとXHTMLは兄弟です。

ただ、血が繋がっていません（笑）

この辺りのことを細かく説明すると楽しめる範囲を超えてしまいそうなので、ここではとりあえず省きます。その変わり、HTMLとXHTMLのパッと見て分かる９つの違いをお話しようと思います。

この９つ違いさえおさえておけば、簡単にXHTMLを使い始めることが出来ますよっ。

HTMLとXHTMLの９つの違い一覧

• タグは全て小文字で書く
• タグの終了を明示する
• 空要素タグの最後には「/」を入れる
• 属性の省略式は使えない
• 属性値は必ず引用符で囲む
• 文書に含まれる<や>には実体参照を使う
• name属性とid属性は併用する
• 整形式（ツリー構造）をもちいる
• XML宣言をする

以上の９つの違いがあり、それぞれの詳細はいかのようになっています。

タグは全て小文字で書く

HTMLではタグに大文字や小文字を混在して使うことが出来ました。もちろん、大文字のみで構成することも可能です。

これが、XHTMLでは全て小文字に統一されました。

HTMLの場合

<DIV ID="hoge">
    <P>Pタグは１つの段落を表します。</P>
</DIV>

XHTMLの場合

<div id="hoge">
    <p>Pタグは１つの段落を表します。</p>
</div>

タグの終了を明示する

HTMLでは終了タグの省略が可能でしたが、XHTMLでは省略が許されず、その終了を明示してあげる必要があります。

HTMLの場合

<UL>
    <LI>バナナ
    <LI>リンゴ
    <LI>みかん
</UL>

XHTMLの場合

<ul>
    <li>バナナ</li>
    <li>リンゴ</li>
    <li>みかん</li>
</ul>

空要素には「/」を入れる

空要素といってもピント来ないかもしれませんが、例えば以下のようなタグが空要素になります。

一般的な空要素タグ

• <INPUT>タグ
• <BR>タグ
• <HR>タグ

上記タグをXHTMLで書き直した場合

• <input />タグ
• <br />タグ
• <hr />タグ

属性の省略式は使えない

HTMLの場合は属性とその値が同じだったばあい、省略して書くことができましたが、XHTMLではそれが出来ません。

属性の省略式の例

<INPUT TYPE="CHECKBOX" CHEKED>

XHTMLで書き直した場合

<input type="checkbox" cheked="checked" />

属性値は必ず引用符で囲む

HTMLの場合は属性に対する値をそのまま書くことが出来ましたが、XHTMLの場合は属性値は必ず引用符で囲む必要があります。

HTMLで引用符を省略した場合

width=100%

XHTMLで書き直した場合

width="100%"

文書に含まれる「<」や「>」は実体参照を使う

実体参照ってなんすか？って話ですが、難しいものではありません。

HTMLの場合は「<」や「>」もそのまま書くことが出来ましたが、XHTMLの場合は「&lt;」や「&>」と書く必要があります。

これは、タグ自体をそのような書式で書くという訳ではなく、タグ以外に「<」「>」が出現する場合です。

name属性とid属性を併用する

HTMLではページ内リンクを行う場合にはname属性を使っていましたが、XHTMLではid属性を使用します。

ただし、id属性の値は同一ページ内で同じものを使用することができないので、一部のjavascriptなどを使うためにname属性のみで妥協することもあります（笑）

HTMLでname属性を使った場合

<a name="hoge">hogeに移動</a>

XHTMLでid属性を使って書き直した場合

<a name="hoge" id="hoge">hogeに移動</a>

整形式（ツリー構造）を用いる

XHTMLは構造化言語と言われるものなので、文書の構造をしっかりと明示する必要があります。

構造化されていないXHTML

<body>
<h1>見出し１</h1>
<h2>見出し２</h2>
<p>テキスト段落１</p>
<p>テキスト段落２</p>
<h2>見出し２</h2>
<ul>
    <li>リスト</li>
    <li>リスト</li>
</ul>
<h3>見出し３</h3>
<h4>見出し４</h4>
</body>

構造化されたXHTML

<body>
<h1>見出し１</h1>
<div class="section">
    <h2>見出し２</h2>
    <p>テキスト段落１</p>
    <p>テキスト段落２</p>
</div>
<div class="section">
    <h2>見出し２</h2>
    <ul>
        <li>リスト</li>
        <li>リスト</li>
    </ul>
    <div class="section">    
        <h3>見出し３</h3>
        <p>テキスト段落</p>
        <div class="section">
            <h4>見出し４</h4>
            <p>テキスト段落</p>
        </div>
    </div>
</div>
</body>

上記の構造化の例では、各h系タグの出現ごとにdivタグでグルーピングし、その見出しの影響範囲を明示するという手法を使っています。

しかし、divタグ自体は何の意味も持っていないため、個人的にはあまり使いたくないと考えています。そのため、サイトの構造によっては、divタグの使用頻度を減らすなどして、どこまで構造化するか？を考えていく必要もあります。

XML宣言をする

ページの冒頭（htmlファイルの一番最初の行）に以下のようなコードを書く必要があります。

<?xml version="1.0" encoding="使用している文字コード"?>

しかし、インターネットエクスプローラー６以下は、このXML宣言を理解してくれません。そのため、XML宣言のあるサイトでは、後方互換モードというもので動作し、CSSの解釈があやふやになってしまいます（笑）

ただし、文字コードにUTF-8やUTF-16を使用している場合は、XML宣言の省略も認められていますので、これらの文字コードを使うことで堂々とXML宣言を外すことが出来ます。

ちなみに、このブログではIE６以下のブラウザではXML宣言を省略し、それ以外のブラウザの場合はXML宣言を追加するという処理をPHPで行っています。

この方法については別の機会に書いてみようかと思います。

かなり余談も入ってしまいましたが、以上の９つがHTMLとXHTMLの大きな違いです。

SEO的な余談

XHTMLとCSSでSEO対策になる！ということが広まっているからなのかは分かりませんが、HTML式にコードを書いているのにドキュメントタイプはXHTMLになっているサイトが良くありますが、それでは意味がありません（笑）