Home » 初級ホームページ作成講座 » positionレイアウトホームページ作成講座｜#wrapper部分

#wrapper部分｜positionレイアウトホームページ作成講座

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

CSSのコピー

下記ソースをコピーして下さい。

Page Top

HTMLファイル指定部分

<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>

Page Top

CSSの解説

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

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

text-align: left;

ここでbody部分で中央寄せにしていた文字配置を左寄せに戻します。

width: 800px;

コンテンツ全体の横幅を指定します。今回は800pxとしましたが、ご自身で変更して下さい。横幅の目安(サンプル)

margin: 0 auto;

ページ全体をセンタリングする指定です。最新のブラウザはこの指定だけでOKですが、古いブラウザはbody部分で{text-align: center;}を指定して、且つこの指定をしなければ中央に配置されません。

実際のサンプル

ホームページ作成のポイント

今回の見直しで横幅は800pxとしました。ちなみに以前は700pxで解説していました。パソコン環境も随分様変わりし性能もさることながら、画面もワイドなものが低価格で入手できるようになりました。

皆さんは今、このサイトをどのようなパソコン環境で閲覧していらっしゃるのでしょう。わたしのメインパソコンはワイド画面で高解像度なものです。よって、横幅が800pxでも左右が空き過ぎてちょっとさみしく思う時もありますが、サブマシーンでは(ノート)800pxで充分です。

最近のウェブデザインは(2008.12現在)横幅900px程度のものが主流になってますが、私のサブマシーンではちょっと辛いです。全体の横幅を決める際はホームページの運用目的やターゲット選定をしっかりとする事をお薦めします。

Page Top

page top ボタン