項 目 | 説 明 |
---|---|
記述形式 | セレクタ {border-top-width: 値 } |
値 の形式 | 長さ | thin | medium | thick |
初 期 値 | medium |
対応ブラウザー | C1+ / e4+ / N6+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
適用可能な要素 | すべての要素 |
継 承 | しない |
border-top-widthプロパティ は,要素の 境界ボックスの上部の線の太さ を指定します。
なお,border-topプロパティによって, border-top-style,border-top-color,border-top-width の3つのプロパティを 一括指定できます。
数値による指定は,次のような単位を付けて可能です。
単位 | 説 明 |
---|---|
px | px とは画面の1画素(ピクセル) のサイズを1とする単位です。 実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。 |
em | em とは現在使用中の標準フォントの高さを1とする単位です。 |
ex | ex とは現在使用中の標準フォントの小文字の「x」の高さを1とする単位です。 |
% | 親要素の widthプロパティ の値を基準にして割合を%値で指定します。 |
ただし,実際には,境界の太さにそれほど大きな値を指定することは少ないので,"px" を使う場合がほとんどです。
また,"thin","medium","thick" のキーワードによる指定内容は,次の通りです。
値 | 説 明 |
---|---|
thin | 細い境界線にします。 |
medium | 中くらいの標準的な太さの境界線にします。 (初期値) |
thick | 太い境界線にします。 |
HTMLソース | |
---|---|
CSS <head> ~ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- div.sample {width: 50%; } p.width1 {border-top: solid red;border-top-width: thin; } p.width2 {border-top: solid red;border-top-width: medium; } p.width3 {border-top: solid red;border-top-width: thick;} p.width4 {border-top: solid red;border-top-width: 3px;} p.width5 {border-top: solid red;border-top-width: 6px;} --> </style> |
HTML <body> ~ </body> |
<div class="sample"> <p class="width1"> {border-top-width: <em>thin</em>} の境界表示</p> <p class="width2"> {border-top-width: <em>medium</em>} の境界表示</p> <p class="width3"> {border-top-width: <em>thick</em>} の境界表示</p> <p class="width4"> {border-top-width: <em>3px</em>} の境界表示</p> <p class="width5"> {border-top-width: <em>6px</em>} の境界表示</p> </div> |
ブラウザー 表示例 |
---|
{border-top-width: thin} の境界表示 {border-top-width: medium} の境界表示 {border-top-width: thick} の境界表示 {border-top-width: 3px} の境界表示 {border-top-width: 6px} の境界表示 |
次の例では,クラス sample2 と sample3 では,border-top-width の値を持たない border-top と border-top-width の 2つプロパティの指定の順序が違います。 このうち,sample3 では,上部境界線の太さは, border-top-width の指定の 8px にはなりません。 それは,sample3 クラス では,後の border-top の値には, border-top-width が指定されていないため,初期値の medium に リセットされてしまうからです。
一方,クラス sample4 のようなスタイル,色,幅の個別の指定の場合では,指定内容の範囲 が独立していますので,指定の順番を変更しても結果は変わりません。
HTMLソース | |
---|---|
CSS <head> ~ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- div.sample1 { background-color: #CCCCCC; border: solid red 6px; border-top-color: green; border-top-width: 8px; } div.sample2 { background-color: #CCCCCC; border-top: green solid; border-top-width: 8px; } div.sample3 { background-color: #CCCCCC; border-top-width: 8px; border-top: green solid; } div.sample4 { background-color: #CCCCCC; border-top-width: 8px; border-top-color: green; border-top-style: solid; } --> </style> |
HTML <body> ~ </body> |
<div style="width:50%;"> <br> <div class="sample1"> これが class="sample1" の部分です。</div> <br> <div class="sample2"> これが class="sample2" の部分です。</div> <br> <div class="sample3"> これが class="sample3" の部分です。</div> <br> <div class="sample4"> これが class="sample4" の部分です。</div> <br> </div> |
ブラウザー 表示例 |
---|
これが class="sample1" の部分です。
これが class="sample2" の部分です。
これが class="sample3" の部分です。
これが class="sample4" の部分です。
|