典型的なページの構造(1カラム、2カラム、3カラムパターンとページラッパー)

典型的なページの構造としては、1カラム、2カラム、3カラムパターンが挙げられます。これらにはページフッター(pagefooter)やページヘッダー(pageheader)が付いていることも多いので、それも含めて表現しましょう。

・まず、1カラムについて。

<header id="pageheader" class="pageheader">
<!-- ここにpageheaderを記述します -->
</header>
<div id="contents" class="contents">
<!-- ここにcontentsを記述します -->
</div>
<footer id="pagefooter" class="pagefooter">
<!-- ここにpagefooterを記述します -->
</footer>

・次に、2カラムについて。

<header id="pageheader" class="pageheader">
<!-- ここにpageheaderを記述します -->
</header>
<div id="contents" class="contents">
<section id="column1"><!-- ここにcontentsを記述します --></section>
<section id="column2"><!-- ここにcontentsを記述します --></section>
<div class="clear"></div>
</div>
<footer id="pagefooter" class="pagefooter">
<!-- ここにpagefooterを記述します -->
</footer>

・最後に、3カラムについて。

<header id="pageheader" class="pageheader">
<!-- ここにpageheaderを記述します -->
</header>
<div id="contents" class="contents">
<section id="column1"><!-- ここにcontentsを記述します --></section>
<section id="column2"><!-- ここにcontentsを記述します --></section>
<section id="column3"><!-- ここにcontentsを記述します --></section>
<div class="clear"></div>
</div>
<footer id="pagefooter" class="pagefooter">
<!-- ここにpagefooterを記述します -->
</footer>

上記例には、各タグに対しclass属性とid属性を付けていますが、本サイトでは、スタイルシートでなるべくclass属性に対してスタイルを定義することを推奨しています。というのは、例えば、マウスなどのユーザアクションで変化する動的なサイトを製作する場合に、pageheaderやcontentsやpagefooterなどを複数定義して可視・不可視の制御をするなどのケースなどが考えられ、class属性であれば、そのようなケースにおいても柔軟に対応できるからです。なお、id属性はjavascriptでDOMアクセスする際に使いますが、id属性はユニークである必要があるため、複数定義する際には別のidをつける必要があります。

さて、これらに対してデザインを設定する際に、pageheaderやcontentsやfooterについてグループ化して幅や背景などを指定したいケースがよくあります。その場合、ページラッパーを定義します。ページラッパーはcontentsを囲むように定義しましょう。

・pageheader+contents+pagefooterをグループ化した場合。

<div id="pagewrap" class="pagewrap">
<header id="pageheader" class="pageheader">...</header>
<div id="contents" class="contents">...</div>
<footer id="pagefooter" class="pagefooter">...</footer>
</div>

・pageheader+contentsをグループ化した場合。

<div id="pagewrap" class="pagewrap">
<header id="pageheader" class="pageheader">...</header>
<div id="contents" class="contents">...</div>
</div>
<footer id="pagefooter" class="pagefooter">...</footer>

・contents+pagefooterをグループ化した場合。

<header id="pageheader" class="pageheader">...</header>
<div id="pagewrap" class="pagewrap">
<div id="contents" class="contents">...</div>
<footer id="pagefooter" class="pagefooter">...</footer>
</div>

 

カテゴリー: htmll5_style   タグ: ,   この投稿のパーマリンク

コメントを残す