左右２カラム時の、ヘッダーの使い方

2023/10/28 21:23

このQ&Aのポイント

左右２カラムのサイトでのヘッダーとフッターの使い方について解説します。
HTML５で左右２カラムのサイトを構築するためには、<header></header>と<footer></footer>を使用することが一般的です。
ただし、ヘッダーとフッターの中身には何も書き込まない形にすることが推奨されています。

ベストアンサー

左右２カラム時の、headerの使い方

2014/02/24 18:25

お世話になります。現在HTML５を勉強しているのですが解らない点が出てきてしまったので、お教えいただければ幸いです。左右２カラムのサイトを作ろうとしています。良くある上と下にヘッダ部分とフッター部分があり、中央部分が２つに分かれているものではなく、ヘッダー部分とフッター部分が画面構成的には無いデザインにしたいと思っています。（左側のカラムにナビゲーション。右側のカラムにメインコンテンツ）上の様なデザインのサイトで、HTML５で構造を示す際の記載ですが、 <header></header> <footer></footer>は、記載はしておくが、中身には何も書き込まない形にするのが良いのでしょうか？それとも、そもそもheaderタグも　footerタグも書き込まないのが良いのでしょうか？理由と共にお教えいただければ幸いです。宜しくお願いいたします。

takaginlove
お礼率85% (6/7)

HTML
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2281)

2014/02/25 07:51 回答No.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> という書き方もできます。

質問者

お礼 2014/02/25 12:26

＞「このページのどこがヘッダーなのか」というのは、＞HTMLで規定される物ではなく、概ね制作者の心情、信念、＞または宗教的な思考による物ではないかと思います。この部分に非常に納得がいきました。何かで規定されているのだろうかと延々悩んでいたので…… 何がheaderにが移動するのかはコーダー自身が決めていいものなのですね。また色々な例を、駆け出しの私にもわかりやすく挙げていただき有難うございました。大変勉強になりました。

その他の回答 (3)

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2281)

2014/02/25 02:43 回答No.3

こういう図にした方がわかりやすいですかね。ーーーー　ーーーーーーーーー｜　　｜　｜　　　　　　　｜｜　　｜　｜　　　　　　　｜ーーーー　｜　　　　　　　｜ーーーー　｜　　　　　　　｜｜　　｜　｜　　　　　　　｜｜　　｜　｜　　　　　　　｜｜　　｜　｜　　　　　　　｜｜　　｜　｜　　　　　　　｜ーーーー　ーーーーーーーーーもちろん、ヘッダーが不要だと思えば、書く必要はありません。個人的には、ロゴマークやタイトルが入っている辺りがヘッダーだと思いますけどね。

質問者

お礼 2014/02/25 12:28

上下にあるからヘッダー、フッターというわけではなく、要素の内容によってヘッダーかフッターかは判断するものという事にようやく気付きましたｍｍ

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2281)

2014/02/25 02:13 回答No.2

ヘッダーとナビゲーションが上下に並んでいる、と考えてみてください。ーーーーーーーーーーーーーー｜　　｜　　　　　　　　　｜｜　　｜　　　　　　　　　｜｜ーー｜　　　　　　　　　｜｜　　｜　　　　　　　　　｜｜　　｜　　　　　　　　　｜｜　　｜　　　　　　　　　｜｜　　｜　　　　　　　　　｜ーーーーーーーーーーーーーーヘッダーが左上、ナビゲーションが左下、メインコンテンツが右です。（左上と左下の区切りの線を消すと、全体が二段組みのように見えます。）

質問者

お礼 2014/02/25 12:28

有難うございます。参考になります！

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/02/24 19:55 回答No.1

どんな文書にも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> </body> は最低限の骨格になると考えたほうが良いでしょう。　プレゼンテーションのためにHTMLは作成しないがHTML4.01以降のウェブです。 [サンプル] ★タブは＿に置換してあるので戻す。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="ORUKA">  <style media="screen">  </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>

質問者

お礼 2014/02/25 12:31

詳しく有難うございます。画面的なデザインと、要素の意味をごっちゃにして考えていたように思います。（ヘッダーなんだから上にある！みたいな単純思考です）大変参考になりました！

関連するQ&A

CSSによる3カラムレイアウト
CSSによる3カラムレイアウト以下のHTML(A)をCSSで(B)の様に表示させたいのですが、どの様にすると良いでしょうか？ HTML(A) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr"> 省略 <body> <div id="container"> <div id="wrapper"> <div id="content">コンテンツ</div> </div> <div id="header">ヘッダー</div> <div id="navigation">ナビゲーション</div> <div id="widget">ウィジェット</div> <div id="footer">フッター</div> </div> </body> </html> 表示(B) |ヘッダー　　　　　　　　　　　　　　　　　　　　　| |ナビゲーション｜コンテンツ｜ウィジェット| |フッター　　　　　　　　　　　　　　　　　　　　　| 自分でも大分試行錯誤したのですが、思い通りの結果が得られません。今のところは、コンテンツとナビゲーションをfloatで横並びにし、ヘッダー分の高さをmarginで下げて、ヘッダーはposition: absolute;で上部に表示させています。ウィジェットが無い2カラムの状態ならそれで解決しているのですが、ウィジェットを追加して表示(B)の様に3カラムにしようとすると上手くいきません。 HTMLを変えれば他にやり様は思いつくのですが、containerとwrapperを除く要素の並びは(A)の通りで実現させたいです。また、上記のソース自体あまりスマートではないのですが、もっとスマートなやり方があればそちらも指南頂けると幸いです。
- ベストアンサー
- HTML
ちょっとSEO意識した3カラムＷＥＢサイトの作り方
こんにちは。ＷＥＢページ作成の初心者で、ＣＳＳとＨＴＭＬを使ったちゃんとしたＨＴＭＬを書き始めてからまだ3～4ヶ月といったところの者です。（高校一年です）質問内容は題のとおりです。現在の状況を簡単に説明すると、ＨＴＭＬの記述がヘッダ⇒左メニュー⇒真ん中のコンテンツ⇒右カラム⇒フッタという感じになっています。で、左メニューとコンテンツと右カラムにフロートを設定してます。 ↑の一番の問題点は、h1タグの次にh3タグが着てしまうことだと思います。そこで、これじゃまずいと思い、ＴＯＰページからいじり始めました。しかし、この方法でよいのかがわからないので、すべてのページに反映する前に質問させてください。 http://wingnovel.web.fc2.com/ ↑ここのサイトです。ＴＯＰページのみ（と作者についてのページ）は、コンテンツを『左右のmarginをautoに指定』してセンタリングし左右のカラムをpositionプロパティでうまく持ってきています。しかし、これだと問題があり、コンテンツのたての幅が左右のカラムよりも短いと、左右のカラムがフッタに突き刺さってしまいます。。。（作者についてのページが若干そうなっています…実際にはフッタの前に広告があるのでたいした問題ではなさそうですが）ただ、実際のところ、小説の長さが左右のカラムよりも短いということはありえなさそうなので…このサイトに関してはこの方法でも大丈夫だと思うのですが、他のサイトに流用できそうにもないので… 他にも、ＳＥＯ的に[最悪]という点がこのサイトにおいてありましたら、教えていただけないでしょうか？ひとつきになるのですが、h1のような重要なタグに画像を指定してしまうのは大丈夫なのでしょうか？alt属性はもちろん指定してあるのですが… <h1><img src=/date/**.png" alt="**" width="**" height="**"></h1>という感じになっているはずです… なにかよい方法を教えていただけないでしょうか。
- ベストアンサー
- HTML
perlで3カラムにしたい (css)
perlでcgiのアンケートのページを作っていますが、ページの最上部をヘッダー、ページの両端にメニューや広告、中央にコンテンツを配置する3カラム（三段組み）、最下部をフッターにしたいと考えています。ページ幅 755pxでセンタリング、両端のメニュー、コンテンツともに幅固定で、以下のようなcssファイルを作りましたが、cgiのページを見ると、cssファイルの設定がうまく反映されません。どうすれば良いのか、ぜひ御指導、アドバイス頂けると助かります。ｍ（＿　＿）ｍ当方初心者のため、もし以下のcssファイルの書き方に間違えがありましたら、ご指摘ください。よろしくお願い致します。 ----------------------------- <HTML> <BODY> <div id="wrapper"> <div id="header"> ヘッダー部分 </div> <div id="main"> <div id="menu"> メニュー部分 </div> <div id="contents"> コンテンツ部分 </div> <div id="affiriate"> アフィリエイト部分 </div> </div> <div id="footer"> フッター部分 </div> * { margin: 0; padding: 0; } #wrapper { width: 755px; margin: 0 auto; /* 幅固定（755px）でセンタリングします。*/ } #header { width: 755px; height: 50px; } #main { width: 755px; /* 両端ブロックとコンテンツを囲んでいるセレクタです。*/ } #menu { float: left; width: 150px; /* floatに、width 指定は必須です。*/ } #contents { float: left; width: 505px; #affiliate { float: left; width: 150px; } #footer { clear: both; /* float をクリアしています。*/ width: 755px; height: 50px; } #menu ul { list-style: none; } </div> </BODY> </HTML>
- ベストアンサー
- CSS
2カラムのレイアウト
2カラムのレイアウトにおいて、HTMLの記述部分において。【例1】コンテナーの「★外」に、フッターがある場合と。・「コンテナー(コンテンツ+サイドバー)」・「フッター」【例2】コンテナーの「★中」に、フッターがある場合。・「コンテナー(コンテンツ+サイドバー+フッター)」があるように思いますが? ★どっちでもいいんでしょうか? (どっちも、同じレイアウトになるんでしょうか?　そんな感じがします。)　 ^^ HTML/CSS　初心者なもので。。。よろしくです。　^^ ---------------------------------------------------------------- 【例1】 <div id="container"> 　　<div id="contents">　本文 </div>　　　<div id="sidebar">　サイド部分 </div> </div>　 　<div id="footer"> 　　<p>著作権</p> 　</div>  【例2】 <div id="container"> 　　<div id="contents">　本文 </div>　　　<div id="sidebar">　サイド部分 </div> 　<div id="footer"> 　　<p>著作権</p> 　</div>  </div>　
- ベストアンサー
- HTML
ＣＳＳレイアウトの２カラム左メニューでコンテンツを先にＨＴＭＬに記述できる方法をおしえてください。
趣味でＨＰを作成しております。一般的なＣＳＳレイアウト２カラム左メニューにしたいのですが、ＨＴＭＬ部分で左メニューよりコンテンツを先に記述し、ＣＳＳで左メニューで右にコンテンツがくるようにしたいです。現在のＣＳＳは * { margin:0; padding:0; } .wrapper { width: 750px; margin: 0 auto; } .header { width: 750px; height: 100%; } .main { width: 750px; } .menu { float: left; width: 200px; } .contents { float: left; width: 550px; } .footer { clear: both; width: 750px; height: 100%; } .menu ul { list-style: none; } このような記述です。つづきましてＨＴＭＬ部分は <body> <div class="wrapper"> <div class="header"> ヘッダー部分 </div> <div class="main"> <div class="contents"> コンテンツ部分 </div> <div class="menu"> 　メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> このような感じです。しかしこれだとＨＴＭＬ部分はコンテンツが先にきておりますが、メニューが右になってしまいます。これをＨＴＭＬ部分を変えずにＣＳＳでメニューを左に配置する方法はありますでしょうか？１週間くらい試行錯誤したのですが、できませんでした。お詳しい方教えてください。
- ベストアンサー
- HTML
ナビとコラムをくっつけたい
カテゴリ迷いましたが、こちらに投稿させていただきます。現在HTML/CSSのタグ打ちでHPを作っています。画像を参照していただけると幸いです。今の状態は、ナビ・カラムのどちらかのピクセルを増やさないとヘッダーと同じ幅にならない状態なのですが、ヘッダーと同じ横幅にしようとピクセルを増やすとコラム（左側の広い幅の方）がなくなってしまうんです。（意味がわからなかったらすみません）素材を白系のものを使えばごまかせますが、今回は題材的にも画像のような暗めの素材を使いたく、どうにか直したいと思っています。付け足しで、ページ両サイドの領域に背景や色を入れるにはどうしたらいいのでしょうか？無知で申し訳ないのですが、直し方などわかる方いらっしゃいましたら是非ご教示くださいませ。また、「WEB上で見るとこうなってる」というように分かるようなソースをのぞけるツールなどありませんか？それを教えていただけるだけでもいいです。補足が必要ならばいたしますので、どうかよろしくお願いします。
- ベストアンサー
- HTML
CSSでページ下部ソースを上に表示するには？
タイトルがわかりづらくて申し訳ございません・・・。やりたいことを要約しますと、CSSをつかいページの上部によく配置しているナビゲーションメニューをページ上では上に表示したいのですが、ソース上、すべてのページが共通ですので SEOを考えて、ソースの下に配置したいのですがどうすればいいかわかりません・・・現在、サイドバーはfloatをつかい、ソース内では、コンテンツの下にきております。現在の構成と、希望の構成を書きますので、ご教授いただけると助かります！ ■現在の構成（ヘッダー）（ナビゲーションメニュー）（コンテンツ）※ブラウザでは右側（サイドバー）※ブラウザでは左側に表示（フッター） ■希望の構成（ヘッダー）（コンテンツ）（サイドバー）（ナビゲーションメニュー）（フッター）ブラウザ上の表示は、同じにしたいです。
- ベストアンサー
- CSS
【CSS】不具合の原因がわかりません。
すいません、少しややこしいかもしれませんが・・・。下記のように、「ヘッダ」「コンテンツ」「フッタ」の3つにレイアウトが分かれていて、「コンテンツ」「フッタ」に　clear: both;　float: none;　をかけると不具合なく表示されます（縦に3つ並びます）。ですが、諸事情により「フッタ」部分にcssをかけることが出来なくなりました。（企業によるガイドラインなので詳しくは書けません。すいません・・・。）「フッタ」から　clear: both;　float: none;をはずすとFirefoxではレイアウトがずれてしまいます。float: left　をかけたように「コンテンツ」の右側に「フッタ」が来てしまいます。いちから構築しなおしてはいるのですが、「コンテンツ」部分にmarginやpaddingの値を加えたり（左右ではなく上下でも）、高さを指定したりするだけでずれてしまいます。原因は何が考えられるでしょうか？よろしくお願い致します。ちなみに宣言文は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> としています。 ////////html//////// <body> <div id="header"> ヘッダ </div> <div id="contents"> コンテンツ </div> <div id="footer"> フッター </div> ////////css//////// #header{ } #contents{ clear: both; float: none; } #footer{ clear: both; float: none; }
- 締切済み
- HTML
PHP Smartyについて質問です。
レイアウトファイル(main.tpl)にタグを配置しそのタグをあるデータに置換したいと考えています。例えば、以下のような感じです。～～～ main.tpl ～～～～～～～～～～～～～～～～ <html> <body> <div id="header">ヘッダー</div> <div id="nav">ナビゲーション</div> <div id="contents">#CONTENTS#</div> <div id="footer">フッター</div> </body> </html> ～～～～～～～～～～～～～～～～～～～～～～～上記の「#CONTENTS#」の部分をDBで保存しているコンテンツに置換したいのですが {if}構文や{$hoge}などのSmartyタグが文字列として出力されてしまいます。何か無理やりDBのデータをSmartyのコンパイラに通すメソッド等ありませんでしょうか？もしくは、他のやり方で何かいい方法はありませんでしょうか？ DBで保存している部分をtplファイルにして、$smarty->fetch("fuga.tpl"); 等で読みだせば解決するんですが、どうしてもこのコンテンツ部分はtplファイルにはせず DBから直接コンパイルしたいのです。どなたかご教授くださいませ。よろしくお願いいたします。
- ベストアンサー
- PHP
Perlでcssを使わないで3カラムにしたい
現在、Perlでcgiを作成していますが、ページの最上部にヘッダー、ページの両端にメニューや広告、中央にメインコンテンツを配置する3カラム（三段組み）、最下部をフッターにしたいと考えています。現在、メインコンテンツは完成しております。 cssは、使わないで上記のようなレイアウトをPerlで組みたいのですが、上記にようにしたい場合は、どのように書けば良いのでしょうか？横幅全体は800。(ヘッダーとフッターも横幅は800) 左メニュー180、中央メインコンテンツ 440 、右メニュー180 で組みたいと思っています。お手数をおかけ致しますが、アドバイスよろしくお願い致します。
- ベストアンサー
- Perl

左右２カラム時の、ヘッダーの使い方

左右２カラム時の、headerの使い方