mtde.info

Movable Type Developers Express

機能ごとにグループ化

2008年3月 4日 21:00 | Writer: apstar | 記事本文

複数のブロックレベル要素をグループ化する場合は、div要素を用います。Webページにおいて、CSSでレイアウトを調整する際にも、このグループ化が必要になる場合があります。

たとえば、以下のようなレイアウトはよく見るレイアウトです。

xhtml_0020_container.gif
headcontent
ページのタイトルや説明が入る
maincontent
メインコンテンツが入る
subcontent
サイドバーなどのサブコンテンツが入る
footcontent
会社名やアドレスが入る

以下は、もとのXHTMLへ、このグループ化を行ってみた例です。

maincontainerというグループは、CSSによる外観調整時、メインコンテンツとサブコンテンツを横並びに表示するために必要な親ブロックとなります。ここで先行して入れておきます。

もとのXHTMLには、サブコンテンツはまだ存在しないので、まだ入れていません。

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" id="sixapart-standard">

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>○○株式会社 会社案内</title>
</head>

<body>
   <div id="headcontent">
      <h1>個人情報の取り扱いについて</h1>
   </div>

   <div id="maincontainer">

      <div id="maincontent">

         <h2>個人情報の取り扱いの定義</h2>

         <p>○○株式会社（以下弊社）は、よりご満足いただける商品・サービスを提供・持続するためにお客様の個人情報を活用させていただくことがあります。</p>
         <p>弊社では、お客様の個人情報を慎重に取り扱い、個人情報がプライバシーに関わる重要な情報であると認識したうえで、個人情報を適切に保護し、ご本人の意向に沿って活用しなければならないと考えています。</p>

         <dl>
         <dt>対象</dt>
         <dd>当プライバシーポリシーは、弊社で取り扱う全ての個人情報を対象とします。</dd>
         <dt>法令の遵守</dt>
         <dd>個人情報を取り扱う上で関係する法令・政令・ガイドライン等を遵守します。</dd>
         <dt>利用</dt>
         <dd>個人情報の利用にあたっては、利用目的を明確にし、その利用目的の達成に必要な範囲内で取り扱います。</dd>
         <dt>取得</dt>
         <dd>個人情報は、適法かつ適正な方法で取得します。</dd>
         </dl>

         <h2>個人情報の取扱いに関するお問い合わせ</h2>

         <p>○○株式会社<br />
         〒xxx-xxxx ○○市○○区○○x-xx-x<br />
         電話番号：xx-xxxx-xxxx</p>

      </div>

   </div>

   <div id="footcontent">
      <address>2008 ○○株式会社</address>
   </div>

</body>
</html>

XHTML文書の作成

2008 mtde.info