ホームページの作り方（HP作成法）を解説

>>ホームページの作り方TOP　>>divタグの使い方（前編）

■divタグの使い方（前編）

divの役割はたくさんの引き出しをまとめて一度に動かすことが出来るタンスに似ていることから、タンスモデルでよく説明され、引き出しにあたるpやhなどのタグを セットとして管理することが出来ます。

<div> <h1>見出し</h1> <p>段落</p> </div>

また、divタグにclassやidを指定して、cssでスタイルを自在に変更することが出来ます。

idとclassの役割は全く同じですが、使い方が異なります。idは1ページ内で1度しか使用できませんが、classは何度でも使用可能です。

こういうと別の意味に取られるので、補足すると、id="a1"、id="a2"の二つを1回ずつ使用することはできますが、id="a1"だけを2回以上使用するのはだめということです。

idは、classと同じように、pやulなどのdiv以外の要素にももちろん使うことができます。

<div id="a1"> <div id="a2" class="section"> <h1>見出し</h1> <p>段落</p> </div> <div id="a3" class="section"> <h1>見出し</h1> <p>段落</p> </div> </div>

さて、このdivを用いてサイトの構造を組み立てていきます。要領は形の異なる図形を別々に動かして1枚の絵にするような感じです。

サンプルでは3カラムのサイトを作ろうと思っているのでそのようにdivという四角い図形をまず作ります。

a1
a2
b1	b2	b3
c1

上のような構造をdivを使って表すと下記のようになります。

<div id="a1"> タイトル </div> <div id="a2"> メニューバー </div> <div id="b"> <div id="b1" class="section"> 左枠 </div> <div id="b2" class="section"> 中央枠 </div> <div id="b3" class="section"> 右枠 </div> </div> <div id="c1"> アドレス </div>

ここまでできたら、タイトルや枠の中にpやh要素を組み込んで、最後にスタイルシートで配置を整えれば出来上がりです。

なんでclass="section"を使うの？と思われると思いますが、XMLでは必ず使用する文章の構造の明確化を意識したテクニックで、 (X)HTMLでは使用しなくても全く問題ありませんが、今後を考えると使用に慣れておいた方がいいかもしれません。