１カラム（１段組）レイアウト
さて、「レイアウトを考える」の「１カラム
Type1-a」のレイアウトを例にお話しますね。
まずは、１カラム（１段組）の一番基本になるレイアウトにチャレンジしてみましょう。
チャレンジというほど、大袈裟なものではないですね（笑）
ここでは、記述方法がわかればオールオッケー！
CSSの部分は、外部ファイル化してある前提で、お話しますね。
外部ファイル化を忘れちゃったり、このページを始めて読んだ訪問者さんは、「外部スタイルシートと外部Javascriptの設定」を読んで、外部ファイル化を学んでくださいね。
はじめに、１カラムレイアウトのレイアウト設計をします。
下図のようなものです。
CSSレイアウトでは、幅や余白の計算が必至になってきますので、キッチリとする習慣を着けましょうね。
そして、枠をひとつだけ用意し、その枠の名前を「body」と名付けることにします（背景色が白色の部分）。
これが、メイン部分になりますよ。
- body属性の設定
- margin（外側の余白）：上下左右に0px
- padding（内側の余白）：上下左右に0px
- background-color（背景色）：#cc0000（ワインレッド）
- text-align（テキストの行揃え）：center（中央揃え）･･･※１
- メイン部分の枠の名称：bodyの設定（#body）
※１
margin（外側の余白）が auto になっています。
このように外側の余白を auto にしてあげると、中央配置にすることができるんですよ。
しかしながら、Internet Explorer 6（IE6）では、text-align（テキストの行揃え）をcenter（中央揃え）に指定してあげないと、中央配置にならないことに注意してください。
IE7では、どうなのかしら･･･という疑問は、後の記事で触れますね。
※２
width（幅）のサイズは、レイアウト設計をするときに注意するところです。
なぜなら、width（幅）に設定したサイズと padding（内側の余白）の合計値が、実際のスペースになるからですね。
内側の余白って言われると、指定した幅の内側に余白が作られるように思いませんか？
今回の例で言うと、width（幅）に指定した640pxと、左右に設けた padding（内側の余白）の20pxの合計値である 680px が、メイン部分（#body）に与えられるスペースになりますよ。
私はこれで、失敗しちゃった人です＾＾； 気をつけましょうね。
（IE6ではXML宣言による実装差異がある：回避策⇒XML宣言をしない）
<div id="body">
メイン
</div>
</body>
div要素は、レイアウトデザインをするときの入れ物、器だと思ってくださいね。
これをグループ化要素といいます（span要素も属しますが、ここでは省略）。
div要素にid属性やclass属性で名前を関連付けて、レイアウトを組んでいきます。
ここでは、大きなレイアウトの部分には、id属性で指定することを採用しています。
margin: 0px;
padding: 0px;
background-color: #cc0000;
text-align: center;
}
#body {
width: 640px;
margin: 20px auto;
padding: 20px;
background-color: white;
text-align: left;
}
▼表示例
▲イメージ図です。実際の表示とはサイズ（実寸の半分）が異なります<(__)>
ちょっとオマケです。
背景色などの色をあなた好みに変えられるように便利なリンクを３つ紹介しますね。
自分にとって見やすいページを参照すればよいですよ。
orangeは、使用しても良いカラーネームですよ。
余裕があれば、追加しえ覚えておくといいですね。
- CYBER@GARDEN Webカラーリファレンス
- 「Web標準の教科書」の著者、益子氏のサイト内のページ。
- クイックHTML WEBカラーリファレンス
- 16進数のコード以外にカラーネームも掲載されているサイト。
カラーネームで指定するときは、HTML4.01とXHTML1.0、CSS2で共通して正式に使用できるものだけにしましょう（リンク先ページ内一番下）。 - IT用語辞典 e-words Webセーフカラー
- IT用語辞典に資料室があるのをご存知ですか？なかなか使えるものが沢山ストックされていますよ。ここも知っておきたいサイト。
