HTML、CSSのチェックをお願いします。
独学でGoogleトップページのデザインを真似てみました。
ブラウザの表示領域の上部に固定されたヘッダーとセンタリングされたコンテンツといった形にしています。
自分で真似たので、表示される結果としてはイメージ通りではあるのですが
実際、回りくどい方法をとっていないか？もっと適切な方法がるのでは？といった事が分からないので
チェックして頂きたいと思います。
CSSに関しては外部ファイルへ記述します。
以下のソースになります。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body{
margin: 0; /* ヘッダーをぴったり上部付けたいので */
}
#header{
color: #DDD;
background-color: black;
position: fixed;
width: 100%;
height: 50px; /* ヘッダー内に高さ50pxの画像を配置したい為 */
z-index: 100; /* wrapperより上にかぶってほしい為。数値自体は適当 */
top: 0;
}
#wrapper{
width: 800px;
margin: 0 auto;
background-color: #dbcfc3;
margin-top: 50px;
height: 1300px; /* 縦スクロールを表示したい為 */
}
#header h1, #header ol, #header li,#header img{
margin: 0;
font-size: 17px;
float: left;
}
#header ol{
padding: 0;
list-style-type: none;
}
#header li{
margin-left: 5px;
}
#header a:visited, #header a:link{
color: #DDD;
}
-->
</style>
</head>
<body>
<div id="header">
<img src="" alt="てすと"><!-- srcには高さ50pxの画像を使用予定 -->
<h1>あいうえお</h1><!-- SEO的にH1を使った方がいいとの記述が多い為。サイトタイトルを記入予定 -->
<div>
<ol>
<li><a href="http://www.google.co.jp">google</a></li>
<li><a href="http://www.yahoo.co.jp">yahoo</a></li>
</ol>
</div>
</div>
<div id="wrapper">
content
</div>
</body>
</html>
どんな些細な事でも構わないので、よろしくお願いします。
お礼
返信どうもありがとうございました。