ホーム>HTMLリファレンス(アルファベット検索)>border-widthプロパティ
border-width プロパティ …上下左右の枠線の太さをまとめて指定する
使用プロパティ
|
border-width: 値; |
対象となる
要素 |
すべて |
継承 |
しない
|
値 |
thin(細め)、medium(標準)、thick(太め)、単位付きの長さ
これらの値を1つから4つ指定します。詳しくは、次項(値と働き)を参照してください。 |
|
|
解説
border-width プロパティを使えば、要素の上下左右の枠線の太さをまとめて指定することができます。値にはthin(細め)、medium(標準)、thick(太め)、単位付きの長さを指定でき、
値にキーワードを指定する場合、実際に表示される枠線の太さはブラウザに依存します。
上下左右の枠線の太さやスタイル、色をまとめて指定するには border プロパティを使用します。
※枠線にスタイルを指定しなければ枠線は表示されません。理由は、枠線のスタイルを指定しない場合、「none」(枠線なし)と見なされるからです。枠線を表示するには必ず枠線のスタイルを指定しましょう。また、逆に枠線のスタイル以外を指定しない場合は、太さは「medium」、色は「文字の色」となります。枠線にスタイルを指定するには「CSS一覧プロパティ辞典-枠線のスタイル-」を参照してください。
枠線の太さを上下左右別々に指定したい場合は「CSS一覧プロパティ辞典-枠線の太さ-」を参照してください。
|
値 |
働き |
値 |
働き |
枠線の太さの値を1つ指定 |
上下左右の太さになる。 |
枠線の太さの値を2つ指定 (半角スペースで区切る) |
1つ目に指定した太さが上下、2つ目に指定した太さが左右の太さになる。 |
枠線の太さの値を3つ指定 (半角スペースで区切る) |
1つ目に指定した太さが上、2つ目に指定した太さが左右、3つ目に指定した太さが下の太さになる。 |
枠線の太さの値を4つ指定 (半角スペースで区切る) |
1つ目に指定した太さが上、2つ目に指定した太さが右、3つ目に指定した太さが下、4つ目に指定した太さが左の太さになる。 |
使用例
記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>
<!--スタイルシート-->
<style type="text/css">
p.sample1 {
border-style: solid;
border-width: thin;
}
p.sample2 {
border-style: solid;
border-width: medium;
}
p.sample3 {
border-style: solid;
border-width: thick;
}
p.sample4 {
border-top-style: solid;
border-width: 1px;
}
p.sample5 {
border-top-style: solid;
border-width: 1px 5px ;
}
p.sample6 {
border-top-style: solid;
border-width: 1px 5px 10px;
}
p.sample7 {
border-top-style: solid;
border-width: 1px 5px 10px 15px;
}
</style>
</head>
<!--ページの本文-->
<body>
<p class="sample1">上下左右の枠線の太さを「thin」にして、枠線のスタイルを「solid」にしています。</p>
<p class="sample2">上下左右の枠線の太さを「medium」にして、枠線のスタイルを「solid」にしています。</p>
<p class="sample3">上下左右の枠線の太さを「thick」にして、枠線のスタイルを「solid」にしています。</p>
<p class="sample4">上下左右の枠線の太さを「1px」にして、枠線のスタイルを「solid」にしています。</p>
<p class="sample5">上下の枠線の太さを「1px」、左右の枠線の太さを「5px」にして、枠線のスタイルを「solid」にしています。</p>
<p class="sample6">上の枠線の太さを「1px」、左右の枠線の太さを「5px」、下の枠線の太さを「10px」にして、枠線のスタイルを「solid」にしています。</p>
<p class="sample7">上の枠線の太さを「1px」、右の枠線の太さを「5px」、下の枠線の太さを「10px」、左の枠線の太さを「15px」にして、枠線のスタイルを「solid」にしています。</p>
</body>
</html> |
|
[ブラウザでの表示例]
HOME PAGE ZERO ガイド |
上下左右の枠線の太さを「thin」にして、枠線のスタイルを「solid」にしています。
上下左右の枠線の太さを「medium」にして、枠線のスタイルを「solid」にしています。
上下左右の枠線の太さを「thick」にして、枠線のスタイルを「solid」にしています。
上下左右の枠線の太さを「1px」にして、枠線のスタイルを「solid」にしています。
上下の枠線の太さを「1px」、左右の枠線の太さを「5px」にして、枠線のスタイルを「solid」にしています。
上の枠線の太さを「1px」、左右の枠線の太さを「5px」、下の枠線の太さを「10px」にして、枠線のスタイルを「solid」にしています。
上の枠線の太さを「1px」、右の枠線の太さを「5px」、下の枠線の太さを「10px」、左の枠線の太さを「15px」にして、枠線のスタイルを「solid」にしています。 |
△ページトップへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他