現在地: Home » 初級ホームページ作成講座：目次 » #wrapper部分

#wrapper部分

CSS/HTMLファイルの設定

下記コードをCSSファイルにコピー&ペーストして下さい。

下記コードをHTMLファイルの　<div></div>　となっている部分と入れ替えて下さい。

CSS/HTMLファイルの解説

スタイルシート

#wrapper{
text-align: left;-----/1
padding: 0;
margin: 0 auto;-----/2
width: 700px;-----/3
}

これからパーツを作っていく上でそれら全てを包括するボックスです。以降のボックスは全てこの中に入ります。

  1. text-align: left;
    • ここでbody部分で中央寄せにしていた文字配置を左寄せに戻します。
  2. margin: 0 auto;
    • ページ全体をセンタリングする指定です。最新のブラウザはこの指定だけでOKですが、古いブラウザはbody部分で{text-align: center;}を指定して、且つこの指定をしなければ中央に配置されません。
  3. width: 700px;

HTML

<body>
<div></div>
</body>
</html>↓
<body>
<div id="wrapper">
</div>
</body>
</html>

今現在の完成状況→サンプル表示（#wrapper領域をグレーで表示してます）

以上で準備完了です！→作業手順3へ進む！

▲Top

高性能サーバ

低価格サーバ

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