ホーム＞HTMLリファレンス（アルファベット検索）＞border-styleプロパティ
border-style プロパティ …上下左右の枠線のスタイルをまとめて指定する
使用プロパティ
 |
border-style: 値; |
対象となる
要素 |
すべて |
継承 |
しない
|
値 |
値を１つから４つ指定します。詳しくは、次項（値と働き）を参照してください。
また、枠線のスタイルは（枠線の種類、枠線の表示例）を参照してください。 |
 |
      |
 解説
 border-style プロパティを使えば、要素の上下左右の枠線のスタイルをまとめて指定することができます。値には枠線のスタイル（枠線の種類、枠線の表示例）を１つ〜４つ（値と働き）指定できます。
上下左右の枠線の太さやスタイル、色をまとめて指定するには border プロパティを使用します。
※枠線にスタイルを指定しなければ枠線は表示されません。理由は、枠線のスタイルを指定しない場合、「none」（枠線なし）と見なされるからです。枠線を表示するには必ず枠線のスタイルを指定しましょう。また、逆に枠線のスタイル以外を指定しない場合は、太さは「medium」、色は「文字の色」となります。枠線にスタイルを指定するには「CSS一覧プロパティ辞典-枠線のスタイル-」を参照してください。
枠線のスタイルを上下左右別々に指定したい場合は「CSS一覧プロパティ辞典-枠線のスタイル-」を参照してください。
|
値と働き（値を１つ〜４つ指定）
| 値 |
働き |
値 |
働き |
| 枠線のスタイルの値を１つ指定 |
上下左右のスタイルになる。 |
枠線のスタイルの値を２つ指定
（半角スペースで区切る） |
１つ目に指定したスタイルが上下、２つ目に指定したスタイルが左右のスタイルになる。 |
枠線のスタイルの値を３つ指定
（半角スペースで区切る） |
１つ目に指定したスタイルが上、２つ目に指定したスタイルが左右、３つ目に指定したスタイルが下のスタイルになる。 |
枠線のスタイルの値を４つ指定
（半角スペースで区切る） |
１つ目に指定したスタイルが上、２つ目に指定したスタイルが右、３つ目に指定したスタイルが下、４つ目に指定したスタイルが左のスタイルになる。 |
| 値 |
働き |
表示例 |
値 |
働き |
表示例 |
| none |
枠線の非表示 |
表示例 |
dotted |
点線の表示 |
表示例 |
| dashed |
破線の表示 |
表示例 |
solid |
実線の表示 |
表示例 |
| double |
二重線の表示 |
表示例 |
groove |
枠線がへこんだように表示 |
表示例 |
| ridge |
枠線が飛びしているように表示 |
表示例 |
inset |
枠線の中の要素がへこんだように表示 |
表示例 |
| outset |
枠線の中の要素が飛び出したように表示 |
表示例 |
|
|
|
使用例
記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>
<!--スタイルシート-->
<style type="text/css">
p.sample1 {
border-style: solid;
}
p.sample2 {
border-style: solid double;
}
p.sample3 {
border-style: solid double dotted;
}
p.sample4 {
border-style: solid double dotted dashed;
}
</style>
</head>
<!--ページの本文-->
<body>
<p class="sample1">上下左右の枠線のスタイルを「solid」にしています。</p>
<p class="sample2">上下の枠線のスタイルを「solid」、左右の枠線のスタイルを「double」にしています。</p>
<p class="sample3">上の枠線のスタイルを「solid」、左右の枠線のスタイルを「double」、下の枠線のスタイルを「dotted」にしています。</p>
<p class="sample4">上の枠線のスタイルを「solid」、右の枠線のスタイルを「double」、下の枠線のスタイルを「dotted」、左の枠線のスタイルを「dashed」にしています。</p>
</body>
|
|
[ブラウザでの表示例]
| HOME PAGE ZERO ガイド |
|
上下左右の枠線のスタイルを「solid」にしています。
上下の枠線のスタイルを「solid」、左右の枠線のスタイルを「double」にしています。
上の枠線のスタイルを「solid」、左右の枠線のスタイルを「double」、下の枠線のスタイルを「dotted」にしています。
上の枠線のスタイルを「solid」、右の枠線のスタイルを「double」、下の枠線のスタイルを「dotted」、左の枠線のスタイルを「dashed」にしています。 |
△ページトップへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他
