まずHTML部分を制作します。ボックスを意識して、<div> を使ってページをいくつかの部分に分けます。
以下に示すHTMLをサクラエディタなどに貼り付けて rensyu8.html ページを作成してください。( body タグの外側は、表示を省略しています)
・・省略・・
<body>
<!-- ここからページボディ -->
<div class="" >
<!-- ここからヘッダ -->
<div class="">
CSS Example
</div>
<!-- ここまでヘッダ -->
<!-- ここから左メニュー -->
<div class="">
目的で探す<br>
CSSとは<br>
なぜCSSが必要か<br>
CSSのメリット<br>
CSSの書き方<br>
</div>
<!-- ここまで左メニュー -->
<!-- ここからコンテンツ(本文) -->
<div class="">
CSSは、Cascading Style Sheetsの略で、ウェブページの見栄えを設定するための言語です。
</div>
<!-- ここまでコンテンツ(本文) -->
<!-- ここからフッタ -->
<div class="">
Copyright (c) ○○○○ All rights reserved.
</div>
<!-- ここまでフッタ -->
</div>
<!-- ここまでページボディ -->
</body>
・・省略・・
-
上記のHTMLは、ボックスが作りやすいように各部分を <div>～</div> で囲んであります。最終的に各ボックスは、ヘッダ・メニュー・コンテンツ・フッタ といった役割を担います。HTML中に書かれているコメント（<!-- ～ -->）が参考になるでしょう。
<div> はたくさんあるので、クラスを設定して区別がつくようにします。それぞれの <div> に、以下のようなクラス名をつけるものとします。
| 対象 |
クラス名 |
用途 |
| ページボディ |
pagebody |
ページ全体を囲い、レイアウトを整えます。 |
| ヘッダ |
header |
サイトのタイトルロゴなどを入れます。 |
| 左メニュー |
submenu |
メニューなどを入れます。ページの左端に配置します。 |
| コンテンツ(本文) |
content |
記事など、メインとなる文章や写真を入れます。 |
| フッタ |
footer |
コピーライト表記などを入れます。ページの下端に配置します。 |
例えばヘッダ ( header ) クラスの場合、以下のように記述します。
<!-- ここからヘッダ -->
<div class="header">
上の header の部分を書き足す感じです。
他にも、ページボディ ( pagebody )、ヘッダ ( header)、 左メニュー ( submenu )、コンテンツ ( content )、フッタ ( footer ) といった部分があるので、それぞれ同様にクラス名を追加してください。
上の例の <div> タグを見て、class="" のようにクラス名が抜けているところを探し、そこに pagebody や header…… といったクラス名書き込むと良いでしょう。計５箇所あります。
<!-- ここからページボディ -->
<div class="pagebody">
：
<!-- ここからヘッダ -->
<div class="header">
：
<!-- ここから左メニュー -->
<div class="submenu">
：
<!-- ここからここからコンテンツ(本文) -->
<div class="content">
：
<!-- ここからフッタ -->
<div class="footer">
これで HTML ファイルの編集作業は完了です。
現時点では、単に文字が縦に並んでいるだけです。
CSSの編集にとりかかります。rensyu8.css ファイルを作成し、サクラエディタで編集します。以降は、CSS内の編集作業になります。
CSSで背景色などページ全体の初期設定を行います。
まず、<div>のサイズが狂わないためのおまじないを書きます。box-sizing:border-box; という設定を、すべての要素に設定するため、以下のように書きます。
* { box-sizing:border-box; }
画面にはまだ大きな変化は無いはずです。
セレクタは通常、h1のようにタグ名を指定するものですが、この例では「*」と書かれています。これは「HTMLのすべての要素に対して設定を行う」という意味になります。とにかく全要素が影響を受けるので影響範囲が大きく、扱いに注意が必要ですが、HTML全体で設定をリセットするような目的で使われることがあります。
box-sizing プロパティは、width や height で幅や高さを指定する際に、罫線（border）や余白（padding）を含めてサイズ計算をするためのものですが、少々難解です。ここではレイアウトを正確に行うためのおまじないだと思って書いておいてください。
以下の文章は聞き流してもらってもＯＫですが、気になる人のために簡単に解説しておくと、以下のような理由でbox-sizing:border-box;設定を行っています。
CSSでwidth や height を使って幅や高さを指定する際、その値はボックス内部の内容部分に対して適用され、パディング余白(padding)や罫線(border)は指定の幅や高さの外側に描かれるという仕様があります。 よってパディングを設定したり罫線を描いたりすると指定サイズからはみ出してしまい、レイアウト全体に狂いが生じます。 そこでbox-sizing:border-box;という設定を追加しておくと、widthやheightの指定値にパディングや罫線の太さも含まれるようになるため、レイアウト上の誤差がなくなるので設定しています。
気になる場合は、box-sizing border-box のようなキーワードでネット検索して調べてみましょう。
ページ全体の背景色を設定します。body に background-color を使って背景色を塗れますので、好きな色を塗ってください。ここでは薄いグレー（#eeeeee）とします
body { background-color:#eeeeee; }
ページ全体に色が塗れたら成功です。
ページボディを設定します。
ページボディはレイアウトの一番外側を囲うボックスです。以下のような設定を追加します。
- 幅は画面の80%にします。
width: 80%; と設定します。
- 全体を中央寄せにします。
margin: 0 auto; と設定します。
- 周囲に罫線を引きます。
border: solid 1px black; と設定します。
- 背景色を白色にします。
background-color: white; と設定します。
- 内部余白(padding)は無しにします。
padding: 0; と設定します。
.pagebody { width:80%; margin:0 auto;
border:solid 1px black;
background-color:white; padding:0; }
全体を囲う枠が出来上がるはずです。
ヘッダを作成します。
ヘッダも同様に header クラスに対して以下のような設定を追加します。
- 幅は100%にします。
width:100%; と設定します。pagebody の幅いっぱいまで使います。
- 高さは80pxにします。
height:80px; と設定します。
- 罫線は下部分のみ引きます。
border-bottom:solid 1px black; と設定します。
上や左右には罫線を引きません。pagebody によってすでに罫線が引かれているからです。
- 内部余白(padding)を0.5文字分作ります。
padding:0.5em; と設定します。
内部に余白がないと、文字が罫線に密着して読みにくいからです。
.header { width:100%; height:80px;
border-bottom:solid 1px black; padding:0.5em; }
ヘッダ領域が仕切られました。
左メニューを作成します。
左メニューにあたる submenu クラスに対して以下のような設定を追加します。
- 左詰めで表示します。
float:left; と設定します。
- 幅は40%にします。
width:40%; と設定します。
- 高さは400pxにします。
height:400px; と設定します。これはボックスの中身を書かない場合でも一定の面積を確保するためです。
- 罫線は右側のみ引きます。
border-right:solid 1px black; と設定します。
- 内部余白(padding)を0.5文字分作ります。
padding:0.5em; と設定します。
.submenu { float:left;
width:40%; height:400px;
border-right:solid 1px black;
padding:0.5em; }
縦の仕切りができました。一旦はみ出ますが、気にしない。
コンテンツ(本文)を作成します。
同様に content クラスに対して以下のような設定を追加します。
- 右詰めで表示します。
float:right; と設定します。左メニューの時に設定した float:left; と合わせることで左右に配置されます。
- 幅は60%にします。
width:60%; と設定します。左メニューの幅 40% と合計すると、ちょうど100%になるようにします。
- 高さは400pxにします。
height:400px; と設定します。左メニューの高さと揃えます。
- 罫線は引きません。すでに周囲を線で囲まれているからです。
- 内部余白(padding)を0.5文字分作ります。
padding:0.5em; と設定します。
.content { float:right;
width:60%; height:400px;
padding:0.5em; }
それっぽいカタチになってきました。まだ下のほうに線が足りていない部分があります。
フッタを作成します。
同様に footer クラスに対して以下のような設定を追加します。
clear: both; と設定します。これは本来左メニュー ( submenu ) や コンテンツ ( content ) の下に表示するべきフッタが「float」プロパティの影響で右側に回り込んでしまう場合があるからです。その対策として clear: both; を設定すれば、回り込みが起こらなくなり、フッタは想定どおり左メニューやコンテンツの下に並ぶようになります。- 幅は100%にします。
width:100%; と設定します。pagebody の幅いっぱいまで使います。
- 高さは40pxにします。
height:40px; と設定します。
- 罫線は上部分のみに引きます。
border-top:solid 1px black; と設定します。
- 内部余白(padding)を0.5文字分作ります。
padding:0.5em; と設定します。
.footer { clear:both;
width:100%; height:40px;
border-top:solid 1px black;
padding:0.5em; }
一番下の「Copyright」とか書いてあるところに仕切りができて、いいカンジです！
ここまでのCSSをまとめると、以下のような内容になるはずです。 (見やすいように、改行やスペースで形を整えています)
* { box-sizing:border-box; }
.pagebody { width: 80%; border: solid 1px black; padding:0;
background-color:white; margin:0 auto; }
.header { width:100%; height: 80px; border-bottom:solid 1px black; padding:0.5em; }
.submenu { float:left; width: 40%; height:400px; border-right: solid 1px black; padding:0.5em; }
.content { float:right; width: 60%; height:400px; padding:0.5em; }
.footer { clear:both; width:100%; height: 40px; border-top: solid 1px black; padding:0.5em; }
動作確認をします。ブラウザなどから作成したページにアクセスし、以下のようになれば完成です。
完成例 (クリックすると別窓で大きく見られます)
