CSS(スタイルシート)でデザインする
「auto」でWebページを中央表示させる
ここで使うタグ
margin : 幅 auto ;
ページ全体にを中央に表示させる
<!DOCTYPE>
ドキュメントタイプを宣言する
これでWebページはほぼ完成ですがブラウザで実際に表示させてみると左寄りに表示されるため少し見にくいです。そこで左寄りに表示されているWebページを中央へ表示させたいと思います。
今回は上下に20px、左右にautoでmarginを指定します。
#bodyにmargin : 20px auto;を指定します。
ただしmarginだけではまだWebページが中央へ表示されてないと思います。それはWebページ作成時に指定しないといけないタグがあります。
<!DOCTYPE> です。ただ<!DOCTYPE>はごちゃごちゃしてなんか呪文みたいなタグなので最初からそれを見ちゃうと嫌になりそうなので、少し目がタグに慣れてきたと思うので今教えます。
自分のページを>作成するときは<html>、<head>、<body>を指定するときに<!DOCTYPE>も一緒に指定するといいでしょう。
<!DOCTYPE>は簡単に言うとページをどういうものかをしめすものです。<!DOCTYPE>は何種類かありますが今回はこれを紹介します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
これを文書の先頭(<html>タグよりも上)に記述しもともとあった<html>タグを消してください。
ホームページ ソース
XHTML(HTML)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=shift_jis">
<link rel="stylesheet" href="style.css" type="text/css" >
<title>タイトル</title>
</head>
<body>
<div id="body">
<div id="box-1">
<h1>h1 サイトタイトル</h1>ホームページの説明文 <br />
テキスト テキスト テキスト テキスト テキスト テキスト
</div>
<h1>h1 サイトタイトル</h1>ホームページの説明文 <br />
テキスト テキスト テキスト テキスト テキスト テキスト
</div>
<div id="box-2">
<div class="menu">メニュー</div>
<ul>
<li>ページ1</li>
<li>ページ2</li>
<li>ページ3</li>
<li>ページ4</li>
<li>ページ5</li>
</ul>
<div class="menu">メニュー</div>
<ul>
<li>ページ1</li>
<li>ページ2</li>
<li>ページ3</li>
<li>ページ4</li>
<li>ページ5</li>
</ul>
</div>
<div class="menu">メニュー</div>
<ul>
<li>ページ1</li>
<li>ページ2</li>
<li>ページ3</li>
<li>ページ4</li>
<li>ページ5</li>
</ul>
<div class="menu">メニュー</div>
<ul>
<li>ページ1</li>
<li>ページ2</li>
<li>ページ3</li>
<li>ページ4</li>
<li>ページ5</li>
</ul>
</div>
<div id="box-3">
<h2>h2 ページタイトル</h2>
<p>テキスト テキスト (省略)</p>
<h3>h3 見出し</h3>
<p>テキスト テキスト (省略)</p>
<h3>h3 見出し</h3>
<p>テキスト テキスト (省略)</p>
</div>
<h2>h2 ページタイトル</h2>
<p>テキスト テキスト (省略)</p>
<h3>h3 見出し</h3>
<p>テキスト テキスト (省略)</p>
<h3>h3 見出し</h3>
<p>テキスト テキスト (省略)</p>
</div>
<div id="box-4">
copyright (c) ~~~.com All right reserved.
</div>
copyright (c) ~~~.com All right reserved.
</div>
</div>
</body>
</html>
CSS(スタイルシート)
* {
padding : 0px ;
margin : 0px ;
}
.menu {
font-size : 15px ;
background-color:#c0c0c0;
padding: 5px ;
}
ul {
padding : 10px 5px 10px 30px;
line-height: 20px;
}
p {
padding : 20px ;
line-height: 30px;
}
h1 {
font-size : 20px ;
color : #ffffff ;
padding-bottom : 10px ;
}
h2 {
font-size : 18px ;
color : #ffcc00 ;
padding-left: 15px ;
}
h3 {
font-size : 18px ;
color : #0000ff ;
padding-left: 15px ;
}
padding : 0px ;
margin : 0px ;
}
#body {
width :800px ;
border: 1px solid #9acd32;
margin : 20px auto;
}
width :800px ;
border: 1px solid #9acd32;
margin : 20px auto;
}
#box-1 {
border-bottom: 1px solid #9acd320;
background-image: url("img/top.png");
font-size : 10px ;
color : #ffffff ;
padding : 40px 0px 100px 20px ;
}
border-bottom: 1px solid #9acd320;
background-image: url("img/top.png");
font-size : 10px ;
color : #ffffff ;
padding : 40px 0px 100px 20px ;
}
#box-2 {
float : left;
width :200px;
font-size : 14px ;
}
float : left;
width :200px;
font-size : 14px ;
}
#box-3 {
float : right;
width :600px;
}
float : right;
width :600px;
}
#box-4 {
clear: both;
width: 800px;
background-color : #9acd32;
padding: 5px 0px;
text-align: center;
}
clear: both;
width: 800px;
background-color : #9acd32;
padding: 5px 0px;
text-align: center;
}
.menu {
font-size : 15px ;
background-color:#c0c0c0;
padding: 5px ;
}
ul {
padding : 10px 5px 10px 30px;
line-height: 20px;
}
p {
padding : 20px ;
line-height: 30px;
}
h1 {
font-size : 20px ;
color : #ffffff ;
padding-bottom : 10px ;
}
h2 {
font-size : 18px ;
color : #ffcc00 ;
padding-left: 15px ;
}
h3 {
font-size : 18px ;
color : #0000ff ;
padding-left: 15px ;
}