トップ > スキル : Web > CSSリファレンス

Web

各CSSのプロパティ詳細5

罫線関係

border-top-style、border-bottom-style、border-left-style、border-right-style、border-style、border-top-width、border-bottom-width、border-left-width、border-right-width、border-width、border-top-color、border-bottom-color、border-left-color、border-right-color、border-color、border-top、border-bottom、border-left、border-right、border

枠線の線種を指定する

border-top-style: 線種
border-bottom-style: 線種
border-left-style: 線種
border-right-style: 線種
border-style:上・右・下・左 線種

これらのプロパティは、枠線(ボーダー)の線種を指定します。個別であれば、border-top-style、border-bottom-style、border-left-style、border-right-styleの4つを使って各部分の種類を指定しますが、border-styleプロパティを利用すると上下左右の枠線の線種を一度にまとめて指定できます。

border-styleプロパティ

値の「none」と「hidden」はどちらとも枠線を表示せず、枠線の太さも「0」に設定します。ただし、テーブルのセルの枠線として重なり合った場合は「none(初期値)」は他の値を優先し、「hidden」は自分自身の値を優先します。

実線 solid
点線 dotted
破線 dashed
二重線 double
浮き出し ridgh
くぼみ groove
罫線で囲まれた部分が浮き出し outset
罫線で囲まれた部分がくぼむ inset
非表示 none、hidden

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	p { text-align:center;
                padding:0.5em;
                border:solid 5px #ff3300;}
        	.type1 { border-style:double;}
            .type2 { border-style:dotted;}
            .type3 { border-style:groove;}
    	</style>
    

HTML

    	<p class="type1">枠線は二重線</p>
    	<p class="type2">枠線は点線</p>
        <p class="type3">枠線は浮き出し</p>
    
罫線指定

枠線の太さを指定する

border-top-width:太さ
border-bottom-width:太さ
border-left-width:太さ
border-right-width:太さ
border-width: 上・右・下・左 太さ

これらのプロパティは、枠線の太さを指定します。個別であれば、border-top-width、border-bottom-width、border-left-width、border-right-widthの4つを使って各部分の太さを指定しますが、border-widthプロパティを利用すると上下左右の太さを一度にまとめて指定できます。

border-widthプロパティ

枠線の太さの値にキーワード(thin、mediumなど)を指定した場合は、ブラウザによって太さが異なります。

数値で指定 px
キーワード thick(太い)、medium(普通)、thin(細い)

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	p { text-align:center;
                padding:0.5em;
                border:solid 5px #ff3300;}
        	.type1 { border-width:1px;}
            .type2 { border-width:thick;}
            .type3 { border-width:thin;}
    	</style>
    

HTML

    	<p class="type1">枠線は1px</p>
    	<p class="type2">枠線は太い</p>
        <p class="type3">枠線は細い</p>
    
罫線太さ指定

枠線の色を指定する

border-top-color:色指定
border-bottom-color:色指定
border-left-color:色指定
border-right-color:色指定
border-color:色指定

これらのプロパティは、枠線の色を指定します。個別であれば、border-top-color、border-bottom-color、border-left-color、border-right-colorの4つを使って各部分の色を指定しますが、border-colorプロパティを利用すると上下左右の色を一度にまとめて指定できます。

border-colorプロパティ
カラーコードで指定 #000000~#FFFFFF または#000~#FFF
色名 red(赤)、blue(青)など

※ なお、この値の初期値は「color:色指定」で設定されている値となります。


■ サンプルコードと結果

CSS

    	<style type="text/css">
            p { text-align:center;
                padding:0.5em;
                border:solid 5px #000;}
        	.type1 { border-top-color:yellow;}
            .type2 { border-left-color:#fff;}
            .type3 { border-color:green blue red pink;}
    	</style>
    

HTML

    	<p class="type1">枠線の上は黄色</p>
        <p class="type2">枠線の左は白色</p>
        <p class="type3">上は緑、右は青、下は赤、左はピンク</p>
    
枠線色指定

枠線をまとめて指定する

border-top:枠線関連のプロパティの値
border-bottom:枠線関連のプロパティの値
border-left:枠線関連のプロパティの値
border-right:枠線関連のプロパティの値
border:枠線関連のプロパティの値

これらのプロパティは、枠線に関連したプロパティの値をまとめて指定します。記述順序は任意で、必要な値を半角スペースで区切って指定します。指定しなかった値は、初期値が指定されます。
個別であれば、border-top、border-bottom、border-left、border-rightの4つを使って各部分の枠線の表示方法を指定しますが、borderプロパティを利用すると上下左右の枠線に同じ値をまとめて指定できます。

罫線プロパティ

■ サンプルコードと結果

CSS

    	<style type="text/css">
            p { text-align:center;
                padding:0.5em;
                border:solid 1px #000;}
        	.type1 { border-top:2px double #ff00ff;}
            .type2 { border-left:solid 5px #cc3366;}
            .type3 { border:#33ee00 3px solid;}
    	</style>
    

HTML

    	<p class="type1">枠線の上だけ違う</p>
        <p class="type2">枠線の左だけ違う</p>
        <p class="type3">上下左右の枠線は同じ書式</p>
    
罫線をまとめて指定

【各CSSのプロパティ詳細5】