スタイルシートの道具箱
当サイトについて リンク集
基礎編1
基礎編2
色リファレンス
小技集		 テキスト
フォント
背景		 配置
ボーダー
ボックス		 リスト
テーブル
フィルタ
その他
　初心者による初心者の為のスタイルシート・リファレンス！ 基礎から応用までの解説とサンプルを是非あなたのホームページ作りに生かして下さい！
■ボーダー トップページ
ボーダー：目次
マージン
パディング
内容領域
文章等はここに表示されます
↓これがボーダー

　
　
　
隣の要素




■枠線の色

▲ページTOPへ

border-top-color:●

border-right-color:●

border-bottom-color:●

border-left-color:●

border-color:●　●　●　●

ボーダー（枠線）の色を指定するプロパティです。指定しない場合通常は黒が使われます。
topは上、rightは右、bottomは下、leftは左の枠線です。
●には色を指定する値を入れます。設定値は以下の通り。詳細は色リファレンスを参考に。
  • RGB値
  • 色のキーワード
  • transparent
辺を指定せずにborder-colorだけで指定する場合は以下のルールに従います。

■一括設定の方法
borderのcolor,width,styleはtop, right, bottom, leftを個別に設定しなくても４辺を一括で指定する事が出来ます。この場合は以下の様な規則が使われます。同じ設定の辺がある場合はこのルールを使って無駄な記述を省くようにしましょう。
※border-colorの場合
border-color:●：上下左右一括。全て同じ設定の場合
border-color:●　●：　「上下」と「左右」
border-color:●　●　●：　「上」「左右」「下」
border-color:●　●　●　●：　「上」「右」「下」「左」（時計回り）


サンプル

※表示はwidth=5px, style=solidで統一

border-color:blue;

border-color:#009900 #00CC00 #00FF00;

border-color:red green yellow pink;

border-color:#d0d0d0 #606060 #606060 #d0d0d0
右・下を暗く、左・上を明るく設定すれば立体的に見えます。

border-color:#d0d0d0 #606060 #606060 #d0d0d0
逆に右・下を明るく、左・上を暗く設定すればへこんで見えます。

■枠線の幅

▲ページTOPへ

border-top-width:●

border-right-width:●

border-bottom-width:●

border-left-width:●

border-width:●　●　●　●

ボーダー（枠線）の幅を指定するプロパティです。
言うまでもありませんがtopは上、rightは右、bottomは下、leftは左の枠線です。
border-width:を使う場合は一括設定の方法を参照のこと。

●には太さを指定する値を入れます。設定値は以下の通り。
  • 数値＋単位
  • thin
  • medium
  • thick
 長さの単位で示している単位に基づきます。
細く
中間の太さ（初期値）
太く

サンプル

※表示はcolor=green/blue, style=solid

border-width:thin;

border-width:medium;

border-width:thick;

border-width:1px;

border-width:5px;

border-width:10px;

border-width:1px 50px;

border-width:10px 1px;

border-width:20px 1px 1px 30px;

border-width:0px 10px 1px;

border-width:0px 0px 1px 15px;

border-width:2px 0px 2px;

■枠線のスタイル

▲ページTOPへ

border-top-style:●

border-right-style:●

border-bottom-style:●

border-left-style:●

border-style:●　●　●　●

枠線の種類を指定します。予め用意されている約８種類の中からスタイルを選びます。
以下にその種類を列挙しますが、サンプルを見てもらった方がわかりやすいです。
border-style:を使う場合は一括設定の方法を参照のこと。

  • none
  • hidden
  • solid
  • double
  • dotted
  • dashed
  • groove
  • ridge
  • inset
  • outset
 枠線無し
枠線を表示しない
実線
二重線
点線
破線
溝線（線がへこんで見える）
隆起線（線がふくらんで見える）
線の内側がへこんで見える効果
線の内側がふくらんで見える効果

サンプル


平面効果４種類
※色は#cc9900の場合
solid
実線
solid:1px
solid:3px
solid:6px
solid:10px
最も一般的でシンプルな枠線です。
double
二重線
double:1px
double:3px
double:6px
double:10px
枠線が二重になります。二つの線の間には空白が入ります。従って枠線の太さは3で割り切れる数字が好ましい。
dotted
点線
dotted:1px
dotted:3px
dotted:6px
dotted:10px
太さが1pxだと小さすぎて破線と見た目が変わりません。最低2px以上推奨。
dashed
破線
dashed:1px
dashed:3px
dashed:6px
dashed:10px
点線もそうですが要素の縦の長さが短いと横の線が表示されません。

立体効果４種類（２で割り切れる太さが好ましい）
※色は#ddddddの場合
groove
へこみ
groove:1px
groove:2px
groove:4px
groove:8px
枠線自体がへこんで見えます。あまり太いと効果がありません。
ridge
溝
ridge:1px
ridge:2px
ridge:4px
ridge:8px
枠線自体が溝のように膨らんで見えます。
inset
要素のへこみ
inset:1px
inset:2px
inset:4px
inset:8px
要素の部分が周りよりへこんで見えます。太いと効果が低い。
outset
要素の隆起
outset:1px
outset:2px
outset:4px
outset:8px
要素の部分が周りより隆起して見えます。太いと効果が低い。。

応用例
border-style:solid double solid

border-style:dotted solid dotted

border-style:dashed double dashed

border-style:inset;
border-width:3px;
background-color:#e0e0e0

border-style:outset;
border-width:3px;
background-color:#fcfcfc;

border-style:ridge;
border-color:#FFFF00;
border-width:3px;
background-color:#FFFF99;

■枠線の一括設定

▲ページTOPへ

border-top:●　●　●

border-right:●　●　●

border-bottom:●　●　●

border-left:●　●　●

border:●　●　●

枠線の「色」「太さ」「スタイル」を一括で設定します。
「border-top」「border-right」「border-bottom」「border-left」は各辺ごと個別の設定で
「border」の場合は4辺に同じ設定が適用されます。

●にはcolor, width, styleの値をそれぞれ指定しますが順番は関係ありません。
また省略した値は初期値が適用されます。
それぞれの初期値はcolor=#000000（黒）, width=medium, type=noneなので、
少なくともtypeは指定しないとボーダーが現れません。

サンプル


border-bottom:double 3px red

border-bottom:ridge 5px #ffeeff

border-bottom:dotted 3px #cc3300;border-top:dotted 3px #cc3300

border:dashed 3px blue

border:outset 4px #99cc00

border:inset ※省略した場合widthはmedium、colorは黒になります

この様に文章の中で一部分にポイントを作りたい時などもspanタグ等と合わせて効果的に使う事も出来ます。
この様に文章の中で一部分に
<span style="border:dotted 1px ff9999;background-color:#ffffcc">ポイント</span>
を作りたい時などもspanタグ等と合わせて
<span style="border-bottom:red double 3px">効果的に</span>
使う事も出来ます。


スタイル設定無し

<img src="sample.jpg" style="border:1px solid black">

<img src="sample.jpg" style="border:4px ridge #ff33ff">


この様に３辺だけ一括設定したい場合は、一度4辺を全て設定しその後boder-right:none等で一辺だけ取り消す方法が楽です。noneや0（太さが0=ボーダー無し）を後で設定し、前の設定を上書きするという事ですから順番が重要です。お間違いの無いように。
<div style="border:groove pink 4px;border-right:0">...</div>



以下のサンプルのように、「４辺一括設定」⇒「色だけ別に設定」とする事で
わずか二つのボーダー設定だけでこの様な枠を描けます。
一括設定を利用したボタン効果
<div style="
background-color:#99ccff;
border:solid 5px;
border-color:#ccffff #9999ff #9999ff #ccffff">

一括設定を利用したへこみ効果
<div style="
background-color:#99ccff;
border:solid 5px;
border-color:#9999ff #ccffff #ccffff #9999ff">
▲ページTOPへ