現在地: Home » 初級ホームページ作成講座：目次 » タグの確認

タグの確認

CSSファイル

/*-------------------------フォントサイズ等の指定*/ 
body{
     font-size: 85%;
     text-align:center;
     padding: 0;
     margin: 0;
}

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

/*-------------------------headerの指定*/ 
#header{
     padding: 0;
     margin: 0;
     height: 100px;
     background-color: silver;
     color: black;
}

#header p{
     padding: 0;
     margin: 0;
}

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

/*-------------------------contentsの指定*/
#contents{
     padding: 0;
     margin: 0 180px 0 0;
     background-color: #ffffd5;
     color: black;
}

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

/*-------------------------footerの指定*/
#footer{
     text-align: center;
     padding: 0;
     margin: 0;
     background-color: silver;
     color: black;
}

#footer p{
     padding: 0;
     margin: 0;
}

▲Top

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">
<p>ホームページ作成</p>
</div>
<!--header部分終わり-->
<!--container部分-->
<div id="container">
<!--contents部分-->
<div id="contents">ココに本文</div>
<!--contents部分終わり-->
<!--sidebar部分-->
<div id="sidebar">サイド部分</div>
<!--sidebar部分終わり-->
</div>
<!--container部分終わり-->
<!--footer部分-->
<div id="footer">
<p>Copyright（C） ********　All Rights Reserved</p>
</div>
<!--footer部分終わり-->
</div>
</body>
</html>

ながらくお付き合い頂きありがとうございます。

これで一通りのレイアウトは完成です。後はデザインを変更したり、コンテンツを充実させるだけですね。参考までに、デザインの変更ページを用意したので見て下さい。あくまでも1つのパターンです。デザインは1つのレイアウトでもいろいろ出来ますので、どんどん練習して下さい。

▲Top

高性能サーバ

低価格サーバ

無料ホームページスペース