HTMLとCSSで作成する入れ子のボックスを作成する時の注意点を整理しました。今回はborder処理です。marginと同様に通常はfloat等で処理するので、こんな使い方はあまりしないのですが、コレが理解出来ないと思わぬトラブルが出てしまいます。まずは以下が上図のソースとなります。マゼンタの300pixel四方、グレーの200pixel四方、黄色の100pixel四方を<div>配置しています。全てがセンター合わせになっています。
-------------------------
<!-- index.html -->
<html>
<head>
<meta charset="UTF-8">
<title>margin & padding& & border</title>
<link rel="stylesheet" type="text/css" href="rule.css">
</head>
<body>
<div id="hotpink_box"><br>
<div id="silver_box"><br>
<div id="gold_box">
</div>
</div>
</div>
</body>
</html>
-------------------------
/* rule.css */
@charset "UTF-8";
body {
margin: 0px;
padding: 0px;
border: 0px;
background-color: #afeeee;
}
#hotpink_box {
margin: 0px auto;
padding: 0px;
border: 0px;
width : 300px;
height: 300px;
background-color : #ff69b4;
}
#silver_box {
margin: 26px auto;
padding: 0px;
border: 0px;
width : 200px;
height: 200px;
background-color : #c0c0c0;
}
#gold_box {
margin: 26px auto;
padding: 0px;
border: 0px;
width : 100px;
height: 100px;
background-color : #ffd700;
}
-------------------------
paddingがエリアを広げるのに対して、borderは線幅を追加するので処理結果は酷似しています。ただし、見た目で違うのは個別に色を設定出来る点です。
まずsilver_boxとgold_boxを以下の様に設定します。marginが11pxなのは、paddingを15pxに下時と同様で、以下は計算式です。
(300−(200＋(15×2))/2)−24=11
#silver_box {
margin: 11px auto;
padding: 0px;
border: 15px solid #708090;
・
・
#gold_box {
margin: 11px auto;
padding: 0px;
border: 15px solid #ff8c00;
・
・
#silver_box {
margin: 11px auto;
padding: 15px;
border: 0px;
・
・
#gold_box {
margin: 11px auto;
padding: 15px;
border: 0px;
・
・
上図はpaddingで15px広げた場合。なお、ボックス内に文字を入れる場合、paddingもborderも本来のサイズ内に収まり、paddingやborderで拡張したエリアにはデフォルトでは収まりません。ちなみに、オプションは以下のような種類があります。
none
ボーダーは表示されず、太さは0になり、0pxと記述しても同様。ただし、ボーダーが重なり合う場合は他の値が優先される。初期値。
hidden
ボーダーは表示されず、太さは0になり、0pxと記述しても同様。ただし、ボーダーが重なり合う場合はhiddenの値が優先される。
solid
1本線で表示される。
double
2本線で表示される。
groove
立体的に窪んだ線で表示される。
ridge
立体的に隆起した線で表示される。
inset
上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されるが、上下左右の一部だけに指定しても立体感は出ない。
outset
上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されるが、上下左右の一部だけに指定しても立体感は出ない。
dashed
破線で表示される。
dotted
点線で表示される。
上図は"groove"設定例です。
#silver_box {
margin: 11px auto;
padding: 0px;
・
・
#gold_box {
margin: 11px auto;
padding: 0px;
border: 15px groove #ff8c00;
・
・
