サイト内検索

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

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

borderのサイズ

borderのサイズは、border-widthプロパティを指定します。
[使い方]
.sample{
border-width: 5px;
border-style: solid;
border-color: ccff99;
}
[borderの指定方法]
プロパティ名
(サンプル)
説明
border-width:10px;上下左右を指定します。
border-width: 10px 20px;上下・左右を指定します。
border-width:10px 20px30px;上・ 左右・下を指定します。
border-width:10px 20px 30px 40px;上・ 右・下・左を指定します。

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

[太さの指定方法]
説明 表示例
thin細い線

thin

medium中間の太さ
指定なし
(標準値・初期設定値)

medium

thick太い線

thick

数値・単位px・pt・emなど

1px

10px

サンプル

[headの中]

<style type="text/css">
<!--
.sample{
border-width: 5px;
border-style:s olid;
border-color: ccff99;
}
h3, h4{
border-color: #ccff99;
border-style: solid;
}
.sample1{
border-width: medium;
width: 400px;
}
.sample2{
border-top-width: 5px;
border-right-width: 50px;
border-bottom-width: 0;
border-left-width: 20px;
width: 400px;
}
-->
</style>

[bodyの中]

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

<h3 class="sample1">
指定なしの枠線を指定します。
</h3>

<h4 class="sample2">
上に5px・左に20px・下・右は枠線なしの枠線を指定します。
</h4>

[ブラウザ上]

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

指定なしの枠線を指定します。

上に5px・左に20px・下・右は枠線なしの枠線を指定します。


Copyright c 2007.10.01 luc All rights reserved.