小池啓仁 ヒロヒト応援ブログ By はてな

小池啓仁（コイケヒロヒト）の動画など。

小池啓仁 ヒロヒト応援ブログ By はてな

HTMLマーキングで文章構造化

CSSレイアウト

解説第三弾です。
本コンテンツは、以下のページのHTML/CSSソースを解説しています。

今回は、ソースの順番ではスタイルシート（CSS）の所の解説なのですが･･･、先にbody要素の中身を解説します。
body要素中の文章構造が理解出来て、はじめてそれ対して見栄えのCSSを適用することが出来るのです。

<body>
<div id="main_container">

<div id="header_container">
<h1>見出し１</h1>
<p>テキスト</p>
</div>

<div id="menubar_container">
<ul>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
</ul>
</div>

<div id="contents_container">
<div id="for_ie_wrapper">
<h2>見出し２</h2>
<p>テキスト</p>
<p><a href="#">リンク</a></p>
<h3>見出し３</h3>
<ul>
<li>aaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbb</li>
</ul>
<ol>
<li>1111111111111</li>
<li>2222222222222</li>
</ol>
<h2>見出し2</h2>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
</div>
</div>

<div id="sidebar_container">
<p class="sidetitle">サイドタイトル１</p>
<ul class="sidenavi">
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
</ul>
<p class="sidetitle">サイドタイトル２</p>
<ul class="sidenavi">
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
</ul>
</div>

<div id="footer_container">
<p>Copyright &copy; 著作権表記. All Rights Reserved.</p>
</div>

</div>
</body>
http://d.hatena.ne.jp/chaichanPaPa/20090214/1234611010

今回のテンプレートの文章構造は、まず、body要素の中身をmain_containerというidのdiv要素でラッピングします。
これは、本来、body要素がコンテナーなのですが、IEではバグがあり、しかたがなくラッピングします。


つぎに、main_containerの中を以下の５つの要素に分割します。

  • header_containerというidのdiv要素（ヘッダー）
  • menubar_containerというidのdiv要素（メニューバー）
  • contents_containerというidのdiv要素（コンテンツ）
  • sidebar_containerというidのdiv要素（サイドバー）
  • footer_containerというidのdiv要素（フッター）

上記５つの要素をコンテナーとして、それ単位に段組レイアウトを行います。


本来、見栄えを意識せず、文章を構造化するためにマーキングします。
そのためにHTMLとCSSの仕様が厳密に決められているのです。
そして、ブラウザが仕様通りに実装されていれば、まさにその通りなのですが･･･。
現実は、仕様通りに実装がされていません。
なので、苦労して複数のブラウザの仕様に合うように、HTMLとCSSのコーディングを工夫する必要があるのです。


次回は、やっとCSS段組みレイアウトの解説になる予定です･･･つづく。

追記　for_ie_wrapperについて

contents_containerの要素をfor_ie_wrapperでラッピングしています。
これは、IEでは子要素セレクタが効かないための処置です（IE7では効くらしい･･･）。

関連ページ：