ここでは、body要素の中のホームページの幅、位置を決めます。
ホームページの幅を決めて、背景を設定する、あるいは線で囲むなどをしてページの輪郭が見えるようにします。
container(コンテナー)あるいはinner(インナー)など、入れ物、的なわかりやすい固有の名詞にしましょう。
このサイトではcontainerを使用することにします。
containerの設定
containerの横幅は、ブラウザ幅(body)の70%または80%ほどがいいです。
レイアウトによって増減します。
今回は70%にしましょう。
containerの位置はbodyの端に寄せたホームページを見ることもありますが、今回は中央揃えにします。
containerの背景は、今回は白色にします。
枠線を表示する方法も試してみましょう。
htmlソースコード
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属性はここから。
containerの装飾
コンテナの装飾をしてみましょう。
cssソース
/*===ホームページの幅===*/ #container { width: 70%; min-height: 100%; background: white; margin: 0 auto; }
セレクターid=container
htmlでid=”container”と書いたときcssでは#containerと書きます。
#はハッシュと読みます、♯これはシャープですね。
違うので注意しましょ。
cssソース
#container {
ホームページ本体の幅
body要素の中にdiv要素でid=”container”が入っています。
ホームページ本体の幅、つまり、containerの幅を、親要素bodyの幅の80%にする。
cssソース
width: 70%;
containerの高さの最小値
min-heightは最小値を設定するプロパティです。
containerの高さを少なくても100%にする。
heightを書いてないので、min-heightを書いておかないと、containerにbackgroundを設定しても表示できない、という理由から書いてあります。
cssソース
min-height: 100%;
containerの背景
今回はcontainerの背景を白色にします。
cssソース
background: white;
ホームページ本体の位置
今回ホームページ本体はmarginプロパティで中央揃えにします。
marginは親要素との間隔を設定するプロパティです。
値0 autoは上下の間隔0、左右auto(自動的に)左右振り分けになります。
margin:0 auto;はよく使いますよ。
表示領域(margin、padding、border)はここから
cssソース
margin: 0 auto;
containerを枠で囲む
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へ書きましょう。
例によって打ち間違い防止のためコピペを使いましょう。