|
トップページ > スタイルシートリファレンス > border-width
★スタイルシートリファレンス
|
border-width･････ボーダーの太さを指定する
       
   
    
   
     
border-widthプロパティは、上下左右のボーダーの太さをまとめて指定する際に使用します。 上下左右を異なった太さにしたい場合には、スペースで区切って複数の値を指定します。
尚、ボーダーは太さや色だけを指定しても表示されないので注意してください。 これは、border-styleプロパティの初期値がnoneとなっているためです。 ボーダーを表示させるには、太さや色だけでなく種類も同時に指定してやる必要があります。 ■ボーダー太さの値
■使用例スタイルシート部分は外部ファイル（sample.css）に記述。p.sample1 {border-style: solid; border-width: 1px;}p.sample2 {border-style: solid; border-width: 1em;} p.sample3 {border-style: solid; border-width: 1ex;} p.sample4 {border-style: solid; border-width: thin;} p.sample5 {border-style: solid; border-width: medium;} p.sample6 {border-style: solid; border-width: thick;} p.sample7 {border-style: solid; border-width: 5px 10px;} p.sample8 {border-style: solid; border-width: 5px 10px 15px;} p.sample9 {border-style: solid; border-width: 5px 10px 15px 20px;} HTMLソース<html><head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <p class="sample1">1px</p> <p class="sample2">1em</p> <p class="sample3">1ex</p> <p class="sample4">thin</p> <p class="sample5">medium</p> <p class="sample6">thick</p> <p class="sample7">上下5px、左右10px</p> <p class="sample8">上5px、左右10px、下15px</p> <p class="sample9">上5px、右10px、下15px、左20px</p> </body> </html> ↓↓↓ ブラウザ上の表示1px 1em 1ex thin medium thick 上下5px、左右10px 上5px、左右10px、下15px 上5px、右10px、下15px、左20px ■関連項目
border･･･････････････････････ボーダーのスタイル・太さ・色を指定する
border-color･････････････････ボーダーの色を指定する border-style･････････････････ボーダーのスタイルを指定する border-width････････････････ボーダーの太さを指定する border-top･･････････････････上ボーダーのスタイル・太さ・色を指定する border-top-color････････････上ボーダーの色を指定する border-top-style････････････上ボーダーのスタイルを指定する border-top-width････････････上ボーダーの太さを指定する border-bottom･･･････････････下ボーダーのスタイル・太さ・色を指定する border-bottom-color･････････下ボーダーの色を指定する border-bottom-style･････････下ボーダーのスタイルを指定する border-bottom-width･････････下ボーダーの太さを指定する border-left･･････････････････左ボーダーのスタイル・太さ・色を指定する border-left-color･････････････左ボーダーの色を指定する border-left-style･････････････左ボーダーのスタイルを指定する border-left-width････････････左ボーダーの太さを指定する border-right･････････････････右ボーダーのスタイル・太さ・色を指定する border-right-color･･･････････右ボーダーの色を指定する border-right-style･･･････････右ボーダーのスタイルを指定する border-right-width･･･････････右ボーダーの太さを指定する |
トップページ > スタイルシートリファレンス > border-width
|
©2012 HTMQ