CSSパーツテンプレート

このサイトは、「初心者でも使えるCSSパーツテンプレート」を配布しています

テンプレート サイズ カラー 文字の設定 背景の設定 枠線の設定
 

  線に関するスタイル

border-color

線の色を指定する

使用例

div { border-color: #000000; }

値はRGB値か、キーワードもしくはtransparent(透明)を使用します
transparent は枠線の幅は確保されたまま透明で表示され、背景色が見えます。

border-style

線のスタイルを指定する

使用例

div { border-style: solid; }   div { border-style: double; }

指定がない場合はnoneで適用されます。

スタイルの種類
none 枠線を表示しません
solid 実線
double 二重線
dotted 点線
dashed 破線

border-width

線の太さを指定する

使用例

div { border-width: 1px; }

使用例のように数値+単位以外にもキーワードで指定が出来ます。指定がない場合はmediumで適用されます。

キーワードで枠線の幅を指定する場合
thin 細い線
medium 通常の線
thick 太い線
 

いろいろな枠線の指定方法

 
border-color :#0000ff; 上下左右の線色を指定
border-color :#0000ff #000000; 順に上下と左右の線色を指定
border-color :#0000ff #000000 #ff0000 #00ff00; 順に上右下左の線色を指定
border-top-color :#0000ff; 上の線色を指定
border-right-color :#0000ff; 右の線色を指定
border-bottom-color :#0000ff; 下の線色を指定
border-left-color :#0000ff; 左の線色を指定

border-style :solid; 上下左右の線種を指定
border-style :solid dotted; 順に上下と左右の線種を指定
border-style :solid dotted dashed none; 順に上右下左の線種を指定
border-top-style :solid; 上の線種を指定
border-right-style :solid; 右の線種を指定
border-bottom-style :solid; 下の線種を指定
border-left-style :solid; 左の線種を指定

border-width :1px; 上下左右の線の太さを指定
border-width :1px 2px; 順に上下と左右の線の太さを指定
border-width :1px 2px 3px 4px; 順に上右下左の線の太さを指定
border-top-width :1px; 上の線の太さを指定
border-right-width :1px; 右の線の太さを指定
border-bottom-width :1px; 下の線の太さを指定
border-left-width :1px; 左の線の太さを指定
 

まとめて線のスタイルを指定する

 

基本的には以下のような書き方をすれば下のように表示されます。

div { border: 1px solid #ff0000; }

サンプル


Copyright © 2009 CSSパーツテンプレート All rights reserved.