ホームページの幅

ここでは、body要素の中のホームページの幅、位置を決めます。
ホームページの幅を決めて、背景を設定する、あるいは線で囲むなどをしてページの輪郭が見えるようにします。

container（コンテナー）あるいはinner（インナー）など、入れ物、的なわかりやすい固有の名詞にしましょう。

このサイトではcontainerを使用することにします。

containerの設定

containerの横幅は、ブラウザ幅（body）の70%または80%ほどがいいです。
レイアウトによって増減します。
今回は70%にしましょう。

containerの位置はbodyの端に寄せたホームページを見ることもありますが、今回は中央揃えにします。

containerの背景は、今回は白色にします。

枠線を表示する方法も試してみましょう。

HTMLソースコードの書き方について、親要素の下に子要素を書くときは、書き始めをインデント（字下げ）し、見やすくしましょう。

4文字くらいが適当と思います、管理者はTerapadのTABを2に設定し、TABキーを2回打ち、4文字インデントしています。

htmlソース

<!--===ここからホームページ本体===-->
<body>
    <div id="container">

    <!--===ここにコンテンツが入ります。===-->

    </div><!--container-->
</body>

containerはbodyの中にあるので、<body>から、4文字下げて<div id=”container”>を書いています。
何文字インデントする、という決まりごとはありません。
インデントすると、ソースが読みやすくなります、またW3Cで推奨されています。

<div>とは
<div>（ディブと読む）に意味はありません。
ブロック（かたまり）である、と覚えておけばいいです。<div>から</div>までのひとかたまりが、ID属性を指定され、セレクタ#containerで装飾されます。

このあたりから出てくるid属性とclass属性はここから。

コンテナの装飾をしてみましょう。

cssソース

/*===ホームページの幅===*/
#container {
    width: 70%;
    min-height: 100%;
    background: white;
    margin: 0 auto;
}

htmlでid=”container”と書いたときcssでは#containerと書きます。
#はハッシュと読みます、♯これはシャープですね。
違うので注意しましょ。

cssソース

#container {

body要素の中にdiv要素でid=”container”が入っています。
ホームページ本体の幅、つまり、containerの幅を、親要素bodyの幅の80%にする。

cssソース

    width: 70%;

min-heightは最小値を設定するプロパティです。
containerの高さを少なくても100%にする。

heightを書いてないので、min-heightを書いておかないと、containerにbackgroundを設定しても表示できない、という理由から書いてあります。

cssソース

    min-height: 100%;

今回はcontainerの背景を白色にします。

cssソース

    background: white;

今回ホームページ本体はmarginプロパティで中央揃えにします。
marginは親要素との間隔を設定するプロパティです。
値0 autoは上下の間隔0、左右auto（自動的に）左右振り分けになります。
margin:0 auto;はよく使いますよ。

表示領域（margin、padding、border）はここから

cssソース

    margin: 0 auto;

containerを枠で囲むこともできます。
marginで上下の間隔を0にしましたが、上下25pxほど空けましょうか。
そして、枠の角を丸くデザインしてみましょう。

cssソース

/*====参考====*/
#container {
    width: 70%;
    min-height: 100%;
    margin: 25px auto;
    border: solid 1px #ccc;
    border-radius: 15px;
}

borderプロパティは枠線を表示します。
値のsolid 1px #cccは線種、線の太さ、線の色という意味で、実線、太さ1px、#ccc色になります。
書き順に決まりはありません。

border-radiusプロパティは角を丸くします、値15pxは半径です。

角丸のsolid 1px #cccが見えますよ。

ソースコードをファイルに書いていきましょう。
htmlのソースコードはindex.htmlへ、装飾のソースコードはstyle.cssへ書きましょう。
例によって打ち間違い防止のためコピペを使いましょう。