webページのヘッダーについて

解決済

質問者：takuya12421242
質問日時：2012/05/17 15:35
回答数：1件

最近のブログでは上部に固定されたバー(画像みたいな)がありますがあれはどうやって作っているのでしょうか？　よかったら詳しく乗っいているホームページ等を教えて下さい。HTMLソースなどが詳しく乗ってれば更にありがたいです。

通報する

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

質問の本文を隠す

回答 (1件)

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

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2012/05/17 19:05

固定と言うのはどういう意味でしょうか？

スクロールしても常に最上部にあるということ？
それとも単に一番上にあるということ？

HTMLソースは関係ありません。

たとえ下のほうにあっても・・

<body>
<div class="header">
<h1>タイトル</h1>
</div>
<div class="section">
<h2>記事見出し</h2>
<p>本文</p>
<p>本文</p>
</div>
<div class="footer">
<h3>文書情報</h3>
<p>・・・</p>
<p class="siteLogo">FCブログ</p>
</div>
</body>
だとして、スタイルシートで
absoluteでトップ,fixedで固定(印刷時には各ページに印刷)

html,body{margin:0;padding:0;}
div.header,div.section,div.footer{margin:0;border:solid 1px gray;}
div.header{background-color:yellow;}
div.section{background-color:rgb(255,255,200);height:80%;}
div.footer{background-color:pink;}
div.footer p.siteLogo{
position:absolute;
/* position:fixed; */
top:0;left:0;width:100%;
height:80px;line-height:80px;
font-size:60px;font-weight:bold;
background-color:silver;
}