ボックスのまとめ

ここでは、基本や実践でこれまで説明してきたCSSのwidth、margin、padding、background、float、clear等について改めて整理して説明しています。

ボックスの概要

 ホームページの外観を整えるのはデザインした通りに箱を配置するようなイメージです。

ボックスのまとめ[CSS/スタイルシート]1

 最初のデザイン通りに配置した後は、更に中にボックスを配置したり、文章を記述したりします。

margin

 ボックスとボックスの間に余白を設けるのがmarginです。

ボックスのまとめ[CSS/スタイルシート]2

 上の図の例では青のボックスに対して赤字の余白を設けるためにmarginを使います。スタイルシートでの記述方法は以下です。

#box1 {margin : 1px 2px 3px 4px;} 上1px、右2px、下3px、左4pxの余白
#box2 {margin : 10px 20px;}      上下10px、左右20pxの余白
#box3 {margin : 10px auto;}      上下10pxの余白、左右センタリング
#box4 {margin : 10px;}          上下左右10pxの余白

 スタイルシートで定義した例えば#box1をhtmlで使う場合は以下のように記述します。

<div id="box1">ここにbox1の中に配置するボックスや文書を記述します。</div>

 最初は全てのパターンを覚えるのは難しいので、汎用的に使える一番上のパターンを覚えると良いと思います。一番上のパターンは上から時計回りに指定すると私は覚えています。後は、autoを指定するとセンタリングするとだけ覚えておけば、段々慣れてくると他のパターンも自然と覚えるようになると思います。

 又、以下のように指定も可能です。

#box5 {margin-top : 1px;}     上1pxの余白
#box6 {margin-right : 1px;}    右1pxの余白
#box7 {margin-bottom : 3px;}  下3pxの余白
#box8 {margin-left : 2px;}     下2pxの余白

 上の余白だけ、下の余白だけ変えたい場合等、その他の余白は変えたくない時に使います。

 又、margin-top : 1px;margin-right : 1px;と2つ以上個別に指定する事で上と右だけ指定するといった事も出来ます。

padding

 ボックスの内部に配置されるボックスやテキストとの間に余白を設けるのがpaddingです。

ボックスのまとめ[CSS/スタイルシート]3

 上の図の例では青のボックスに対して赤字の余白を設けるためにpaddingを使います。スタイルシートでの記述方法は以下です。

#box1 {padding : 1px 2px 3px 4px;} 上1px、右2px、下3px、左4pxの余白
#box2 {padding : 10px 20px;}      上下10px、左右20pxの余白
#box3 {padding : 10px;}          上下左右10pxの余白

 指定の仕方はmarginと同じなので、最初は一番上のパターンで上から時計回りに指定すると覚えます。autoは指定出来ません。

 センタリングする場合、中のボックスでmarginによりautoを指定します。以下の図では緑のボックスに対してmarginでautoを指定します。

ボックスのまとめ[CSS/スタイルシート]4

 尚、テキストの場合はtext-align: center;と指定します。以下の図では青のテキストに対して指定します。

ボックスのまとめ[CSS/スタイルシート]5

 text-align: center;が使えるのは「タグの種類」で示した改行されないタグを使う時です。

 marginと同様に上下、左右を個別に指定する事も可能です。

#box4 {padding-top : 1px;}     上1pxの余白
#box5 {padding-right: 2px;}     右2pxの余白
#box6 {padding-bottom : 3px;}  下3pxの余白
#box7 {padding-left : 2px;}     下2pxの余白

 又、padding-top : 1px;padding-right : 1px;と2つ以上個別に指定する事で上と右だけ指定するといった事も出来ます。

width

 widthは幅の指定でスタイルシートでは以下のように記述します。

#box {width: 200px;}

 上記をhtmlのタグでid指定して使うと以下のように表示されます。尚、見易さのため枠を付けています。

200pxの幅になります。

 幅を指定しない場合、デフォルトでは以下のように幅を一杯に取ります。

幅を取れるだけ取ります。

border

 ボックスの枠を定義するのがborderです。

#box {border: solid 1px rgb(255,0,0);}

 上記で定義したボックスをhtmlで使うと以下のように表示されます。

枠を1pxの赤にします。

 solidが実線、1pxが太さ、rgbが色を示します。

 上だけ枠を表示する等、上、下、右、左で別々に指定も可能です。以下にそれぞれのスタイルシートでの記述とhtmlで使った時の表示例を示します。

・上の枠だけ指定
#box {border-top: solid 2px rgb(255,0,0);}
上の枠だけを2pxの赤にします。
・下の枠だけ指定
#box {border-bottom: dotted 3px rgb(0,255,0);}
下の枠だけを3pxの緑で点線にします。
・右の枠だけ指定
#box {border-right: double 4px rgb(0,0,255);}
右の枠だけを4pxの緑で二重線にします。
・左の枠だけ指定
#box {border-left: double 5px rgb(0,0,0);}
左の枠だけを5pxの黒で二重線にします。

 以下のように2つ以上組み合わせて使う事も出来ます。

#box {border-left: double 4px rgb(0,0,0);border-bottom: solid 1px rgb(0,255,255);}

 上記をhtmlで使った時に表示は以下になります。

左に4pxの黒で二重線、下に1pxで水色の実線


 色の指定で迷う場合はエクセル等で図形を描いてみて、気に入った色を指定するとよいと思います。気に入った色が決まったら、エクセルの書式設定等で「テーマの色」で「その他の色」をクリックすると「色の設定」画面になります。そこで「ユーザー設定」タブをクリックするとRGBが表示されます。

ボックスのまとめ[CSS/スタイルシート]6

borderとwidthの関係

 一般的に、枠はwidthで指定した幅の外側に描かれます。以下に200pxの幅を指定して1pxの枠を使ったボックスと10pxの枠を使ったボックス、最後に218pxの幅で1pxの枠を使ったボックスを表示します。

幅200px、枠1pxの実線

幅200px、枠10pxの実線

幅218px、枠1pxの実線

 一番下のボックスは真ん中のボックスと右端が揃っています。幅を218pxにして枠が左右に1pxづつあるため、合計で220pxになります。枠が10pxのボックスも幅が200pxで枠が左右に10pxづつあり、合計で220pxになるため、右端が同じ位置になります。

 同じ幅200pxを指定した1番上と真ん中のボックスは幅が同じでも枠の太さが違うため、右端が揃いません。

 このため、例えば200pxの中に幅を100pxに指定した2つのボックスに枠を付けて並べると、200pxでは枠の分幅が足りないため、はみ出したり上手く表示出来なかったりします。これは画像を挿入した時も同じで画像の幅の外に枠が書かれます。

 今度は幅を指定したボックスの中のボックスで枠を定義した場合です。

【ボックスの中のボックスで枠を定義した場合のスタイルシート例】
.block1 {
width: 200px;
border: solid 1px rgb(0,0,255);
}

.block2 {
border: solid 10px rgb(255,0,0);
}
【ボックスの中のボックスで枠を定義した場合のhtml例】
<div class="block1">
200pxの幅の外に1pxで青枠が表示されます。
</div>

<div class="block1">
<div class="block2">200pxの幅の内側に赤枠が表示されます。</div>
</div>

 上記ではblock1で200pxの幅のボックスの外側に1pxの枠を描き、block2で幅を指定せずに10pxの枠を描く設定をしています。これを表示すると以下になります。

200pxの幅の外に1pxで青枠が表示されます。
200pxの幅の内側に赤枠が表示されます。

 block2で定義した赤枠のボックスは幅を指定していないため青枠で示したblock1の幅一杯まで取りますが、枠はblock1をはみ出さないようにblock1の内側に表示されます。

 このため、ボックスの中にボックスを配置する場合、はみ出さないようにするためには幅を指定しなければ自動的に収まるようになっています。

 デザイン通りにボックスを配置しようとすると1pxズレたたけで横に並べて表示出来なくなったり、くっつけて表示したいのに間が空いてしまったりするため、ボックスを定義する時は枠の太さに注意が必要です。

背景

 ボックスに背景色を設定するには以下のようにします。

box {background-color: rgb(0,255,255);}

 上記は以下のように表示されます。

背景が水色で表示されます。

背景に画像を指定するためには以下のようにします。

box {background-image: url(画像のファイル名);}

 画像のファイル名は、test.gif等ですが、ディレクトリがスタイルシートを保存しているcssディレクトリ、図を保存しているimageディレクトリと分かれている場合、「../image/test.gif」等と指定します。「..」は1つ上のディレクトリを示し、その配下のimageディレクトリにあるtest.gifファイルを指定した事になります。

 このように指定すると、以下のように表示されます。

背景画像が幅一杯まで繰り返し表示されます。

 画像は上記のように幅一杯に繰り返し表示されます。繰り返し表示させたくない場合は以下のようにします。

box {background-repeat:no-repeat;}

 上記により下記のように表示されます。

背景画像が1回だけ表示されます。

 背景に画像と背景色両方を指定する事も出来ます。

box {background: rgb(0,255,255) url(画像のファイル名);}

 上記により下記のように表示されます。

背景画像が幅一杯まで繰り返し表示されます。

 画像ファイルがない場合やブラウザで表示出来ない場合は、画像ではなく指定した背景色で表示されます。

 背景画像は背景なので、その上に<img>タグを使って画像を重ねる事も出来ます。

float

 floatは回り込みです。回り込みをせずにボックスを配置していくとhtmlで記述した順番に上から下へ表示されてしまいます。

ボックスのまとめ[CSS/スタイルシート]7

 floatを使って回り込みを行うとデザインした通りに配置させる事が出来ます。

ボックスのまとめ[CSS/スタイルシート]8

 floatはスタイルシートで以下のように記述します。

.box {float: right;}

 htmlで使う時は以下のように記述します。

【floatを使った時のボックス配置のためのhtml記述例】
<div class="box">
このボックスは右
</div>

<div class="box">
このボックスは左
</div>

 上記を表示すると以下になります。尚、見易さのためborderで枠を付けています。

このボックスは右
このボックスは左

clear

 clearは回り込みの解除です。

 上のfloatを使ってhtmlで以下のように記述したとします。

【clearを使わない時のボックス配置のためのhtml記述例】
<div class="box">
これは右
</div>

<div class="box">
これは左
</div>

<div>
これは下
</div>

 上記の場合は以下のように表示されます。

これは右
これは左
これは下

 floatで回り込みを指定していない赤枠で囲ったボックスも左に表示されてしまいます。

 これは青枠のボックスが右に回り込む事をfloatで指定しているためです。下に表示したい時はスタイルシートで以下のように指定します。

.box2 {clear: both;}

 htmlは以下のように赤字部分を書き換えます。

【clearを使った時のボックス配置のためのhtml記述例】
<div class="box">
これは右
</div>

<div class="box">
これは左
</div>

<div class="box2">
これは下
</div>

 上記のようにclearでfloatを解除する事で以下のように赤枠のボックスを下に配置出来ます。

これは右
これは左
これは下

 このままでは、回り込みを解除する度にそのボックスでclear指定しなければいけません。このため、ダミーのボックスを作ります。

.clear {clear: both;}

 htmlは以下のように赤字部分を書き換えます。

【ダミーのボックスを利用したclear例】
<div class="box">
これは右
</div>

<div class="box">
これは左
</div>

<div class="clear"></div>
<div>
これは下
</div>

 赤字部分は実際にはブラウザ上で表示されませんが、ここで回り込みが解除されるため、下に配置したボックスは回り込む事なく下に表示されます。

 各ボックスでclear指定すると回り込みしたままにしたい時としたくない時で2つ分の定義が必要になりますが、このようにする事で定義は1つで回り込みを解除する必要がある時に1行記述するだけで解除出来ます。

 width,margin等を使って整形すると以下のように表示出来ます。

これは右
これは左
これは下

デザイン通りにホームページを作成

 上記の定義を組み合わせてボックスを配置する事でデザインした通りにホームページの外観を作成出来ます。

 但し、1度もホームページを作成した事がない場合は、最初から作るのは難しいと思います。このため、ホームページ作成編では「実践」で作り方の例を示しています。

 最初は何事も真似する事だと思います。慣れてきたら自分なりにアレンジすればよいので、これから初めてホームページを作成される方はぜひ左サイドバーにある「実践」の所を順に読んで頂けたらと思います。

 又、ボックスを定義する時はidやclassの違い、入れ子や継承について理解しておかないと思ったように定義出来ない事があります。悩んだ場合は「スタイルシートの定義方法」も合わせてご参照下さい。

サイト関連1

ホームページ作成「スタイルシートの定義方法
  • このエントリーをはてなブックマークに追加