From 33fdcea3f3c7a085d4962e06e3270f91a974670c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 15 Nov 2021 01:17:27 +0900 Subject: CSS Borders 関係のプロパティの文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/13 時点の英語版に同期 --- files/ja/web/css/border-style/index.md | 352 ++++++++++++++------------------- 1 file changed, 151 insertions(+), 201 deletions(-) (limited to 'files/ja/web/css/border-style') diff --git a/files/ja/web/css/border-style/index.md b/files/ja/web/css/border-style/index.md index 71c2fba756..de1dc86b8c 100644 --- a/files/ja/web/css/border-style/index.md +++ b/files/ja/web/css/border-style/index.md @@ -3,26 +3,32 @@ title: border-style slug: Web/CSS/border-style tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference - - Web - - border - - border-style - - 一括指定プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.border-style translation_of: Web/CSS/border-style --- -
{{CSSRef}}
+{{CSSRef}} -

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

+ **`border-style`** は [一括指定](/ja/docs/Web/CSS/Shorthand_properties) の [CSS](/ja/docs/Web/CSS) プロパティで、要素の境界線の 4 辺すべての線のスタイルを設定します。 -
{{EmbedInteractiveExample("pages/css/border-style.html")}}
+{{EmbedInteractiveExample("pages/css/border-style.html")}} - +## 構成要素のプロパティ -

構文

+このプロパティは以下の CSS プロパティの一括指定です。 -
/* キーワード値 */
+- [`border-bottom-style`](/ja/docs/Web/CSS/border-bottom-style)
+- [`border-left-style`](/ja/docs/Web/CSS/border-left-style)
+- [`border-right-style`](/ja/docs/Web/CSS/border-right-style)
+- [`border-top-style`](/ja/docs/Web/CSS/border-top-style)
+
+## 構文
+
+```css
+/* キーワード値 */
 border-style: none;
 border-style: hidden;
 border-style: dotted;
@@ -46,199 +52,143 @@ border-style: none solid dotted dashed;
 /* グローバル値 */
 border-style: inherit;
 border-style: initial;
+border-style: revert;
 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 のようにふるまいます。

-
-
-
- -

形式文法

+``` + +`border-style` プロパティは 1 つ、 2 つ、 3 つ、 4 つの値を使って指定することができます。 + + - 値が **1 つ**指定された場合、**全 4 辺**に同じスタイルが適用される。 + - 値が **2 つ**指定された場合、1 つ目のスタイルは**上下**、2 つ目は**左右**の辺に適用される。 + - 値が **3 つ**指定された場合、1 つ目のスタイルは**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。 + - 値が **4 つ**指定された場合、スタイルはそれぞれ**上**、**右**、**下**、**左**の順（時計回り）に適用される。 + +それぞれの値は以下の一覧にあるキーワードです。 + +### 値 + +- `` + + - : 境界のスタイルを記述します。以下の値を使用することができます。 + + - `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` のようにふるまいます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{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;
+## 例
+
+
プロパティのすべての値

+
+プロパティのすべての値のサンプルです。
+
+#### HTML
+
+```html
+
none

+
hidden

+
dotted

+
dashed

+
solid

+
double

+
groove

+
ridge

+
inset

+
outset

+```
+
+#### CSS
+
+```css
+pre {
+  height: 80px;
+  width: 120px;
+  margin: 20px;
+  padding: 20px;
+  display: inline-block;
+  background-color: palegreen;
+  border-width: 5px;
+  box-sizing: border-box;
 }
 
 /* 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")}}

- -

関連情報

- - +.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('All_property_values', "1200", 450)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + + - 境界に関する CSS 一括指定プロパティ: {{Cssxref("border")}}, {{Cssxref("border-width")}}, {{Cssxref("border-color")}}, {{Cssxref("border-radius")}} -- cgit v1.2.3-54-g00ecf