From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/border-style/index.html | 246 +++++++++++++++++++++++++++++++ 1 file changed, 246 insertions(+) create mode 100644 files/ja/web/css/border-style/index.html (limited to 'files/ja/web/css/border-style') diff --git a/files/ja/web/css/border-style/index.html b/files/ja/web/css/border-style/index.html new file mode 100644 index 0000000000..1dd8bcc7a4 --- /dev/null +++ b/files/ja/web/css/border-style/index.html @@ -0,0 +1,246 @@ +--- +title: border-style +slug: Web/CSS/border-style +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - Web + - border + - border-style + - 一括指定プロパティ +translation_of: Web/CSS/border-style +--- +
{{CSSRef}}
+ +

border-style は 一括指定 の CSS プロパティで、要素の境界線の4辺すべての線のスタイルを設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-style.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+border-style: none;
+border-style: hidden;
+border-style: dotted;
+border-style: dashed;
+border-style: solid;
+border-style: double;
+border-style: groove;
+border-style: ridge;
+border-style: inset;
+border-style: outset;
+
+/* 上下 | 左右 */
+border-style: dotted solid;
+
+/* 上 | 左右 | 下 */
+border-style: hidden double dashed;
+
+/* 上 | 右 | 下 | 左 */
+border-style: none solid dotted dashed;
+
+/* グローバル値 */
+border-style: inherit;
+border-style: initial;
+border-style: unset;
+
+ +

border-style プロパティは1つ、2つ、3つ、4つの値を使って指定することができます。

+ + + +

それぞれの値は以下の一覧にあるキーワードです。

+ +

値

+ +
+
<line-style>
+
枠線のスタイルを表すキーワード。以下の値を使用できます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
none +
要素
+ 		hidden キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は 0 になります。テーブルのセルで境界線が collasped 形式である場合は、 none 値はもっとも低い優先度になります。ほかに競合する境界線が設定されている場合も、そちらが表示されます。
hidden +
要素
+ 		none キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は 0 になります。テーブルのセルで境界線が collasped 形式である場合は、 hidden 値はもっとも高い優先度になります。ほかに競合する境界線が設定されている場合も、非表示になります。
dotted +
要素
+ 		連続した丸い点を表示します。点の間の空白の量は仕様書で定義されておらず、実装依存です。点の半径は、同じ辺の {{cssxref("border-width")}} の計算値の半分です。
dashed +
要素
+ 		短く角が四角い連続したダッシュや線分を表示します。線分の実寸や長さは仕様書で定義されておらず、実装依存です。
solid +
要素
+ 		1本の直線、実線を表示します。
double +
要素
+ 		2本の直線を表示し、幅の合計は {{cssxref("border-width")}} で定義したピクセル数になります。
groove +
要素
+ 		凹んだように見える境界線を表示します。 ridge の逆です。
ridge +
要素
+ 		出っ張ったように見える境界線を表示します。 groove の逆です。
inset +
要素
+ 		要素が埋め込まれて見える境界線を表示します。 outset の逆です。 {{cssxref("border-collapse")}} が collapsed に設定されたテーブルのセルに適用すると、この値は groove のようにふるまいます。
outset +
要素
+ 		+

要素が出っ張って見える境界線を表示します。 inset の逆です。 {{cssxref("border-collapse")}} を collapsed に設定したテーブルセルに適用すると、この値は ridge のようにふるまいます。

+
+
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

プロパティのすべての値を指定したテーブル

+ +

プロパティのすべての値のサンプルです。

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* テーブルの外見を定義 */
+table {
+  border-width: 3px;
+  background-color: #52E396;
+}
+tr, td {
+  padding: 2px;
+}
+
+/* border-style の例示用クラス */
+.b1 {border-style:none;}
+.b2 {border-style:hidden;}
+.b3 {border-style:dotted;}
+.b4 {border-style:dashed;}
+.b5 {border-style:solid;}
+.b6 {border-style:double;}
+.b7 {border-style:groove;}
+.b8 {border-style:ridge;}
+.b9 {border-style:inset;}
+.b10 {border-style:outset;}
+ +

結果

+ +

{{EmbedLiveSample('Table_with_all_property_values', 300, 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#border-style', 'border-style')}}{{Spec2('CSS3 Backgrounds')}}変更なし。
{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}{{Spec2('CSS2.1')}}hidden キーワードを追加。
{{SpecName('CSS1', '#border-style', 'border-style')}}{{Spec2('CSS1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-style")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf