サイト内検索
...スタイルシート(css)...
スタイルシート・ボックス
まとめて指定(border)
- ボックスをまとめて指定するには、borderプロパティを指定します。
- 枠線を表示させる場合は、枠線のスタイルの指定は省かないようにします。
- [使い方]
- .sample{border: thin solid #ccff99;}
borderの色については、こちらをご覧ください。
borderの種類については、こちらをご覧ください。
| プロパティ名 | 値 | 説明 |
|---|---|---|
| border: | ; | 「thin solid #ccff99」
のように太さ・色・種類を指定します。 (半角スペースで区切って、順番は自由です) 必要でないものは省略できます。 |
| プロパティ名 | 値
（サンプル） |
説明 |
|---|---|---|
| border-top: | 2px solid #ccff99; | 上の枠線の太さ・色・種類を指定します。 |
| border-right: | 2px solid #ccff99; | 右の枠線の太さ・色・種類を指定します。 |
| border-bottom: | 2px solid #ccff99; | 下の枠線の太さ・色・種類を指定します。 |
| border-left: | 2px solid #ccff99; | 左の枠線の太さ・色・種類を指定します。 |
サンプル
[ｈｅａｄの中]
<style type="text/css"><!--
.sample{
border: thin solid #ccff99;
}
h3{
border: thin dotted #ccff99;
width: 450px;
}
h4{
border-top: 7px outset gold;
border-right: thick double #9999dd;
border-bottom: 12px dashed #ccff99;
border-left: thick solid #ffcccc;
width: 450px;
}
-->
</style>
[ｂｏｄｙの中]
みどりの
<span class="sample">
枠線
</span>
を指定します。
<h3>
dottedの枠線を指定します。
</h3>
<h4>
上に7px outset #ffff8e;・右にthick double #9999dd;
下に12px dashed #ccff99;・左にthick solid #ffcccc;
の枠線を指定します。
</h4>
[ブラウザ上]
みどりの枠線を指定します。