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

CSSのボックスイメージ

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

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

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

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

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

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

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

CSSのボックスイメージ

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

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

ボックスの概念を理解する時に必要なCSS一覧

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

コード例

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

まとめ

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

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

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

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