サイト内検索
...スタイルシート(css)...
スタイルシート・ボックス
borderのサイズ
- borderのサイズは、border-widthプロパティを指定します。
- [使い方]
- .sample{
border-width: 5px;
border-style: solid;
border-color: ccff99;
}
プロパティ名 | 値
(サンプル) |
説明 |
---|---|---|
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>
[ブラウザ上]
みどりの枠線を指定します。