- ベストアンサー
左右２カラム時の、ヘッダーの使い方
- 左右２カラムのサイトでのヘッダーとフッターの使い方について解説します。
- HTML５で左右２カラムのサイトを構築するためには、<header></header>と<footer></footer>を使用することが一般的です。
- ただし、ヘッダーとフッターの中身には何も書き込まない形にすることが推奨されています。
- takaginlove
- お礼率85% (6/7)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
No.2、No.3です。 一応補足しておきます。 私はデザイン案のロゴマークにある部分がヘッダーだと思ったので、 <header> ロゴマーク </header> <nav> ABOUT WORKS </nav> <section> コンテンツ </section> No.3の、このように分割しました。 しかし、ロゴマークはヘッダーではなくナビゲーションの一部だと思われたのであれば、 <nav> ロゴマーク ABOUT WORKS </nav> <section> コンテンツ </section> としたり、ロゴマークはコンテンツではないと思われるのであれば、背景画像などにして作る事になると思います。 <nav style="background-image:ロゴマーク"> ABOUT WORKS </nav> <section> コンテンツ </section> これらの作り方の違いは最初に書いたような考え方の違いによる物ですし、実際にHTMLコーダーごとに違います。 （それが意図した分類かどうかはともかくとして。） HTMLの文法では「ヘッダーに<header>をつける」ということは規定されていますが、 「このページのどこがヘッダーなのか」というのは、HTMLで規定される物ではなく、概ね制作者の心情、信念、または宗教的な思考による物ではないかと思います。 文書にヘッダーを付けることは義務ではありません。 ただ、この文書は何の文書か、このサイトはどういうサイトかというのを書こうとすると、結果的に、一般的に "ヘッダー" と呼ばれているものになると思います。 （それでもヘッダーではない、というのであれば、私はそれを否定しません。） 『結果的に、一般的に "ヘッダー" と呼ばれているもの』を見せたくないのであれば、 <header style="display:none"> ヘッダー </header> <nav> ロゴマーク ABOUT WORKS </nav> <section> コンテンツ </section> という書き方もできます。
その他の回答 (3)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
こういう図にした方がわかりやすいですかね。 ーーーー ーーーーーーーーー ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ーーーー ｜ ｜ ーーーー ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ーーーー ーーーーーーーーー もちろん、ヘッダーが不要だと思えば、書く必要はありません。 個人的には、ロゴマークやタイトルが入っている辺りがヘッダーだと思いますけどね。
お礼
上下にあるからヘッダー、フッターというわけではなく、 要素の内容によってヘッダーかフッターかは判断するものという事にようやく気付きましたｍｍ
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
ヘッダーとナビゲーションが上下に並んでいる、と考えてみてください。 ーーーーーーーーーーーーーー ｜ ｜ ｜ ｜ ｜ ｜ ｜ーー｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ーーーーーーーーーーーーーー ヘッダーが左上、ナビゲーションが左下、メインコンテンツが右です。 （左上と左下の区切りの線を消すと、全体が二段組みのように見えます。）
お礼
有難うございます。参考になります！
- ORUKA1951
- ベストアンサー率45% (5062/11036)
どんな文書にもheaderに該当するものやフッターに該当するものがあるはずです。 御存知だと思いますが、これらの要素が要素がHTML5で追加された経緯からおさらいすると、HTML4.01以前のHTMLでは、プレゼンテーションのためにHTMLのタグが流用されてきました。例えばTABLEでデザインするとか。 それでは、視覚障害者がスクリーンリーダーで読み上げたりしても意味不明になるし・・そこで「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」が提唱され、「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」とされました。 ところがこれは多くの人に真意を理解されず、<div id="contener">とか<div class="leftMenue">とか、およそ文書構造とは言いがたいマークアップがデザインのために行われてきました。HTMLのソースを見ただけではどこが文書の要約でどこが本文でどこが文書情報か判らない。 HTML5“とか”アプリ開発入門（1）：Webの3つの問題を解決する「HTML5」とは何なのか (2/2) - ＠IT( http://www.atmarkit.co.jp/ait/articles/1008/30/news106_2.html ) のページの 【問題2】文書内に埋め込まれた「意味」が不明確』 → 【解決】文書内に埋め込まれた「意味」を明確にする』 あたり・・・ すなわち、 header要素には、文書のタイトル、導入、ナビゲーションなどをグループ化します。 section要素は、コンテンツの主題をグループ化します。通常は見出しを伴います。 イメージ的には機械が自動的に目次を作成する目印と考えると良いです。 sectionの階層で、節→章→項→小項となり、それぞれが見出し<h>をもつ footer要素は、そのセクション(ルートにある場合はその文書)に関する情報。例として「誰が書いたのか」「関連のドキュメントへのリンク」「著作権」などです。 端的に言うと、検索エンジンがHTMLだけ読んで、その文書の本文セクションと理解してほしい物以外はheaderやfooterにまとめたほうが良いと言う事です。 従ってあなたの手書イメージだとheaderが左サイドにまとめられるようプレゼンテーションしたいように見えます。ロゴやサイトナビゲーションは本文ではないですね。 HTML5では、やはり <body> <article><!-- ひとつしかない場合は書かなくて良い --> <header> <h1>ロゴ</h1>、<nav>ナビゲーション</nav>、<div id="abstract">要約</div>など </header> <section> 本文、このページの主題 <section> </section> </section> <footer> 作者、連絡先、他のページへの簡単なリンクなど </footer> </article><!-- header,section,footerだけならなくても --> </body> は最低限の骨格になると考えたほうが良いでしょう。 プレゼンテーションのためにHTMLは作成しないがHTML4.01以降のウェブです。 [サンプル] ★タブは＿に置換してあるので戻す。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="ORUKA"> <!--[if IE]> ＿<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> ＿<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <style media="screen"> <!-- html,body{margin:0;padding:0;position:relative;} html{height:100%;} body{ height:100%; width:90%;min-width:630px;max-width:890px; margin:0 auto;padding:1px; } header{position:absolute;left:0;top:0;min-height:100%;background-color:yellow;width:200px;} section{margin-left:205px;} footer{position:absolute;width:200px;left:0;bottom:0;} --> </style> </head> <body> ＿<article> ＿＿<header> ＿＿＿<h1 id="title">Your title</h1> ＿＿＿<nav> ＿＿＿＿<ul> ＿＿＿＿＿<li><a href="#">Some</a></li> ＿＿＿＿＿<li><a href="#">navigation</a></li> ＿＿＿＿＿<li><a href="#">links</a></li> ＿＿＿＿</ul> ＿＿＿</nav> ＿＿</header> ＿＿<section> ＿＿＿<aside> ＿＿＿＿<h3>Something aside</h3> ＿＿＿</aside> ＿＿＿<h2>A smaller heading</h2> ＿＿＿<p> ＿＿＿</p> ＿＿</section> ＿＿<footer> ＿＿＿<h3>A nice footer</h3> ＿＿</footer> ＿</article> </body> </html>
お礼
詳しく有難うございます。 画面的なデザインと、要素の意味をごっちゃにして考えていたように思います。 （ヘッダーなんだから上にある！みたいな単純思考です） 大変参考になりました！
お礼
＞「このページのどこがヘッダーなのか」というのは、 ＞HTMLで規定される物ではなく、概ね制作者の心情、信念、 ＞または宗教的な思考による物ではないかと思います。 この部分に非常に納得がいきました。 何かで規定されているのだろうかと延々悩んでいたので…… 何がheaderにが移動するのかはコーダー自身が決めていいものなのですね。 また色々な例を、駆け出しの私にもわかりやすく挙げていただき有難うございました。大変勉強になりました。