22.divタグで領域確保

divタグにid属性を組み合わせることによって、Ｗｅｂページ内をカテゴリや領域毎に細かく分けることができます。細かく分けることによって、手間がかかるかもしれませんが、Ｗｅｂページのデコレーションがしやすくなったり、Ｗｅｂページの修正が容易になったり、ユーザビリティが良くなったりります。

ここでは、領域確保の基本となるid属性の性質をマスターしましょう。

divタグと合わせて領域確保

divタグは領域確保をするためのタグであることを、「divタグ（18.html、title、divの説明）」の説明で述べました。divタグにid属性を組み合わせることによって、その領域に意味を持たせることができます。

他のタグとid属性の組み合わせ

基本的に、id属性はすべてのタグに設置することができます。私自身、h1～h6タグやpタグにもid属性を設置する場合もございます。

例えば、先ほどの「18.html、title、divの説明」のファイル「com018.html」でも、そのソースを見て頂けたら判るのですが、h2タグにid属性を指定しています。

●id属性を入れたh2タグ

<h2 id="div-tag">divタグ</h2>

そうすることによって、h2タグで挟まれた文字列「divタグ」以外にも、id属性で指定した文字列「div-tag」の意味を併せて持たせることができるようになります。

---

Ｗｅｂページ内をカテゴリや領域に分ける

Ｗｅｂページは、ページ内の場所々々によって、いろいろなカテゴリや領域に分けることができます。例えば、このＷｅｂページでは、次のような領域に分けることができます。

• ページ上部のヘッダー
• 左横のナビゲータ
• 記事が入る部分
• 最下部のフッター

更に細かく領域を分割

これらを、もっと細かい領域に分けることもできます。例えば、このＷｅｂページ上部のヘッダーであれば

• おふとんの人ロゴ
• ナビゲータ（目的と操作説明、ブログ、ゲストブック）
• サイト内検索

場合によっては、更に細かく分けることができるかもしれません。これらを大きな領域から、細かい領域に細分化していけば、見かけ上は変わらないにしても、Ｗｅｂページとしての本来持っている性質が向上します。

divタグによる領域確保

上の例を、具体的に、どのようにタグを配置するかは、次の例をご覧下さい。

●divによる領域確保の例

<div id="header">

  <div id="top-logo">ロゴ</div>

  <div id="top-navi">ナビゲータ</div>

  <div id="top-search">サイト内検索</div>

</div>

この例は、簡素に示しましたが、ロゴはid属性が「to-logo」のdivタグで挟まれていますし、同様にナビゲータはid属性が「top-navi」のdivタグで挟まれています。

そして、これらの「top-logo」や「top-navi」や「top-search」のdivタグを、id属性が「header」のdivタグで包括されていることが判ります。

ここで、これらの意味付けを、「ロゴ」というコンテンツから見ますと、ロゴは「header」の中の「top-logo」の中にあるコンテンツであると言えます。また、「ナビゲータ」を中心に見ますと、ナビゲータは「header」のコンテンツであり「top-navi」のコンテンツであると言えます。

このように、id属性を使って、コンテンツを幾重にも意味づけをすることができます。こうすることによって、Ｗｅｂページのデコレーションがしやすくなったり、Ｗｅｂページの修正が容易になったり、ユーザビリティが良くなったりります。詳しくは、後ほど述べると思います。

---

注意事項

id属性を使って領域確保をする場合には、次の注意点がございます。

• １個のタグに１個のidを設置できる。
• id名は、半角アルファベットで始まり、半角英数ならびに「-（ハイフン）」のみを用いることができる。
• １つのＷｅｂページ内に、同じ名称のidが複数存在してはいけない。

間違った例１

●間違ったの例１

<div id="header" id="logo">ヘッダーのロゴ</div>

１個のタグに１個のidしか指定できません。そこで、次に示すように、id名を一つにするか、divタグを別に使ってid名を分割する必要があります。

●訂正例１－１

<div id="header-logo">ヘッダーのロゴ</div></div>

●訂正例１－２

<div id="header"><div id="logo">ヘッダーのロゴ</div></div>

間違った例２

●間違ったの例２

<div id="postal">住所</div>

<div id="postal">電話番号</div>

同じid名が２個以上出てきてはいけませんので、次のように別のid名にするか、idを分割した方が良いです。

●訂正例２－１

<div id="postal-add">住所</div>

<div id="postal-tel">電話番号</div>

●訂正例２－２

<div id="postal">

  <div id="add">住所</div>

  <div id="tel">電話番号</div>

</div>

---

divの領域確保は、やる意味はあるのかと言われることもありますが、この領域確保が生きてくることは、スタイルシートを使ったデザインを学んでからです。お急ぎの方は、35.floatコマンドとwidthコマンド（CSS）「Ｗｅｂページのデザイン」をご覧ください。

---