無料ホームページ作成!CSS・スタイルシート
枠線の一括指定

無料ホームページ作成!CSS・ボックス
枠線の一括指定

ホームページのボックスの枠線の一括指定

border属性

このborder属性はボックスの枠線のスタイル、枠線の色、枠線の太さを一括で指定できる属性です、色や太さは宣言しなくてもいいのですが、スタイルの初期値が表示しないになっているため、スタイルの宣言は絶対にしましょう。
値に宣言する順番は特にありません。
使い方は

  • border:solid;(上下左右を1本の線)
  • border:solid #000000;(上下左右を1本の線、黒)
  • border:solid 5px;(上下左右を1本の線、5pxの太さ)
  • border:solid #000000 5px;(上下左右を1本の線、黒、5pxの太さ)
  • border-top:solid #000000 5px;(上を1本の線、黒、5pxの太さ)
  • border-right:solid #000000 5px;(右を1本の線、黒、5pxの太さ)
  • border-bottom:solid #000000 5px;(下を1本の線、黒、5pxの太さ)
  • border-left:solid #000000 5px;(左を1本の線、黒、5pxの太さ)

などの使い分けができます。

border属性の使い方

CSSソース

セレクタ{
	border:solid #ff0000 5px;
}
 
結果

1本の線、赤、5pxの太さです。

border属性で宣言できる値

概要
#RGB #000000等の16進数で2桁ずつ宣言し、細かく設定できる
#RRGGBB #000000等の16進数で1桁ずつ宣言し、設定できる
rgb(R,G,B) 色を10進数で指定する
rgb(R%,G%,B%) 色を%で指定する
red 色名で指定する、この場合は枠線を赤色にする
transparent※1 枠線の透明にする
スタイル
概要
none 表示しない(初期値)
solid 1本の線で表示
double 2本の線で表示
groove 枠がへこんでるように表示
ridge 枠が飛び出しているように表示
inset へこんでいるように表示
outset 飛び出しているように表示
dashed※2 破線で表示
dotted※2 点線で表示
太さ
概要
px ピクセルで太さを設定する
thin 細い線を指定する
medium 中ぐらいの線を指定する
thick 太い線を指定する

※1:IEで対応していない場合があります。
※2:IEに対応していないバージョンがあり、NNは対応していません。

値の使用例

他のborder-color属性などよりも使用頻度が高く設定しやすいため枠線の設定をしたいときの基本はこのborder属性となるでしょう。

無料ホームページ作成!メニュー

CSS・スタイルシート

基本

文字

余白

背景

ボックス

配置

リスト

リンクについてお問い合わせ
無料ホームページ作成!HTML&CSS