HTML 入門

スタイルシートでデザインを作ろう

border を使う

次は，ボーダ（枠線）を <div> 要素に設定します．もちろん <h1> や<p> などにも利用できます． （HTMLのサンプルを見る ／ CSSのサンプルを見る）

まず，.box1 から .box9 までのクラスをつけた <div> 要素を9つ配置します．なお，各要素の後ろに <hr> によって区切り線を入れていることに注意してください．現時点ではスタイルを指定していないので，次の通り縦に9つ並んで表示されるはずです．

index.html（抜粋）コピー
<div class="box1">.box1 あいうえお</div><hr>
<div class="box2">.box2 あいうえお</div><hr>
<div class="box3">.box3 あいうえお</div><hr>
<div class="box4">.box4 あいうえお</div><hr>
<div class="box5">.box5 あいうえお</div><hr>
<div class="box6">.box6 あいうえお</div><hr>
<div class="box7">.box7 あいうえお</div><hr>
<div class="box8">.box8 あいうえお</div><hr>
<div class="box9">.box9</div><hr>

.box1 クラスには次のようなスタイルを設定します．ボーダには幅 1px の実線 (solid)で，色に黒 (#000000) を指定しています．なお，div 要素の幅 160px，高さ 48px，背景色 #f0f0f0 は .box9 を除くその他のクラスでも共通しています．（HTMLのサンプルを見る ／ CSSのサンプルを見る）

style.css（抜粋）コピー
.box1 {
  border-width: 1px;
  border-style: solid;
  border-color: #000000;
  width: 160px;
  height: 48px;
  background-color: #f0f0f0;
}

.box2 クラスはボーダを幅 4px の点線で，色はグレーにします．ボーダのスタイルについての詳細はこちらで確認してください． （HTMLのサンプルを見る ／ CSSのサンプルを見る）

style.css（抜粋）コピー
.box2 {
  border-width: 4px;
  border-style: dotted;
  border-color: #a0a0a0;
  width: 160px;
  height: 48px;
  background-color: #f0f0f0;
}

ボーダの4つの辺でそれぞれ幅を指定することもできます．次のように4つの値を与えますが，これは上を始点に時計回りに，右，下，左の幅を順番に与えていることに注意してください． （HTMLのサンプルを見る ／ CSSのサンプルを見る）

style.css（抜粋）コピー
.box3 {
  border-width: 1px 4px 8px 16px;
  border-style: solid;
  border-color: #a0a0a0;
  width: 160px;
  height: 48px;
  background-color: #f0f0f0;
}

次の通り，ボーダの幅に2つの値を指定することもできます．この場合は上下と左右の幅を設定することになります．上下が 1px，左右が 8px の枠線になています．（なお，3つの値を与えることもでき，そのときは，上，左右，下の順で指定することになります．） （HTMLのサンプルを見る ／ CSSのサンプルを見る）

style.css（抜粋）コピー
.box4 {
  border-width: 1px 8px;
  border-style: solid;
  border-color: #a0a0a0;
  width: 160px;
  height: 48px;
  background-color: #f0f0f0;
}

ここまでは border-width，border-style，border-color の3つのプロパティを使ってボーダのスタイルを設定しました．しかし，border プロパティでこれらの3つをまとめて指定することも可能です．次の通り，「幅」「線種」「色」をまとめて指定した結果も確認してください．なお，border プロパティに1個や2個の値を渡すことも可能です．詳細はここを確認してください． （HTMLのサンプルを見る ／ CSSのサンプルを見る）

style.css（抜粋）コピー
.box5 {
  border: 8px solid blue;
  width: 160px;
  height: 48px;
  background-color: #f0f0f0;
}

ボーダの角を丸めるには border-radius プロパティを利用します．たとえば 8px のサイズで丸めると次のようになります． （HTMLのサンプルを見る ／ CSSのサンプルを見る）

style.css（抜粋）コピー
.box6 {
  border: 1px solid #404040;
  border-radius: 8px;
  width: 160px;
  height: 48px;
  background-color: #a0a0a0;
}

丸めるサイズを 16px にして，ボーダをなくすと次のような結果になります． （HTMLのサンプルを見る ／ CSSのサンプルを見る）

style.css（抜粋）コピー
.box7 {
  border-radius: 16px;
  width: 160px;
  height: 48px;
  background-color: #a0a0a0;
}

<div> の高さが 48px であるので，丸めるサイズをその半分である 24px にすると左右が半円になります． （HTMLのサンプルを見る ／ CSSのサンプルを見る）

style.css（抜粋）コピー
.box8 {
  border-radius: 24px;
  width: 160px;
  height: 48px;
  background-color: #a0a0a0;
}

<div> の幅と高さを揃えて，丸めのサイズを 50% にすると円になります． （HTMLのサンプルを見る ／ CSSのサンプルを見る）

style.css（抜粋）コピー
.box9 {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  background-color: #a0a0a0;
}

すべての <div> を並べます．（HTMLのサンプルを見る ／ CSSのサンプルを見る）

style.cssコピー
@charset "utf-8";

.box1 {
  border-width: 1px;
  border-style: solid;
  border-color: #000000;
  width: 160px;
  height: 48px;
  background-color: #f0f0f0;
}
.box2 {
  border-width: 4px;
  border-style: dotted;
  border-color: #a0a0a0;
  width: 160px;
  height: 48px;
  background-color: #f0f0f0;
}
.box3 {
  border-width: 1px 4px 8px 16px;
  border-style: solid;
  border-color: #a0a0a0;
  width: 160px;
  height: 48px;
  background-color: #f0f0f0;
}
.box4 {
  border-width: 1px 8px;
  border-style: solid;
  border-color: #a0a0a0;
  width: 160px;
  height: 48px;
  background-color: #f0f0f0;
}
.box5 {
  border: 8px solid blue;
  width: 160px;
  height: 48px;
  background-color: #f0f0f0;
}
.box6 {
  border: 1px solid #404040;
  border-radius: 8px;
  width: 160px;
  height: 48px;
  background-color: #a0a0a0;
}
.box7 {
  border-radius: 16px;
  width: 160px;
  height: 48px;
  background-color: #a0a0a0;
}
.box8 {
  border-radius: 24px;
  width: 160px;
  height: 48px;
  background-color: #a0a0a0;
}
.box9 {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  background-color: #a0a0a0;
}

.box9 を除く要素にはすべて幅 160px と高さ 48px を設定しました．しかしながら，ボーダを設定するとその分だけ幅や高さが大きくなってしまっています．これは，box-sizing プロパティが標準では content-box になっていることが理由です．これは width と height を指定したときに，<div> の中に配置される content-box の幅と高さを設定することを意味します．その content-box の周囲に次のページで説明するパディングとボーダの領域があります．その周囲はマージンになります．この考え方をボックスモデルと呼びます．

これを確認するには，Google Chrome で .box4 が表示されているあたりを選択して右クリックし，「検証」をクリックして，「DevTools（開発者ツール）」を起動します．その後「Computed」をクリックすると選択している要素のサイズが確認できます．下の図を見ると，content-boxが 160x48 ピクセルで，その周りの padding-box が存在せず，border-boxが上下に 1 ピクセルずつ，左右に 8 ピクセルずつの border-box が存在していることがわかります．したがって，.box4 の要素は幅 176 (=8+0+160+0+8) ピクセル，高さ 50 (=1+0+48+0+1) ピクセルに拡大されました．

ボーダやパディングを設定してもボーダの領域も含めて幅や高さを設定したいような状況も考えられます．むしろ，その方が多いかも知れません．そのためには，box-sizing プロパティを border-box に変更します．この指定によって幅や高さが揃えることができました．（HTMLのサンプルを見る ／ CSSのサンプルを見る）

再び，.box4 について DevTools でボックスモデルを確認します．box-sizing プロパティに border-box を設定し，幅を 160 ピクセル，高さを 48 ピクセルに設定しました．その結果，ボーダ部分までを含む領域が指定した幅と高さに設定され，ボーダの太さを除いた 144x46 ピクセルがコンテンツ領域として確保されていることが確認できます．

目次に戻る