ボックス

ボックスをデザインする．

要素の周囲に枠線を表示

border-styleプロパティ

要素の上枠の線のスタイルを指定できる．

適用できる要素 すべての要素
継承 しない
テンプレート 
border-style: ;
指定できる値値の効果
none枠線を表示しない．
hidden枠線を表示しない．
dotted点線になる．
dashed破線になる．
solid実線になる．
double二重線になる．
groove掘り込まれるような枠線になる．
ridge盛り上がったような枠線になる．
inset要素全体がへこんだような枠線になる．
outset要素全体が盛り上がったような枠線になる．
  • 値が1つ
    テンプレート 
    border-style: 値;
    効果

    上下左右の線がそれぞれ一つ目のスタイルになる．
  • 値が2つ
    テンプレート 
    border-style: 値 値;
    効果

    上下の線が一つ目のスタイルになり，左右の線が二つ目のスタイルになる．
  • 値が3つ
    テンプレート 
    border-style: 値 値 値;
    効果

    上の線が一つ目のスタイルになり，左右の線が二つ目のスタイル，下の線が三つ目のスタイルになる．
  • 値が4つ
    テンプレート 
    border-style: 値 値 値 値;
    効果

    先頭から順に上・右・下・左(時計回り)の枠線のスタイルとなる．
CSSの例文 
p.border-style{
border-style: none none hidden hidden;
}
XHTMLの例文 
<p class="border-style">題名</p>
出力

題名

border-colorプロパティ

要素の上枠の線のスタイルを指定できる．

適用できる要素 すべての要素
継承 しない
テンプレート 
border-color: ;
指定できる値値の効果
色指定した色になる．
transparent要素の背景をそのまま表示する．
  • 値が1つ
    テンプレート 
    border-color: 値;
    効果

    上下左右がそれぞれ一色目の色になる．
  • 値が2つ
    テンプレート 
    border-color: 値 値;
    効果

    上下が一色目の色になり，左右が二色目の色になる．
  • 値が3つ
    テンプレート 
    border-color: 値 値 値;
    効果

    上が一色目の色になり，左右が二色目の色，下が三色目の色になる．
  • 値が4つ
    テンプレート 
    border-color: 値 値 値 値;
    効果

    先頭から順に上・右・下・左(時計回り)の枠線の色となる．
CSSの例文 
p.border-color{
border-style: dotted dotted dashed dashed;
border-color: red transparent red transparent;
}
XHTMLの例文 
<p class="border-color">題名</p>
出力

題名

border-widthプロパティ

要素の上下左右の枠の線の太さを指定できる．

適用できる要素すべての要素
継承しない
テンプレート 
border-width: ;
指定できる値値の効果
thin細めの枠線になる．
medium標準の枠線になる．
thick太めの枠線になる．
長さ指定した単位で枠線を設定できる．
  • 値が1つ
    テンプレート 
    border-width: 値;
    効果 上下左右がそれぞれ1つ目に指定した太さになる．
  • 値が2つ
    テンプレート 
    border-width: 値 値;
    効果 上下が1つ目に指定した太さになり，左右が2つ目に指定した太さとなる．
  • 値が3つ
    テンプレート 
    border-width: 値 値 値;
    効果 上が1つ目に指定した太さになり，左右が2つ目に指定した太さ，下が3つ目に指定した太さになる．
  • 値が4つ
    テンプレート 
    border-width: 値 値 値 値;
    効果 e先頭から順に上・右・下・左(時計回り)の枠線の太さとなる．
CSSの例文 
p.border-width{
border-style: solid solid double double;
border-width: thick thin;
}
CSSの例文 
<p class="border-width">題名</p>
出力結果

題名

borderプロパティ

上下左右の枠線のスタイル・色・太さをまとめて指定できる．

適用できる要素全ての要素
継承しない
テンプレート 
border: スタイルの値 色の値 太さの値;
指定できる値値の効果
スタイルborder-styleで指定できる値を用いて同様の効果を得る．
色border-colorで指定できる値を用いて同様の効果を得る．
太さborder-widthで指定できる値を用いて同様の効果を得る．

値の並べる順番に決まりはなく，値を省略することもできる．

CSSの例文 
p.border{
border: double red thick;
}
XHTMLの例文 
<p class="border">borderプロパティ</p>
出力結果

borderプロパティ

領域の指定

marginプロパティ

上下左右のマージンをまとめて指定できる．

適用できる要素全ての要素
継承しない
テンプレート 
margin: ;
指定できる値値の効果
長さ指定した単位で長さを指定する．
 %パーセンテージで長さを指定する．
auto要素やboxの種類に応じて自動的に配置される．
  • 値が1つ
    テンプレート 
    margin: 値;
    効果 上下左右のマージンがそれぞれ1つ目に指定した長さになる．
  • 値が2つ
    テンプレート 
    margin: 値 値;
    効果 上下が1つ目に指定した長さになり，左右が2つ目に指定した長さになる．
  • 値が3つ
    テンプレート 
    margin: 値 値 値;
    効果 上が1つ目に指定した長さになり，左右が2つ目に指定した長さ，下が3つ目に指定した長さになる．
  • 値が4つ
    テンプレート 
    margin: 値 値 値 値;
    効果 先頭から順に上・右・下・左(時計回り)のマージンの長さとなる．
CSSの例文 
div.margin{
background-color: lightcyan;
border: transparent solid;
}
div.margin div{
background-color: white;
border: solid;
padding: 1em;
margin: 1em;
}
div.margin strong{
position: relative;
right: 6em;
bottom: 3.5em;
}
div.margin div p{
background-color: transparent;
}
XHTMLの例文 
<div class="margin">
<div>
<p>内容領域<strong>マージン領域</strong></p>
</div>
</div>
出力結果

内容領域マージン領域

paddingプロパティ

上下左右のパディングの長さをまとめて指定できる．

適用できる要素全ての要素
継承しない
テンプレート 
padding: ;
指定できる値値の効果
長さ指定した単位で長さを指定する．
 %パーセンテージで長さを指定する．
  • 値が1つ
    テンプレート 
    padding: 値;
    効果 上下左右のパディングがそれぞれ1つ目に指定した長さになる．
  • 値が2つ
    テンプレート 
    padding: 値 値;
    効果 上下が1つ目に指定した長さになり，左右が2つ目に指定した長さになる．
  • 値が3つ
    テンプレート 
    padding: 値 値 値;
    効果 上が1つ目に指定した長さになり，左右が2つ目に指定した長さ，下が3つ目に指定した長さになる．
  • 値が4つ
    テンプレート 
    padding: 値 値 値 値;
    効果 先頭から順に上・右・下・左(時計回り)のパディングの長さとなる．
CSSの例文 
div.padding{
background-color: transparent;
border: transparent solid;
}
div.padding div{
background-color: lightcyan;
border: solid;
padding: 1em;
margin: 1em;
}
div.padding strong{
position: relative;
right: 3em;
bottom: 1.5em;
}
div.padding div p{
background-color: white;
}
XHTMLの例文 
<div class="padding">
<div>
<p>内容領域<strong>パディング領域</strong></p>
</div>
</div>
出力結果

内容領域パディング領域

要素の内容領域の変更

widthプロパティ

要素の内容領域の幅を指定できる．

適用できる要素ブロック要素・幅と高さのあるインライン要素
継承しない
テンプレート 
width: 値;
指定できる値値の効果
長さ指定した単位で長さを指定する．
 %パーセンテージで長さを指定する．
autoブロック要素に指定した場合，要素の幅は左右いっぱいに広がり，インライン要素に指定した場合は，ブラウザが自動的に決める幅となる．
CSSの例文 
div.width{
background-color: transparent;
border: transparent solid;
}
div.width div{
background-color: transparent;
border: solid;
padding: 1em;
margin: 1em;
}
div.width strong{
position: relative;
left: 5em;
top: 1em;
}
div.width div p{
background-color: lightcyan;
border-bottom: solid hotpink;
width: 22em;
height: 1em;
}
XHTMLの例文 
<div class="width">
<div>
<p>内容領域<strong>width</strong></p>
</div>
</div>
出力結果

内容領域width

heightプロパティ

要素の内容領域の高さを指定できる．

適用できる要素ブロック要素・幅と高さのあるインライン要素
継承しない
テンプレート 
height: 値;
指定できる値値の効果
長さ指定した単位で長さを指定する．
 %パーセンテージで長さを指定する．
autoブロック要素に指定した場合，要素の高さは上下いっぱいに広がり，インライン要素に指定した場合は，ブラウザが自動的に決める高さとなる．
CSSの例文 
div.height{
background-color: transparent;
border: transparent solid;
}
div.height div{
background-color: transparent;
border: solid;
padding: 1em;
margin: 1em;
}
div.height strong{
position: relative;
left: 19em;
top: 0em;
}
div.height div p{
background-color: lightcyan;
border-right: solid hotpink;
width: 22em;
height: 1em;
}
XHTMLの例文 
<div class="height">
<div>
<p>内容領域<strong>height</strong></p>
</div>
</div>
出力結果

内容領域height

その他

その他のプロパティ

  • border-top-styleプロパティ
  • border-bottom-styleプロパティ
  • border-left-styleプロパティ
  • border-right-styleプロパティ
  • border-top-widthプロパティ
  • border-bottom-widthプロパティ
  • border-left-widthプロパティ
  • border-right-widthプロパティ
  • border-top-colorプロパティ
  • border-bottom-colorプロパティ
  • border-left-colorプロパティ
  • border-right-colorプロパティ
  • border-topプロパティ
  • border-bottomプロパティ
  • border-leftプロパティ
  • border-rightプロパティ
  • margin-topプロパティ
  • margin-bottomプロパティ
  • margin-leftプロパティ
  • margin-rightプロパティ
  • padding-topプロパティ
  • padding-bottomプロパティ
  • padding-leftプロパティ
  • padding-rightプロパティ
  • min-widthプロパティ
  • max-widthプロパティ
  • min-heightプロパティ
  • max-heightプロパティ