コーススケジュール

CSS 高級チュートリアル

• CSS 课外書
• CSS 入門
• CSS 基本文法
• CSS 高級文法
• CSS 派生選択子
• CSS id 選択子
• CSS クラス選択子
• CSS 設定
• CSS 背景設定
• CSS テキスト設定
• CSS フォント設定
• CSS リスト設定

CSS フレームモデル

• CSS フレームワークの概要
• CSS 内余白
• CSS 枠線
• CSS 外余白
• CSS 外余白の合計

CSS 定位

• CSS 定位の概要
• CSS 相対定位
• CSS 相对定位
• CSS 浮動

CSS セレクタ

• CSS 要素選択子
• CSS 選択子グループ
• CSS クラス選択子の詳細
• CSS ID 選択子の詳細
• CSS 属性選択子の詳細
• CSS 後代選択子
• CSS 子要素選択子
• CSS 相手兄弟選択子

選択科目

コース推薦：

• CodeW3C.com 百宝箱

要素の辺枠（border）は、要素の内容とインセットを囲む一つまたは複数の線です。

CSS border 属性は、要素の辺枠のスタイル、幅、色を指定できます。

CSS 枠線

HTML では、テーブルを使用してテキストの周囲に枠を作成しますが、CSS 枠属性を使用することで、効果的な枠を作成し、どんな要素にも適用できます。

要素の外側マージン内に要素の辺枠（border）があります。要素の辺枠は、要素の内容とインセットを囲む一つまたは複数の線です。

各枠には 3 つの面があります：幅、スタイル、そして色。以下では、これら 3 つの面について詳しく説明します。

枠と背景

CSS 指定では、枠は「要素の背景の上」に描かれます。これは重要です。なぜなら、一部の枠は「断続的な」（例えば、点線枠や虚線枠）であり、要素の背景は枠の見える部分の間に現れるべきだからです。

CSS2 では、背景はインセットにまで拡がるだけで、枠には拡がりません。しかし、CSS2.1 では以下のように修正されました：要素の背景は、内容、インセット、そして枠エリアの背景です。ほとんどのブラウザは CSS2.1 の定義に従っていますが、一部の古いブラウザでは異なる動作が見られます。

枠のスタイル

スタイルは、枠が最も重要な側面の一つです。これはスタイルが枠の表示を制御しているからではなく（もちろん、スタイルは枠の表示を制御しています）、スタイルがないと枠が全く存在しないからです。

CSSの border-style 属性非 inherit スタイルが 10 種定義されています。これは none を含みます。

例えば、画像の辺に outset を設定して「凸起ボタン」のように見せることもできます：

a:link img {border-style: outset;}

多様なスタイルの定義

一つの辺に複数のスタイルを定義できます。例えば：

p.aside {border-style: solid dotted dashed double;}

以下のルールは、クラス名が aside の段落に 4 種の枠スタイルを定義しています：実線上辺枠、点線右辺枠、虚线下辺枠、そして二重線左辺枠。

ここでの値は top-right-bottom-left の順序で使用されていることが分かりました。複数の値で異なるインセットを設定する場合のこの順序も見てきました。

単一辺スタイルの定義

要素の枠に特定の辺の枠スタイルを設定したい場合、すべての 4 枚の辺の枠スタイルを設定するのではなく、以下の単一辺枠スタイル属性を使用できます：

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

したがって、これら2つの方法は等価です：

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

注意：二番目の方法を使用する場合、単辺属性を簡略化属性の後に配置する必要があります。なぜなら、単辺属性をborder-styleの前に配置すると、簡略化属性の値が単辺値noneをオーバーライドするからです。

枠線の幅

あなたは、以下のように使用できます： border-width属性枠線の幅を指定します。

枠線の幅を指定するには、次の2つの方法があります：長さ値（例えば2pxや0.1em）を指定するか、thin、medium（デフォルト値）およびthickのいずれかのキーワードを使用します。

注記：CSSでは、thin、medium、thickの3つのキーワードの具体的な幅は定義されていません。したがって、ユーザーエージェントによっては、thin、medium（デフォルト値）およびthickをそれぞれ5px、3px、2pxに設定する場合がありますが、別のユーザーエージェントではそれぞれ3px、2px、1pxに設定されることがあります。

したがって、枠線の幅を以下のように設定できます：

p {border-style: solid; border-width: 5px;}

または：

p {border-style: solid; border-width: thick;}

単辺幅の定義

あなたは、top-right-bottom-leftの順序で要素の各辺の枠線を設定できます：

p {border-style: solid; border-width: 15px 5px 15px 5px;}

上記の例は、以下のように簡略化できます（この書き方を簡略化と呼びます）：値コピー）：

p {border-style: solid; border-width: 15px 5px;}

また、以下の属性を使用して、枠線の各辺の幅を個別に設定できます：

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

したがって、以下のルールは上記の例と等価です：

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

枠線なし

前の例では、あなたが見たように、ある種の枠線を表示するには、枠線のスタイルを設定する必要があります。例えば、solidやoutsetなどです。

それでは、border-styleをnoneに設定するとどうなるかを考えてみましょう：

p {border-style: none; border-width: 50px;}

枠線の幅が50pxでも、枠線スタイルがnoneに設定されています。この場合、枠線のスタイルだけでなく、幅も0に設定され、枠線が消えます。なぜそうなるのでしょうか？

これは、枠線スタイルがnoneの場合、枠線自体が存在しないため、枠線には幅がなく、その結果、幅は自動的に0に設定されるためです。元の定義に関わらずです。

これは非常に重要なポイントです。実際、枠線スタイルを宣言することを忘れるのはよくある間違いです。以下のルールに従うと、すべてのh1要素には枠線がなく、20ピクセルの幅はないことになります：

h1 {border-width: 20px;}

border-styleのデフォルト値はnoneであるため、スタイルが宣言されていない場合、border-style: noneと同じになります。したがって、枠線が表示されるようにするには、枠線スタイルを宣言する必要があります。

枠線の色

枠線色の設定は非常に簡単です。CSSはシンプルな border-color属性、一度に最大4つの色値を受け入れます。

どんな種類の色値でも使用できます。例えば、命名色や16進数、RGB値などが使用できます：

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

色値が4個以下の場合、値のコピーが効果があります。以下のルール宣言では、段落の上下枠線が青、左右枠線が赤に指定されています：

p {
  border-style: solid;
  border-color: blue red;
  }

注記：デフォルトの枠線色は、要素の前景色です。枠線に色が宣言されていない場合、要素のテキスト色と同じになります。また、要素にテキストが一切ない場合（例えば、画像だけを含むテーブルの場合）、そのテーブルの枠線色は親要素のテキスト色になります（colorは継承されるため）。この親要素は、body、div、または別のtableである可能性があります。

単側の色を定義

また、単側の枠線色属性もあります。これらの原理は、単側のスタイルと幅属性と同じです：

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

h1要素に実線の黒い枠線を指定し、右枠線は実線の赤色に指定するには、以下のように指定できます：

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

透明な枠線

私たちは先ほど説明しましたが、枠線にスタイルがなければ、幅はありません。しかし、不可視な枠線を作成したい場合もあります。

CSS2は、透明な色値transparentを導入しました。この値は、幅がある見えない枠線を作成するために使用されます。以下の例をご覧ください：

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

上記のリンクに以下のスタイルを定義しています：

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

実際に試してみてください

ある意味では、transparentを使用することで、辺框は追加のインラインパディングのように使用できます。さらに、必要な時に見えるようにする利点もあります。この透明辺框はインラインパディングに相当し、要素の背景が辺框エリアに延びます（見える背景がある場合）。

重要事項：IE7以前のIE/WINでは、transparentに対するサポートが提供されていません。以前のバージョンでは、IEは要素のcolor値に基づいて辺框の色を設定していました。

CSS 枠線属性

ツールボックス

CSS 参考マニュアル

CSS 実例

CSS 試験

CSS 教程

スポンサーリンク