てんぽ: div id="header"の違和感

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

div id="header"の違和感

2006年05月21日(日)

div要素とデザインの関係
ブログ型
div要素で全体をヘッダ・フッタ・本文などに区分する。

ブログ型のdiv要素の使い方のうち、とくにh1要素(といくつかの要素)をヘッダとしてまとめることには違和感を覚えます。 (XHTML2.0型でいうところの) h1が「支配する」範囲はページ全体であると考えられるのに、以下のようにdivがその範囲を分断してしまう(木構造のバランスが悪い)からです。

<div id="header">
    <h1>見出し1</h1>
</div>
<div id="body">
    <h2>見出し2</h2>
    (以下略)

自分の場合、FC2ブログのテンプレを作るときには、XHTML2.0型ブログ型の中間のようなdivの使い方をしていますが、 h1を含んだヘッダdivは使いません(XHTML2.0型)。とはいえ、見栄えのためにdivを追加することもあって(ブログ型)、その場合は

  • 連続するdivの開始タグは2つ以下(<div><div>...)
  • 連続するdivの終了タグは3つ以下(...</div></div></div>)

になるようにする、という制限を加えています。

以下、関係があるかもしれないリンク。

  1. 見出しの管轄範囲を考える
  2. プロが教えるMovable Typeの構造デザイン - 元原稿 div要素の階層構造がよろしくない
  3. 見出し構造とツリー構造明示
  4. セクションの「見出し情報(header)」
#91
カテゴリ:HTML・CSS
タグ[ HTML ]

同じカテゴリの記事

(-0件)

コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/91-532150a6

<<CSSで三段組 | Beautiful Tomorrow, ESCM>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。