CSSのボックスによる配置方法の基本

サイトのレイアウトデザインを実践する上で、CSSのボックスという概念を理解する事が、最重要といってもいいでしょう。

初心者向けの記事を掲載しています。まずは簡単なところから理解していきましょう。

パディング、ボーダー、マージンについて

CSSではHTMLで記述したものをボックスとして扱います。たとえば<p>テキスト</p>と記述した場合、下記の図に示したように、ボックスの領域ができます。これを操作することで装飾を実装するというイメージです。

たとえば、『divタグを使ってメインコンテンツの領域を作る』、『左にメニューバーの領域を作る』といった使い方をすることで、サイトのレイアウトをを作っていきます。

下の図はコンテンツ／テキストの外側にパディングの領域があり、その外側にボーダーの領域、さらに外側にマージンの領域があることを表しています。

各プロパティのサイズを変えると下記図の幅が変化します。

EX：border:10px solid red; （線の太さ１０ピクセル・直線・赤）となります。太さ１０pxの赤線が表示されます。

：padding:10xp;　とすれば、コンテンツ／テキストの外側の空白部分が１０ピクセル開きます。その外側にボーダーが表示されます。

padding	読み方：パッディングコンテンツのすぐ外側の幅（スペース）を指定します。
border	読み方：ボーダー paddingの外側に領域があります。ボーダーの幅や色の指定も出来ます。
margin	読み方：マージン borderの外側の領域幅（スペース）をしていします。
width	読み方：ワイズボックスの幅を指定します。
height	読み方：ハイボックスの高さを指定します。
float	読み方：フロート作成したボックスを横並びにします。
backgrounde	読み方：バックグラウンドボックスの背景に色や画像を指定する時に使います。


ボックス１
テキスト〜



ボックス２
テキスト〜

.box {
  width:200px;
  float:left;
  border:1px solid #ccc;
  background:#fafafa;
  margin:1em;
  padding:1em;
}

上記のコード例は、<div>で作ったボックスをfloatで横並びにし、幅200px・ボーダー1pxで薄いグレー・バックグラウンドがかなり薄いグレー・マージンが1emのスペースを空けて・パディングも1emのスペースを空けた場合です。

ここまで、CSSでサイトのレイアウトやデザインを作成する際には必ず理解が必要となるCSSボックスの概念を説明してきました。

サイトデザインの一番の基礎となります。WEBサイトのデザインは全てが、ボックスの組み合わせで出来ています。

具体的に説明すると、ロゴマークなどを配置する一番上のヘッダー部分、記事を配置するコンテンツ部分、さらにコンテンツ部分の中に小さいボックスを複数配置する場合、右側もしくは左側のサイドバー部分、会社案内などを表示するフッター部分など。

すべて、ボックスを組み合わせて作成されている事を覚えておきましょう。その上で、サイトのデザインを作成していくといいでしょう。以上お役に立てましたら幸いです。