超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap
 Home > 超初心者のためのスタイルシート講座 > ボックスの枠線 > Next 

■ ボックスの枠線に関する設定

プロパティ説明
border-style
border-top-style
border-left-style
border-right-style
border-bottom-style
solid直線
double二重線
groove溝線
ridge稜線
insetくぼんで見える線
outset浮き上がって見える線
noneなし(デフォルト)
border-width
border-top-width
border-left-width
border-right-width
border-bottom-width
thin細い線
medium中間の線(デフォルト)
thick太い線
単位mm,cm,pt,pxなど
border-color
border-top-color
border-left-color
border-right-color
border-bottom-color
#rrggbbrr、gg、bb は 00〜ff
カラーネームred、green、blue など
#rgbr、g、b は 0〜f
rgb(n,n,n)n は 0〜255
rgb(n%,n%,n%)n は 0〜100
border枠線の設定をまとめて指定する
border-top上線の設定をまとめて指定する
border-left左線の設定をまとめて指定する
border-right右線の設定をまとめて指定する
border-bottom下線の設定をまとめて指定する

◆枠線のスタイルを指定する

(css file)
p{
 background-color:#fc3;
 border-width:10px;
 width:300px;
}
.solid{ border-style:solid; }
.double{ border-style:double; }
.groove{ border-style:groove; }
.ridge{ border-style:ridge; }
.inset{ border-style:inset; }
.outset{ border-style:outset; }
.none{ border-style:none; }

(html file)
<p class="solid"> solid</p>
<p class="double"> double</p>
<p class="groove"> groove</p>
<p class="ridge"> ridge</p>
<p class="inset"> inset</p>
<p class="outset"> outset</p>
<p class="none"> none</p>

 solid

 double

 groove

 ridge

 inset

 outset

 none

これらは border-style プロパティのプロパティ値を1つだけ指定しましたが、2つ指定すると、1つめが上下、2つめが左右の枠線スタイルになります。3つ指定すると、上、左右、下の順、4つ指定すると、上、右、下、左の順(時計回り)になります。
また、border-top-style 、border-left-style プロパティなどで、個別に指定することもできます。

タグ名{ border-style:top値 right値 bottom値 left値; }

(css file)
div{
 border-style:solid double groove ridge;
 border-width:8px;
}

(html file)
<div>
このように枠線スタイルのプロパティ値を4つ指定すると、上、右、下、左の枠線スタイルを別々に指定することができます。値と値の間のスペースを忘れないでね。
</div>

このように枠線スタイルのプロパティ値を4つ指定すると、上、右、下、左の枠線スタイルを別々に指定することができます。値と値の間のスペースを忘れないでね。


◆枠線の太さを指定する

(css file)
p{
 background-color:#fc3;
 border-style:solid;
 width:300px;
}
.thin{ border-width:thin; }
.medium{ border-width:meidum; }
.thick{ border-width:thick; }
.1cm{ border-width:1cm; }
.20px{ border-width:20px; }

(html file)
<p class="thin"> 細い枠線です</p>
<p class="medium"> これが中間の太さの枠線です</p>
<p class="thick"> 太い枠線です</p>
<p class="1cm"> 枠線の太さ10pxです</p>
<p class="20px"> こっちは太さ1cmだよ</p>

 細い枠線です

 これが中間の太さの枠線です

 太い枠線です

 枠線の太さ10pxです

 こっちは太さ1cmだよ

枠線のスタイルを設定したときと同様に、プロパティ値を4つまで指定することができます。
また、border-top-width 、border-left-width プロパティなどを使えば、個別に指定することもできます。

タグ名{ border-width:top値 right値 bottom値 left値; }

(css file)
div{
 border-style:solid;
 border-width:thin medium thick 10px;
}

(html file)
<div>
このように枠線の太さを設定するプロパティ値を4つ指定すると、上、右、下、左の枠線の太さを別々に指定することができます。値と値の間のスペースを忘れないでね。
</div>

このように枠線の太さを設定するプロパティ値を4つ指定すると、上、右、下、左の枠線の太さを別々に指定することができます。値と値の間のスペースを忘れないでね。


◆枠線の色を指定する

(css file)
p{
 border-style:solid;
 border-width:10px;
 width:300px;
}
.1color{ border-color:#800; }
.2color{ border-color:#c66 #903 #903 #c66; }

(html file)
<p class="1color">
枠線の色を指定するには border-color プロパティを使います。値を1つだけ記述すると4辺が同じ色になります。
</p>
<p class="2color">
値を4つ記述した場合は、上、右、下、左の順で枠線の色を別々に指定することができます。ここは上と左、右と下を同じ色にしています。
</p>

枠線の色を指定するには border-color プロパティを使います。値を1つだけ記述すると4辺が同じ色になります。

値を4つ記述した場合は、上、右、下、左の順で枠線の色を別々に指定することができます。ここは上と左、右と下を同じ色にしています。


◆枠線に関する設定をまとめて行う

border プロパティで枠線に関する設定をまとめて指定することもできます。
また、border-top 、border-left 、border-right 、border-bottom プロパティで、それぞれ上、左、右、下線に関する設定をまとめて指定することができます。

タグ名{ border:style値 width値 color値; }

(css file)
h4{ border:inset 10px #03f; width;400px; }

(html file)
<h4>
 枠線に関する設定をまとめて行う
</h4>

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


 Home < 超初心者のためのスタイルシート講座 < Back < ボックスの枠線に関する設定 > Next