燈明日記 このページをアンテナに追加 RSSフィード

ごあいさつ

燈明日記へようこそ!!

燈明日記の主なテーマは、以下の通りです。

そして、燈明日記へ来られたのも『私』と『あなた』の何かのご縁です。なので、どうぞごゆっくりご覧下さい!


2009/3/6(金)

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

解説第三弾です。

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

今回は、ソースの順番ではスタイルシート(CSS)の所の解説なのですが・・・、先にbody要素の中身を解説します。

body要素中の文章構造が理解出来て、はじめてそれ対して見栄えのCSSを適用することが出来るのです。

<body>
<div id="main_container">

<div id="header_container">
<h1>見出し1</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>見出し2</h2>
<p>テキスト</p>
<p><a href="#">リンク</a></p>
<h3>見出し3</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">サイドタイトル1</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">サイドタイトル2</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の中を以下の5つの要素に分割します。

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

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


本来、見栄えを意識せず、文章を構造化するためにマーキングします。

そのためにHTMLとCSSの仕様が厳密に決められているのです。

そして、ブラウザが仕様通りに実装されていれば、まさにその通りなのですが・・・。

現実は、仕様通りに実装がされていません。

なので、苦労して複数のブラウザの仕様に合うように、HTMLとCSSのコーディングを工夫する必要があるのです。


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


追記 for_ie_wrapperについて

contents_containerの要素をfor_ie_wrapperでラッピングしています。

これは、IEでは子要素セレクタが効かないための処置です(IE7では効くらしい・・・)。


関連ページ:

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証