mtde.info

Movable Type Developers Express

このカテゴリでは、サンプルの文書をXHTML文書へ起こすための一例を紹介しています。

『XHTML文書の作成』カテゴリ内のエントリ一覧

サンプルの文書

2008年3月 4日 20:38 | Writer: apstar | 記事本文

サンプルの文書を以下に示します。

複数枚から構成される会社案内のページの中のひとつの、「個人情報の取り扱いについて」という文書です。改行や行頭へのスペースで、レイアウトを調整した形跡があります。

この文書に、タグ付けを行ってXHTML化します。

■個人情報の取り扱いについて

・個人情報の取り扱いの定義

    ○○株式会社(以下弊社)は、よりご満足いただ
    ける商品・サービスを提供・持続するためにお客
    様の個人情報を活用させていただくことがありま
    す。

    弊社では、お客様の個人情報を慎重に取り扱い、
    個人情報がプライバシーに関わる重要な情報であ
    ると認識したうえで、個人情報を適切に保護し、
    ご本人の意向に沿って活用しなければならないと
    考えています。

    対象      :当プライバシーポリシーは、弊社で
                取り扱う全ての個人情報を対象とし
                ます。

    法令の遵守:個人情報を取り扱う上で関係する法
                令・政令・ガイドライン等を遵守し
                ます。

    利用      :個人情報の利用にあたっては、利用
                目的を明確にし、その利用目的の達
                成に必要な範囲内で取り扱います。

    取得      :個人情報は、適法かつ適正な方法で
                取得します。

・個人情報の取扱いに関するお問い合わせ

    ○○株式会社
    〒xxx-xxxx ○○市○○区○○x-xx-x
    電話番号:xx-xxxx-xxxx

サンプルの文書の問題点

2008年3月 4日 20:39 | Writer: apstar | 記事本文

サンプルの文書には、いろいろと問題点があります。

行頭のスペースは、ほかの種類のブラウザ・異なる大きさのフォントが適用されると、正しく表示されるでしょうか?音声読み上げブラウザが、この文章中のスペースをどう判断するでしょうか?

一冊の報告書の中でレイアウトが及第点に収まっていればヨシとする紙媒体文書と決定的に異なる点がここにあります。Web上では、文書の利用者の利用環境は、様々なのです。

これらの問題点も同時に直していきます。

XML宣言を追加

2008年3月 4日 20:41 | Writer: apstar | 記事本文

一般にXHTML文書はXML宣言で始めることが推奨され、特に文字コードの扱いによってはこの宣言が必須になることがあります。

Movable Typeにおいても、文書は厳格なXML宣言がなされています。例では、XHTML1.0 Transitionalとしています。

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

■個人情報の取り扱いについて

・個人情報の取り扱いの定義

    ○○株式会社(以下弊社)は、よりご満足いただ
    ける商品・サービスを提供・持続するためにお客
    様の個人情報を活用させていただくことがありま
    す。

    弊社では、お客様の個人情報を慎重に取り扱い、
    個人情報がプライバシーに関わる重要な情報であ
    ると認識したうえで、個人情報を適切に保護し、
    ご本人の意向に沿って活用しなければならないと
    考えています。

    対象      :当プライバシーポリシーは、弊社で
                取り扱う全ての個人情報を対象とし
                ます。

    法令の遵守:個人情報を取り扱う上で関係する法
                令・政令・ガイドライン等を遵守し
                ます。

    利用      :個人情報の利用にあたっては、利用
                目的を明確にし、その利用目的の達
                成に必要な範囲内で取り扱います。

    取得      :個人情報は、適法かつ適正な方法で
                取得します。

・個人情報の取扱いに関するお問い合わせ
    ○○株式会社
    〒xxx-xxxx ○○市○○区○○x-xx-x
    電話番号:xx-xxxx-xxxx

html要素

2008年3月 4日 20:43 | Writer: apstar | 記事本文

html文書であることを示すため、<html>タグを付加します。このhtml要素には、XHTML文書として多様な応用を可能にするために、名前空間を示すxmlns属性を記述します。

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

■個人情報の取り扱いについて

・個人情報の取り扱いの定義

    ○○株式会社(以下弊社)は、よりご満足いただ
    ける商品・サービスを提供・持続するためにお客
    様の個人情報を活用させていただくことがありま
    す。

    弊社では、お客様の個人情報を慎重に取り扱い、
    個人情報がプライバシーに関わる重要な情報であ
    ると認識したうえで、個人情報を適切に保護し、
    ご本人の意向に沿って活用しなければならないと
    考えています。

    対象      :当プライバシーポリシーは、弊社で
                取り扱う全ての個人情報を対象とし
                ます。

    法令の遵守:個人情報を取り扱う上で関係する法
                令・政令・ガイドライン等を遵守し
                ます。

    利用      :個人情報の利用にあたっては、利用
                目的を明確にし、その利用目的の達
                成に必要な範囲内で取り扱います。

    取得      :個人情報は、適法かつ適正な方法で
                取得します。

・個人情報の取扱いに関するお問い合わせ
    ○○株式会社
    〒xxx-xxxx ○○市○○区○○x-xx-x
    電話番号:xx-xxxx-xxxx

</html>

head要素

2008年3月 4日 20:47 | Writer: apstar | 記事本文

HTML文書はhead要素とbody要素で構成されます。

head要素とは文書自身に関する情報を納めた部分で、普通の文書でいえば表紙とか文書管理票のようなものに相当します。ブラウザ上に表示されることはありません。

今回は、コンテンツ種類をテキストとし文字コードをUTF-8に指定、会社案内の中の一枚という位置づけで「○○株式会社 会社案内」というタイトルをtitle要素へ与えています。<title>タグでくくられた文字は一般的にブラウザのタイトルバーへ表示されます。

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

■個人情報の取り扱いについて

・個人情報の取り扱いの定義

    ○○株式会社(以下弊社)は、よりご満足いただ
    ける商品・サービスを提供・持続するためにお客
    様の個人情報を活用させていただくことがありま
    す。

    弊社では、お客様の個人情報を慎重に取り扱い、
    個人情報がプライバシーに関わる重要な情報であ
    ると認識したうえで、個人情報を適切に保護し、
    ご本人の意向に沿って活用しなければならないと
    考えています。

    対象      :当プライバシーポリシーは、弊社で
                取り扱う全ての個人情報を対象とし
                ます。

    法令の遵守:個人情報を取り扱う上で関係する法
                令・政令・ガイドライン等を遵守し
                ます。

    利用      :個人情報の利用にあたっては、利用
                目的を明確にし、その利用目的の達
                成に必要な範囲内で取り扱います。

    取得      :個人情報は、適法かつ適正な方法で
                取得します。

・個人情報の取扱いに関するお問い合わせ
    ○○株式会社
    〒xxx-xxxx ○○市○○区○○x-xx-x
    電話番号:xx-xxxx-xxxx

body要素

2008年3月 4日 20:49 | Writer: apstar | 記事本文

HTML文書はhead要素とbody要素で構成されます。

body要素は文書の本文部分に相当します。<body>タグ内に書かれている文書はブラウザ上に表示されます。

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

<body>
■個人情報の取り扱いについて

・個人情報の取り扱いの定義

    ○○株式会社(以下弊社)は、よりご満足いただ
    ける商品・サービスを提供・持続するためにお客
    様の個人情報を活用させていただくことがありま
    す。

    弊社では、お客様の個人情報を慎重に取り扱い、
    個人情報がプライバシーに関わる重要な情報であ
    ると認識したうえで、個人情報を適切に保護し、
    ご本人の意向に沿って活用しなければならないと
    考えています。

    対象      :当プライバシーポリシーは、弊社で
                取り扱う全ての個人情報を対象とし
                ます。

    法令の遵守:個人情報を取り扱う上で関係する法
                令・政令・ガイドライン等を遵守し
                ます。

    利用      :個人情報の利用にあたっては、利用
                目的を明確にし、その利用目的の達
                成に必要な範囲内で取り扱います。

    取得      :個人情報は、適法かつ適正な方法で
                取得します。

・個人情報の取扱いに関するお問い合わせ
    ○○株式会社
    〒xxx-xxxx ○○市○○区○○x-xx-x
    電話番号:xx-xxxx-xxxx

</body>
</html>

見出しをマークアップ

2008年3月 4日 20:50 | Writer: apstar | 記事本文

まずは以後の文書の見通しのために見出しをマークアップします。本文とは改行で区切り、ソースコードの見通しを良くします。

見出しはレベル1からレベル6まで6段階が用意されています。レベル1がもっとも重要な見出しで、数字の大きさ順に大見出し>中見出し>小見出しと移行します。文章の構造に合わせ、レベル1から順番に使用します。

以下の例では、「個人情報の取り扱いについて」を最も重要な見出しとし、「個人情報の取り扱いの定義」と「個人情報の取扱いに関するお問い合わせ」をその次に重要で同等の重みとしています。

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

<body>
<h1>個人情報の取り扱いについて</h1>

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

    ○○株式会社(以下弊社)は、よりご満足いただ
    ける商品・サービスを提供・持続するためにお客
    様の個人情報を活用させていただくことがありま
    す。

    弊社では、お客様の個人情報を慎重に取り扱い、
    個人情報がプライバシーに関わる重要な情報であ
    ると認識したうえで、個人情報を適切に保護し、
    ご本人の意向に沿って活用しなければならないと
    考えています。

    対象      :当プライバシーポリシーは、弊社で
                取り扱う全ての個人情報を対象とし
                ます。

    法令の遵守:個人情報を取り扱う上で関係する法
                令・政令・ガイドライン等を遵守し
                ます。

    利用      :個人情報の利用にあたっては、利用
                目的を明確にし、その利用目的の達
                成に必要な範囲内で取り扱います。

    取得      :個人情報は、適法かつ適正な方法で
                取得します。

<h2>個人情報の取扱いに関するお問い合わせ</h2>
    ○○株式会社
    〒xxx-xxxx ○○市○○区○○x-xx-x
    電話番号:xx-xxxx-xxxx

</body>
</html>

改行とスペースを撤去

2008年3月 4日 20:51 | Writer: apstar | 記事本文

レイアウトを調整するために本文中に使用されていた、無駄な改行とスペースの撤去を行います。

XHTMLでは、レイアウトの調整は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">

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

<body>

<h1>個人情報の取り扱いについて</h1>

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

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

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

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

○○株式会社
〒xxx-xxxx ○○市○○区○○x-xx-x
電話番号:xx-xxxx-xxxx

</body>

</html>

本文をマークアップ

2008年3月 4日 20:53 | Writer: apstar | 記事本文

文章本文を、<p>タグを用いてマークアップします。HTMLにおける段落は、ワープロ文書のように改行したり字下げしたりして示すのではなく、p要素タイプを用います。

リストはdlリストを用い、<p>タグ内での改行は<br />タグを用いています。

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

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

<body>

<h1>個人情報の取り扱いについて</h1>

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

</body>

</html>

完成した文書を見てみる

2008年3月 4日 20:57 | Writer: apstar | 記事本文

完成した文書をファイルに保存し、ブラウザで見てみます。

ファイルを保存する際の注意点は、以下の2点です。

xhtml_0010_title.png

機能ごとにグループ化

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>

サブコンテンツを追加

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

今回作成したXHTMLページに、サブコンテンツを追加してみます。

今回作成したXHTMLページの内容は「会社案内」というカテゴリ中の「個人情報の取り扱いについて」ですが、ほかの会社案内関連ページのリストをサブコンテンツにリスト表示してみます。

<div id="maincontainer"> ~ </div>の間にmaincontent領域がありますが、同じ階層にsubcontentという名前でサブコンテンツ用の領域を確保します。その中には、<dl>タグで会社案内に関する項目のリストを列挙しました。

<?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 id="subcontent">
         <dl>
         <dt>会社案内</dt>
         <dd>
         <ul>
            <li>会社概要</li>
            <li>沿革</li>
            <li>採用情報</li>
            <li>会社所在地</li>
            <li>お問い合わせ</li>
         </ul>
         </dd>
         </dl>
      </div>
   </div>

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

</body>
</html>

XHTML文書の完成

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

これで完成です。

<?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 id="subcontent">
         <dl>
         <dt>会社案内</dt>
         <dd>
         <ul>
            <li>会社概要</li>
            <li>沿革</li>
            <li>採用情報</li>
            <li>会社所在地</li>
            <li>お問い合わせ</li>
         </ul>
         </dd>
         </dl>
      </div>
   </div>

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

</body>
</html>
xhtml_0030_xhtmlcmp.png

今回のサンプルでは、次のような文書構造の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>
      <p>ヘッダーコンテンツ</p>
   </div>

   <div id="maincontainer">

      <div id="maincontent">

         <h2>中見出し</h2>
         <p>メインコンテンツ</p>

      </div>
      <div id="subcontent">

         <h3>中見出し</h3>
         <p>サブコンテンツ</p>

      </div>
   </div>

   <div id="footcontent">
      <p>フッターコンテンツ</p>
   </div>

</body>
</html>

headcontentは、「最初に読み込まれるから」という理由でこのような名前にしています。

maincontentは、「メインの文章である」という理由でこのような名前にしています。

subcontentは、「サブの文章である」という理由でこのような名前にしています。右(right)や左(left)としていないのは、CSSの組み方によって右にも左にもできるからです。

footcontentは、「最後に読み込まれるから」という理由でこのような名前にしています。

エントリ
タグ
はじめに
導入編
ローカル環境
変数
サンプル
その他
トラブル集
2008 mtde.info