締切済み

html ヘッダーを固定し

2014/12/19 18:50

海外サイトのテンプレートを元にホームページを作っています。出来上がったホームページを改良したいと思っています。ヘッダーとフッターを固定し、ヘッダーの中にはcssを使ったhtmlを入れ、中央部分にリンク先が表示されるようにしたいです。検索しながら試行錯誤していますが、全然うまくいきません。素人が手を出す領域ではないかもしれませんが、お知恵を貸して頂けるとありがたいです。よろしくお願いします。

soulset319
お礼率80% (24/30)

CSS
回答数1
ありがとう数14

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

みんなの回答

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

2014/12/21 10:18 回答No.1

スタイルシートを使用してプレゼンテーションを指定する最大の目的は構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )ですよ。　デザイン目的でHTMLを書かないためです。＞海外サイトのテンプレートを元にホームページを作っています。　文書構造が異なるため、それだと決してうまく行きません。 ★HTMLの文書構造が分からないので具体的なアドバイスは不可能です。＞ヘッダーとフッターを固定し、ヘッダーの中にはcssを使ったhtmlを入れ、中央部分にリンク先が表示されるようにしたいです。　という発想ではなく。・ヘッダーを視覚系メディアではウィンドウのトップに固定して　　position:fixed;height:100px; ・ヘッダーの下部にナビゲーションリストを横並びで表示して　　position:absolute;top:100px; ・ポインターを項目に乗せると、その詳細がヘッダーの下にぶら下がって表れるようにしたい　　li ul{display:none;} 　　li:hover ul{display:block;} 　という風に考えます。例えば、HTML5で書くと下記のように ※HTML5より前のHTMLでしたら　<header></header>は<div class="header"></div>のようになる。section,footer,navも同様です。理由＞DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) ＞HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) ★タブは＿に置換してあるので戻す。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> <style media="screen">  </style> </head> <body> ＿<header> ＿＿<h1>ページタイトル</h1> ＿＿<nav> ＿＿＿<ol> ＿＿＿＿<li>Menue1 ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="">あいうえお</a></li> ＿＿＿＿＿＿<li><a href="">かきくけこ</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li>Menue2 ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="">さしすせそ</a></li> ＿＿＿＿＿＿<li><a href="">たちつてと</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li>Menue3 ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="">なにぬねの</a></li> ＿＿＿＿＿＿<li><a href="">はひふへほ</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿</ol> ＿＿</nav> ＿</header> ＿<section> ＿＿<h2>本文</h2> <section> <h2>本文</h2><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p> </section> ＿</section> ＿<footer> ＿＿<h2>フッタ</h2> ＿</footer> </body> </html>

質問者