こんにちは。 html5を勉強してサイトを作っている者です。勉強のためにそれなりの数のサイトのソースを拝見しているのですが、私の考えに合ったもの、考えと違ったものがあります。私の考え・作りたいもの：----------------------- ～の3カラム～ ------------------------------ よく見かけるもの～の3カラム～私のやりたい事は邪道でしょうか？ご意見頂ければと思います。よろしくお願いいたします。

html5、私の考えは邪道？

解決済

質問者：shoshin01
質問日時：2013/02/19 01:59
回答数：1件

こんにちは。

html5を勉強してサイトを作っている者です。
勉強のためにそれなりの数のサイトのソースを拝見しているのですが、私の考えに合ったもの、考えと違ったものがあります。

私の考え・作りたいもの：-----------------------
<header>
～
<header>
<div class="wrapper">
<div>の3カラム
</div>
<footer>
～
</footer>
------------------------------
よく見かけるもの
<div class="wrapper">
<header>
～
</header>
<div>の3カラム
<footer>
～
</footer>

</div>

私のやりたい事は邪道でしょうか？ご意見頂ければと思います。よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2013/02/19 09:15

いずれも正確には正しくありません。

HTML5では、インタラクティブな要素や属性--<video><canvas>--と共に、いやそれ以上にセマンティックなHTMLを目指しています。それはWebを巨大なデータベースと考えるとき、そのHTML文書の中で、どれがヘッダで、どれが本文で、どれがフッタで、どれが本文と関係ない記事かを検索エンジンを含め、わかるようにマークアップするということです。
　DIVに関しても、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.5 Grouping content — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/grou … )］より
　すなわち『著者は、他に適切な要素がないときの最後の手段の手段としてdiv要素を使用することが、強く奨励される。div要素より適切な要素を使用することで、読者のアクセシビリティと、著者の保守が容易になることが知られている』

　これはDIVは、「原則使用しない、本当により適切な要素がないか見直せ!!」ということですね。

　ですので、
<body>
　<header>
　　文書のヘッダ
　</header>
　<section><!--
　　<h2>本文見出し</h2>
　　<section>
　　　<h3>項目見出し</h3>
　　　・・記事・・
　　</section>
　　<section>
　　　<h3>項目見出し</h3>
　　　・・記事・・
　　</section>
　　<nav id="contentsTable">
　　　・・・目次・・
　　</div>
　　<aside>
　　　本文とは関係ない記事
　　</aside>
　</section>
　<footer>
　　フッタ
　</footer>
</body>
となるべきでしょう。
　section要素は、セクショニング・コンテンツのひとつで、これは文書のアウトラインを構成しうるときにのみ称されます。目次を自動生成すると考えると良いでしょう。
　sectionの階層によって
section 編
　section 章
　　section 節
　　　section 項
となるような場合ということです。
　本文と関係ないものは、<aside>---目次を作らない--や<figure>--他から参照される注釈・挿絵的なもの、<article>--自身にheader,section,footerを持ちうる完結した記事、他の記事の要約とか--を使用します。

　wrapperとして必要なのでしたら、それが記事全体を囲むものでしたら
<body>
　<article>
　　<header></header>
　　<section></section>
　　<footer></footer>
　</article>
</body>
でしょうし、本文中にブログ記事などを持ってくるなら
・・・前略・・・・
　　　<section>
　　　　<h3>見出し</h3>
　　　　・・・記事・・
　　　　<article>
　　　　　<header>ヘッダ</header>
　　　　　<section></section>
　　　　　<footer></footer>
　　　　</article>
　　　</section>
・・・・後略・・・・
でしょう。

＞</header>
＞<div class="wrapper">
＞<div>の3カラム
＞</div>
＞</footer>
は、色々な意味で、おかしいです。上記のDIVの使用法に加えて
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.5 Grouping content — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/grou … )］より
『div要素は、まったく特別な意味を持ちません。これを用いてこれは、連続した要素をグループ化することで共通のセマンティクスをマークアップします。lang、属性とtitle属性(およびグローバル属性)を使用することができます。』--wrapperはセマンティクではありません。この場合は<section>を使用すべきです。

(参考)
　実はDIVの使い方はHTML4.01でも『id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』となっていました。それで考えてもwrapperというclass名はおかしい。

・HTML5の『新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )』
　⇒HTML5( http://www.w3.org/TR/html5/ )

　よく見かけるからと言って正しいわけじゃありません。wrapperとか、leftMenueとか腐るほど見かけますが(^^)

　上記で上げたサンプル、誰が見てもどこがheaderでどこが本文で、それが何階層かも一目瞭然でしょう。一番楽になるのは自分自身です。

　ちなみに、3カラムで表示させるスタイルシートを書くと
body>header,body>section,body>footer{margin:0 auto;max-width:800px;}
section{position:relative;min-height:300px;}
section section{margin:0 200px;min-height:0;}
section nav,section aside{width:200px;position:absolute;top:0;font-size:0.9em;}
section nav{left:0;}
section aside{right:0;}