ソースの確認｜positionレイアウトホームページ作成講座

Loading

スポンサードリンク

CSSデザインサンプルのホームページ制作の流れをご確認下さい。

HTMLファイル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="ROBOTS" content="ALL">
<meta name="description" content="ホームページの説明文">
<meta name="keywords" content="キーワード,キーワード,キーワード">
<title>ホームページ作成</title>
<link rel="stylesheet" href="css/hp.css" type="text/css">
</head>
<body>
<div id="wrapper">
<!--header部分-->
<div id="header">
*** ヘッダー部分 ***
</div>
<!--header部分終わり-->
<!--container 基点-->
<div id="container">
    <!--contents部分-->
    <div id="contents">
    *** コンテンツ部分 ***
    </div>
    <!--contents部分終わり-->
    <!--sidebar部分-->
    <div id="sidebar">
    *** サイドバー部分 ***
    </div>
    <!--sidebar部分終わり-->
</div>
<!--container部分終わり-->
<!--footer部分-->
<div id="footer">
*** フッター部分 ***
</div>
<!--footer部分終わり-->
</div>
</body>
</html>

CSSファイル

/*-------------------------フォントスタイル フォントサイズの指定*/ 
body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 90%;
  text-align: center;
  margin: 0;
  padding: 0;
}

/*-------------------------wrapperの指定*/ 
#wrapper {
  text-align: left;
  width: 800px;
  margin: 0 auto;
  padding: 0;
}

/*-------------------------headerの指定*/ 
#header {
  height: 160px;
  margin: 0;
  padding: 0;
}

/*-------------------------containerの指定*/ 
#container {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

/*-------------------------contentsの指定*/
#contents {
  margin: 0 0 0 200px;
  padding: 0;
}

/*-------------------------sidebarの指定*/
#sidebar {
  width: 180px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
}

/*-------------------------footerの指定*/
#footer {
  text-align: center;
  margin: 0;
  padding: 0.5em 0;
}

スポンサードリンク