ボックスに関するプロパティ

ニコニコ大百科:HTMLタグ一覧 スタイルシートプロパティの一覧 ボックス関するプロパティ

ボックスに関するプロパティ一覧

• margin・padding・width・height・borderの使い分け
• 幅・高さを指定する（width・height）
• 外側余白を指定する（margin）
• 内側余白を指定する（padding）
• 境界線のスタイルを指定する（border-style）
• 境界線の幅を指定する（border-width）
• 境界線の色を指定する（border-color）
• 境界線に関する設定をまとめて行う（border）

クリックするとジャンプします

margin・padding・width・height・borderの使い分け

↑

---

この項に関するプロパティの使い分けをするには、margin（外側余白）、border（境界線）、padding（内側余白）、width（内容幅）、height（内容縦幅）について理解する必要があります。

これらを図示すると、

margin

border

padding

width

height

このようになります。茶色の部分がmargin、緑色の部分がborder、桃色の部分がpadding、白色の部分が内容となります。内容部分の幅、高さがそれぞれwidth、heightです。

インライン要素には上記５つ全ては存在しません。（下表ではimg・hr要素をブロックレベル要素とします）

	ブロックレベル要素	インライン要素
高さ(height)	指定可	指定不可
幅(width)	指定可	指定不可
左右のマージン(margin)	要素の左右に存在	最初の文字の左側と、最後の文字の右側に存在
左右のボーダー(border)	要素の左右に存在	最初の文字の左側と、最後の文字の右側に存在
左右のパディング(padding)	要素の左右に存在	最初の文字の左側と、最後の文字の右側に存在
上下のマージン(margin)	要素の上下に存在	無視され、レイアウトに影響は無い
上下のボーダー(border)	要素の上下に存在	各行に存在するが、他の行に重なる場合がある
上下のパディング(padding)	要素の上下に存在	全ての行に存在し、ボーダーの位置に影響が出る

幅・高さを指定する

↑

---

プロパティ	適用対象
width / height	tr・col要素以外のブロックレベル要素及びimg要素・hr要素

値
auto	状況に応じて自動設定（標準）
%指定	親要素の幅・高さに対する割合を指定。
数値＋単位	数値に単位を付けて指定。詳しくはこちら

大百科の記事部分の幅は720pxです。要素毎の初期値は、hrの幅が80%となっています。iframeの初期値に関してはHTMLのiframeの項を参照してください。

その他の要素は状況に応じて幅・高さが自動指定されるautoが初期値です。例えば、imgタグの初期値はその画像の幅・高さと同じ大きさとなります。

ソースコード
<div style="height:200px; width:200px; background-color:#000000;"> <div style="height:70%; width:70%; background-color:#F0E68C;"> </div> </div>
表示結果

外側余白を指定する

↑

---

プロパティ	適用対象
margin	すべての要素

値
auto	状況に応じて自動指定
数値＋単位	数値に単位を付けて指定。詳しくはこちら

marginプロパティの指定方法には、次の４つの方法があります。値が２つ以上ある場合は、それぞれの間を半角スペースで区切って記述します。

• 値を１つ指定 - 【上下左右】
• 値を２つ指定 - 【上下】【左右】
• 値を３つ指定 - 【上】【左右】【下】
• 値を４つ指定 - 【上】【右】【下】【左】（時計回り）

またmargin-top、margin-right、margin-bottom、margin-leftプロパティを用いて、それぞれの値を個別に指定する事も出来ます。

マージンの範囲は背景が常に透明になり、親要素の背景が透けて見える状態になります。

要素が左右に隣接している場合どちらのボックスのマージンも有効ですが、要素が上下に隣接している場合は相殺され、大きな方のマージンだけが有効になります。

マージンには負の値を指定する事もでき、複数の要素が重なった状態になります。この時、上下マージンの片方が正・もう片方が負の値の場合はそれらを足した値が、両方が負の値の場合はそれらの小さい方の値がマージンとして有効になります。

tr、td、th、thead、tbody、tfoot、col、colgroup要素にマージンは存在しません。

大百科のデフォルトのマージンの値は、h2で0.2em 1px 0.4em 0、h3で0.1em 2px 0.3em 1px、h4で0.1em 3px 0.3em 2px、h5で0.1em 4px 0.2em 3px、h6で0.1em 5px 0.2em 4px、pで1em 1em、blockquoteでmargin-left: 30px、dt・ddで0.2emとなっています。

大百科では親要素の幅に対して%指定でmarginを指定する事は出来ません。

ソースコード
<div style="margin:20px 0px 0px 40px; background-color:red; height:60px; width:200px;"><p>margin:20px 0px 0px 40px</p></div> <div style="margin:5px 20px; background-color:cyan; height:60px; width:200px;"><p>margin:5px 20px</p></div> <div style="margin-top:30px; margin-left:30px; background-color:lime; height:60px; width:200px;"><p>margin-top:30px/margin-left:30px</p></div> <div style="margin:-25px 0px 0px; background-color:blue; height:60px; width:200px;"><p>margin:-25px 0px 0px</p></div>
表示結果
margin:20px 0px 0px 40px margin:5px 20px margin-top:30px/margin-left:30px margin:-25px 0px 0px

内側余白を指定する

↑

---

プロパティ	適用対象
padding	すべての要素

値
auto	状況に応じて自動指定
数値＋単位	数値に単位を付けて指定。詳しくはこちら

paddingプロパティの指定方法には、次の４つの方法があります。値が２つ以上ある場合は、それぞれの間を半角スペースで区切って記述します。

• 値を１つ指定 - 【上下左右】
• 値を２つ指定 - 【上下】【左右】
• 値を３つ指定 - 【上】【左右】【下】
• 値を４つ指定 - 【上】【右】【下】【左】（時計回り）

またpadding-top、padding-right、padding-bottom、padding-leftプロパティを用いて、それぞれの値を個別に指定する事も出来ます。

パディングの範囲にはその要素の背景に関する設定が適用されます。従って領域のwidth・heightを変更しなくても、paddingを変更すると見た目の上では領域が拡大・縮小したように見える事があります。

パディングには負の値を指定する事は出来ません。

tr、td、th、thead、tbody、tfoot、col、colgroup要素にマージンは存在しません。

大百科のデフォルトのパディングの値は、h2・h3・h4でpadding-left: 20px、h5でpadding-left: 18px、thで2px、tdで5px、blockquoteで10px 0px 10px 30px、dl・１段目のulで0.7em 0 0.5em 32px、２段目以降のdlで0.2em 0 0.1em 12px、１段目のolで0.7em 0 0.5em 32px、２段目以降のolで0.2em 0 0.1em 12px、ddでpadding-left: 1em、ニコニコ動画・市場以外のiframeで4pxとなっています。

大百科では親要素の幅に対して%指定でpaddingを指定する事は出来ません。

ソースコード
<p style="background-color:#eeeeee; padding:10px;">padding:10px</p> <p style="background-color:#eeeeee; padding-top:0px; padding-left:15px;">padding-top:0px padding-left:15px</p> <p style="background-color:#eeeeee; padding:10px 30px 15px;">padding:10px 30px 15px</p> <p style="background-color:#eeeeee; padding:20px 0px 0px 10px;">padding:20px 0px 0px 10px</p>
表示結果
padding:10px padding-top:0px padding-left:15px padding:10px 30px 15px padding:20px 0px 0px 10px

境界線のスタイルを指定する

↑

---

プロパティ	適用対象
border-style	すべての要素

値
none	ボーダー無し・太さ0（標準）
solid	実線
dashed	破線
dotted	点線
double	二重線
groove	周りに対してボーダー自体がへこんだように見える線
ridge	周りに対してボーダー自体が隆起したように見える線
inset	ボーダーで囲まれた部分がへこんだように見える線
outset	ボーダーで囲まれた部分が隆起したように見える線

border-styleプロパティの指定方法には、次の４つの方法があります。値が２つ以上ある場合は、それぞれの間を半角スペースで区切って記述します。

• 値を１つ指定 - 【上下左右】
• 値を２つ指定 - 【上下】【左右】
• 値を３つ指定 - 【上】【左右】【下】
• 値を４つ指定 - 【上】【右】【下】【左】（時計回り）

またborder-top、border-right、border-bottom、border-leftプロパティを用いて、それぞれの値を個別に指定する事も出来ます。

border-styleを指定する際は一緒にborder-widthプロパティも指定しましょう。border-styleプロパティだけを指定しても、大百科ではborder-width（ボーダー幅）プロパティの初期値が０であるため、ボーダー線が表示されません。

groove・ridge・inset・outsetではborder-widthが2px以下の時、doubleでは3px以下の時、border-styleが適切に表示されない可能性があります。

大百科のデフォルトのborder-styleの値は、h2～h6・th・td・blockquote・iframeでsolid、hrでdottedです。

ソースコード
<p style="border-style:none; border-width:4px;">none</p> <p style="border-style:solid; border-width:4px;">solid</p> <p style="border-style:dashed; border-width:4px;">dashed</p> <p style="border-style:dotted; border-width:4px;">dotted</p> <p style="border-style:double; border-width:4px;">double</p> <p style="border-style:groove; border-width:6px;">groove</p> <p style="border-style:ridge; border-width:6px;">ridge</p> <p style="border-style:inset; border-width:4px;">inset</p> <p style="border-style:outset; border-width:4px;">outset</p> <p style="border-style:solid groove outset double; border-width:4px;">solid groove outset double</p> <p style="border-style:inset dashed dotted; border-width:4px;">inset dashed dotted</p>
表示結果
none solid dashed dotted double groove ridge inset outset inset dashed dotted solid groove outset double

境界線の幅を指定する

↑

---

プロパティ	適用対象
border-width	すべての要素

値
数値＋単位	数値に単位をつけて指定。詳しくはこちら
thin	細い線
medium	普通の線
thick	太い線

border-widthプロパティの指定方法には、次の４つの方法があります。値が２つ以上ある場合は、それぞれの間を半角スペースで区切って記述します。

• 値を１つ指定 - 【上下左右】
• 値を２つ指定 - 【上下】【左右】
• 値を３つ指定 - 【上】【左右】【下】
• 値を４つ指定 - 【上】【右】【下】【左】（時計回り）

またborder-top-width、border-right-width、border-bottom-width、border-left-widthプロパティを用いて、それぞれの値を個別に指定する事も出来ます。

border-widthを指定する際は一緒にborder-styleプロパティも指定しましょう。border-widthプロパティだけを指定しても、大百科ではborder-styleプロパティの初期値がnoneであるため、ボーダー線が表示されません。

大百科のデフォルトのborder-widthの値は、h2～h6でborder-bottom:1px、hrでborder-top:1px、th・td・blockquote・iframeで1pxです。

ソースコード
<p style="border-style:solid; border-width:1px;">1px</p> <p style="border-style:solid; border-width:1ex;">1ex</p> <p style="border-style:solid; border-width:1em;">1em</p> <p style="border-style:solid; border-width:thin;">thin</p> <p style="border-style:solid; border-width:medium;">medium</p> <p style="border-style:solid; border-width:thick;">thick</p> <p style="border-style:solid; border-width:1px 3px 4px;">1px 3px 4px</p> <p style="border-style:solid; border-bottom-width:4px; border-left-width:4px;">bottom:solid 4px / left:solid 4px</p> <p style="border-style:solid dashed groove inset; border-width:2px 4px 5px thick;">top:solid 2px / right:dashed 4px / bottom:groove 5px / left:inset thick</p>
表示結果
1px 1ex 1em thin medium thick 1px 3px 4px bottom:solid 4px / left:solid 4px top:solid 2px / right:dashed 4px / bottom:groove 5px / left:inset thick

境界線の色を指定する

↑

---

プロパティ	適用対象
border-color	すべての要素

値
色	16進数、カラーネームなどで指定。詳しくはこちら

大百科でborder-colorを指定する際は、上下左右の色をそれぞれ個別に指定しなければいけません。border-top-color、border-right-color、border-bottom-color、border-left-colorプロパティを用います。

border-colorを指定する際は一緒にborder-widthとborder-styleプロパティも指定しましょう。border-widthの初期値が0、border-styleの初期値がnoneとなっているため、border-colorの指定のみではボーダー線が表示されません。

大百科のデフォルトのborder-colorの値は、h2～h6で#8cc700、hrで#cccccc、th・tdで#d1d1d1、blockquoteで#FFD248、iframeで#cccccc、その他で#000000です。

ソースコード
<p style="border-style:solid; border-width:4px; border-top-color:#ff0000; border-right-color:#ff0000; border-bottom-color:#ff0000; border-left-color:#ff0000;">red</p> <p style="border-style:solid; border-width:4px; border-top-color:#ff0000; border-right-color:#00ff00; border-bottom-color:black; border-left-color:cyan;">red/lime/black/cyan</p> <p style="border-style:none none groove groove; border-width:6px; border-bottom-color:steelblue; border-left-color:steelblue;">none/none/groove-steelblue/groove-steelblue</p>
表示結果
red red/lime/black/cyan none/none/groove-steelblue/groove-steelblue

境界線に関する設定をまとめて行う

↑

---

プロパティ	適用対象
border	すべての要素

値
border-styleの値（必須）	詳しくはborder-styleの項を参照
border-widthの値（必須）	詳しくはborder-widthの項を参照
border-colorの値（必須）	詳しくはborder-colorの項を参照

borderプロパティを使用する事で、上記３つの設定をまとめて行う事が出来ます。それぞれの値は半角スペースで区切って記述します。

記述順は任意で、すべてのプロパティの値が必須です。省略する事は出来ません。

またborderプロパティでは上下左右それぞれの値をバラバラに指定する事は出来ません。border-top、border-right、border-bottom、border-leftプロパティをそれぞれ指定してください。

ソースコード
<p style="border:ridge 8px #F0E68C;">ridge 8px #F0E68C</p> <p style="border-top:dotted 4px #C0C0C0; border-right:groove 3px #000000; border-bottom:groove 3px #000000; border-left:dotted 4px #C0C0C0;">dotted 4px #C0C0C0/groove 3px #000000/groove 3px #000000/dotted 4px #C0C0C0</p>
表示結果
ridge 8px #F0E68C dotted 4px #C0C0C0/groove 3px #000000/groove 3px #000000/dotted 4px #C0C0C0

ニコニコ大百科:HTMLタグ一覧

この記事に関するご意見・ご要望は元記事にお願い致します。