From c2d1b8b56c5a9f45f5ea9f5471c87d1b904f9087 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 30 Oct 2021 00:25:17 +0900 Subject: CSS Table 関係の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/28 時点の英語版に同期 --- files/ja/web/css/border-spacing/index.md | 127 +++++++++++++------------------ 1 file changed, 55 insertions(+), 72 deletions(-) (limited to 'files/ja/web/css/border-spacing') diff --git a/files/ja/web/css/border-spacing/index.md b/files/ja/web/css/border-spacing/index.md index a7eb1e8afe..27da3fb4f2 100644 --- a/files/ja/web/css/border-spacing/index.md +++ b/files/ja/web/css/border-spacing/index.md @@ -3,81 +3,83 @@ title: border-spacing slug: Web/CSS/border-spacing tags: - CSS - - CSS テーブル - CSS プロパティ - CSS 表 - - Reference - リファレンス + - recipe:css-property +browser-compat: css.properties.border-spacing translation_of: Web/CSS/border-spacing --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の border-spacing プロパティは、 {{htmlelement("table")}} における隣り合うセルの枠線同士の間隔を定めます。このプロパティは {{cssxref("border-collapse")}} が separate のときのみ適用されます。

+**`border-spacing`** は [CSS](/ja/docs/Web/CSS) のプロパティで、{{htmlelement("table")}} における隣り合うセルの境界同士の間隔を定めます。このプロパティは {{cssxref("border-collapse")}} が `separate` のときのみ適用されます。 -
{{EmbedInteractiveExample("pages/css/border-spacing.html")}}
+{{EmbedInteractiveExample("pages/css/border-spacing.html")}} - +`border-spacing` の値は、表の外周部分にも使用され、表の境界線と最初/最後の列または行との間の距離は、 (縦または横の) 対応する `border-spacing` と、表の対応する側 (上下左右のいずれか) の {{cssxref("padding")}} の合計になります。 -

border-spacing の値は、表の外周部分にも使用され、表の境界線と最初/最後の列または行との間の距離は、 (縦または横の) 対応する border-spacing と、表の対応する側 (上下左右のいずれか) の {{cssxref("padding")}} の合計になります。

+> **Note:** `border-spacing` プロパティは、`` 要素における非推奨の `cellspacing` 属性と同等ですが、任意で 2 つ目の値を指定して、水平方向と垂直方向に異なる間隔を設定することができる点が異なります。 -
-

メモ: border-spacing プロパティは、 <table> 要素の非推奨になった cellspacing 属性と同等ですが、任意で2つ目の値を指定して、左右方向と上下方向に異なる間隔を設定することができる点が異なります。

-
+## 構文 -

構文

- -
/* <length> */
+```css
+/*  */
 border-spacing: 2px;
 
-/* 左右の <length> | 上下の <length> */
+/* 左右の  | 上下の  */
 border-spacing: 1cm 2em;
 
 /* グローバル値 */
 border-spacing: inherit;
 border-spacing: initial;
+border-spacing: revert;
 border-spacing: unset;
-
+``` + +`border-spacing` プロパティは 1 つまたは 2 つの値で指定することができます。 + +- **1 つ**の `` 値が指定された場合は、セル間の左右方向と上下方向の両方の間隔を定義します。 +- **2 つ**の `` 値が指定された場合は、最初の値がセル間の左右方向の間隔 (つまり、隣り合う*列*の間隔) を定義し、2 番目の値がセル間の上下方向の間隔 (つまり、隣り合う*行*の間隔) を定義します。 -

border-spacing プロパティは1つまたは2つの値で指定することができます。

+### 値 -
    -
  • <length> 値が1つ指定された場合は、セル間の左右方向と上下方向の両方の間隔を定義します。
    • -
  • <length> 値が2つ指定された場合は、最初の値がセル間の左右方向の間隔 (つまり、隣り合う列の間隔) を定義し、2番目の値がセル間の上下方向の間隔 (つまり、隣り合う行の間隔) を定義します。
    • -
+- {{cssxref("<length>")}} + - : 固定値による間隔の大きさです。 -

値

+## 公式定義 -
-
{{cssxref("<length>")}}
-
固定値による間隔の大きさです。
-
+{{CSSInfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

この例では表のセル間において、垂直方向に .5em、水平方向に 1em の間隔を適用します。なお、外の辺においては、表の padding の値が border-spacing の値に追加されます。

+

表のセルの余白とパディング

-

HTML

+この例では表のセル間において、垂直方向に `.5em`、水平方向に `1em` の間隔を適用します。なお、外の辺においては、表の `padding` の値が `border-spacing` の値に追加されます。 -
<table>
-  <tr>
-    <td>1</td><td>2</td><td>3</td>
-  </tr>
-  <tr>
-    <td>4</td><td>5</td><td>6</td>
-  </tr>
-  <tr>
-    <td>7</td><td>8</td><td>9</td>
-  </tr>
-</table>
-
+#### HTML -

CSS

+```html +
+ + + + + + + + + +
123
456
789
+``` + +#### CSS -
table {
+```css
+table {
   border-spacing: 1em .5em;
   padding: 0 2em 1em 0;
   border: 1px solid orange;
@@ -90,40 +92,21 @@ td {
   text-align: center;
   vertical-align: middle;
 }
-
+``` -

結果

+#### 結果 -

{{ EmbedLiveSample('Example', 400, 200) }}

+{{ EmbedLiveSample('Spacing_and_padding_table_cells', 400, 200) }} -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing') }}{{ Spec2('CSS2.1') }}初回定義
+## 仕様書 -

{{cssinfo}}

+{{Specifications}} -

ブラウザーの対応

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- {{cssxref("border-collapse")}}, {{cssxref("border-style")}} +- `border-spacing` プロパティは HTML の {{htmlelement("table")}} 要素の出現方法を変更します。 -- cgit v1.2.3-54-g00ecf