１カラムデザインのXHTMLコーディングパターン

１カラムデザインのXHTMLコーディングパターン

<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>

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