※ ChatGPTを利用し、要約された質問です（原文：HPのCSSについて）
HPのCSSでヘッダーの固定をする方法
このQ&Aのポイント
HPのCSSでヘッダーを固定する方法を解説します。
フリーのCSSを使って背景色や文字の大きさの変更、センタリングの解除ができるか試してみたが上手くいかなかった場合の対処法をお伝えします。
CSSのコードを修正することでヘッダーの固定、背景色の変更、文字の大きさの変更、センタリングの解除が可能です。
超初心者です。へッダーの固定をしたページを作りたいのですが、フリーのCSSを使ってやってみたところ、背景の色、タイトルの文字の大きさ、現在センタリングになっているのを全体に表示したいのに、それが上手くいきません。以下、試してみたCSSなのですが、どこをどう変えれば、上記の変更が可能でしょうか。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSSでヘッダーを固定する 第４歩</title>
<style type="text/css">
html {
height:100%;
}
body {
margin:0px;
height:100%;
}
#body {
width:700px;
margin:0px auto;
}
#header {
background:#ccffcc;
height:100px;
/* width:100%;*/
width:700px;
position:fixed;
}
#main {
padding-top:100px;
background:#ffff99;
}
#footer {
background:#ffcc99;
height:80px;
}
</style>
<!--[if IE 6]>
<link rel="stylesheet" href="./fixheader_ie6.css" type="text/css" />
<![endif]-->
</head>
<body>
<div id="body">
<div id="header">
ヘッダー
</div>
<div id="main">
コンテンツ1<br />
コンテンツ2<br />
コンテンツ3<br />
コンテンツ4<br />
コンテンツ5<br />
コンテンツ6<br />
コンテンツ7<br />
コンテンツ8<br />
コンテンツ9<br />
コンテンツ10<br />
コンテンツ11<br />
コンテンツ12<br />
コンテンツ13<br />
コンテンツ14<br />
コンテンツ15<br />
コンテンツ16<br />
コンテンツ17<br />
コンテンツ18<br />
コンテンツ19<br />
コンテンツ20<br />
コンテンツ21<br />
コンテンツ22<br />
コンテンツ23<br />
コンテンツ24<br />
コンテンツ25<br />
コンテンツ26<br />
コンテンツ27<br />
コンテンツ28<br />
コンテンツ29<br />
コンテンツ30<br />
コンテンツ31<br />
</div>
<div id="footer">
フッター
</div>
</div>
</body>
</html>
