サイト内検索

...スタイルシート(css)...

スタイルシート・ボックス

borderに色の指定(border-color)

ボックスのborderの色は、border-colorプロパティを指定します。

プロパティ名 説明
border-color: ; 16進数RGB値(例・・#fff000)
または
カラーネーム(例・・red)を指定します。
border--color: ; 16進数RGB値(例・・#fff000)
または
カラーネーム(例・・red)を指定します。

[border-color の指定方法]
プロパティ名
(サンプル)
説明
border-color:#ffcccc;上下左右の
色を指定します。
border-color:#ffcccc #ccff99;上下・左右の
色を指定します。
border-color:#ffcccc #ccff99 #ffcccc;上・左右・下の
色を指定します。
border-color:#ffcccc #ccff99 #ffcccc #ccff99;上・右・下・左の
色を指定します。

[個別の設定方法]
プロパティ名
(サンプル)
説明
border-top-color :#ffcccc;上の境界線の色を指定します。
border-right-color: #ffcccc;右の境界線の色を指定します。
border-bottom-color: #ffcccc;下の境界線の色を指定します。
border-left-color: #ffcccc;左の境界線の色を指定します。

サンプル

[headの中]

<style type="text/css">
<!--
.sample{
border-width: 5px;
border-style :solid;
border-color: #ccff99;
}
h3,h4{
border-width: 5px; border-style: dotted;
}
.sample3{
border-color: #ccff99;
width: 450px;
}
.sample4{
border-top-color: #9999dd;
border-bottom-color: #ccff99;
width: 450px;
} -->
</style>

[bodyの中]

みどりの
<span class="sample">
境界線
</span>
を指定します。

<h3 class="sample3">
みどりの境界線を指定します。
</h3>

<h4 class="sample4">
上にむらさき・下にみどりの境界線を指定します。
</h4>

[ブラウザ上]

みどりの境界線を指定します。

みどりの境界線を指定します。

上にむらさき・下にみどりの境界線を指定します。


Copyright c 2007.10.01 luc All rights reserved.