レイアウトのためのボックスを作ろう
HTML講座ではレイアウトするために<table>タグを使いましたが CSSでレイアウトする場合は<div>タグを使い、 CSSで大きさや色などを指定します。
ボックスを作る
ボックスを作る場合はまず、ボックスの高さ(height)、横幅(width)を指定します。 ボックスの大きさがわかりやすいように背景に色(background-color)も付けておきましょう。
<head>
<style type="text/css">
<!--
.box{
height:100px;
width:100px;
background-color:gray;
}
-->
</style>
<head>
<body>
<div class="box">100ピクセルの正方形。</div>
</body>
</html>
高さ100ピクセル、横幅100ピクセルで背景が灰色のボックスが出来ました。
<div>を使って高さ250ピクセル、横幅300ピクセル、背景が青色のボックスを作ってみましょう。
※今回からは上のフォーム(背景が水色)にCSSの中身のみを、下のフォーム(背景が黄色)にHTMLを書いて下さい。
CSS
.box{height:250px;
width:300px;
background-color:blue;
}
HTML
<div class="box"></div>高さや横幅を指定する単位はpx(ピクセル)
以外に%(パーセント)、cm(センチメートル)
、mm(ミリメートル)、em(エム)等があります。ホームページ制作で
主に使用されるのはpx(ピクセル)とem(エム)です、
最初はこの2つを覚えておけば大丈夫です。
このCSS講座では主にpxを使って説明していきます。
このボックスを作るのはCSSでレイアウトする基本ですのでよく覚えておきましょう。
ボックスの枠線(わくせん)
<div>で作ったボックスにborder(枠線)を付けることもできます。
枠線には線のborder-width(太さ)、border-style(線の種類)、border-color(線の色)
と設定出来る項目があります。
<head>
<style type="text/css">
<!--
.box{
height:100px;
width:100px;
border-width:5px;
border-style:dashed;
border-color:green;
}
-->
</style>
<head>
<body>
<div class="box">枠線の装飾</div>
</body>
</html>
border-widthはピクセルで指定します。例)border-width:1px;
border-styleは主に3種類あります。
- solid
- 実戦:普通の線です。
- double
- 二重線:2本の線です。
- dashed
- 破線:点線です。
border-colorは付けたい色を指定します。例)border-color:blue;
<div>を使って高さ250ピクセル、横幅300ピクセル、背景が赤色、黒色の太さ10ピクセルの実線のボックスを作ってみましょう。
CSS
.box{height:250px;
width:300px;
background-color:red;
border-width:10px;
border-color:black;
border-style:solid;
}
HTML
<div class="box"></div>borderの線の太さ、線の種類、線の色を別々に指定していましたが、 一つにまとめる事ができます。
<head>
<style type="text/css">
<!--
.box{
height:100px;
width:100px;
border:3px double green;
}
-->
</style>
<head>
<body>
<div class="box">一つにまとめた書き方。</div>
</body>
</html>
borderで指定するとボックスを囲んだ枠線が表示されますが 上下左右それぞれ指定することもできます。
- border-top
- ボックスの上辺に線を引きます。
- border-bottom
- ボックスの下辺に線を引きます。
- border-left
- ボックスの左辺に線を引きます。
- border-right
- ボックスの右辺に線を引きます。