From 696a7d3e623607839d3849f27ee6476a069e39aa Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 29 Dec 2021 23:42:03 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/column-span/index.md | 120 +++++++++++++++------------------- 1 file changed, 53 insertions(+), 67 deletions(-) (limited to 'files/ja/web/css/column-span') diff --git a/files/ja/web/css/column-span/index.md b/files/ja/web/css/column-span/index.md index 1fd646cc09..1378dc487f 100644 --- a/files/ja/web/css/column-span/index.md +++ b/files/ja/web/css/column-span/index.md @@ -3,113 +3,99 @@ title: column-span slug: Web/CSS/column-span tags: - CSS - - CSS Multi-column Layout - - CSS Property - - Reference - - 'recipe:css-property' + - CSS 段組みレイアウト + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.column-span translation_of: Web/CSS/column-span --- -
{{CSSRef}}
+{{CSSRef}} -

column-span は CSS のプロパティで、値に all を設定した場合、段組みレイアウトで要素をすべての段にまたがらせることができます。

+**`column-span`** は [CSS](/ja/docs/Web/CSS) のプロパティで、値に `all` を設定した場合、段組みレイアウトで要素をすべての段にまたがらせることができます。 -
{{EmbedInteractiveExample("pages/css/column-span.html")}}
+{{EmbedInteractiveExample("pages/css/column-span.html")}} -
/* キーワード値 */
+```css
+/* キーワード値 */
 column-span: none;
 column-span: all;
 
 /* グローバル値 */
 column-span: inherit;
 column-span: initial;
+column-span: revert;
 column-span: unset;
-
+``` -

複数の段にまたがる要素は、スパニング要素 (spanning element) と呼びます。

+複数の段にまたがる要素は**段抜き要素** (spanning element) と呼びます。 -

構文

+## 構文 -

column-span プロパティは以下に挙げたキーワード値のうちの一つで指定します。

+`column-span` プロパティは以下に挙げたキーワード値のうちの一つで指定します。 -

値

+### 値 -
-
none
-
この要素は複数の段にまたがりません。
-
all
-
この要素がすべての段にまたがります。この要素よりも前に現れた通常フローのコンテンツは、自動的にすべての段で均等になります。この要素は新しいブロック整形コンテキストを生成します。
-
+- `none` + - : この要素は複数の段にまたがりません。 +- `all` + - : この要素がすべての段にまたがります。この要素よりも前に現れた通常フローのコンテンツは、自動的にすべての段で均等になります。この要素は新しいブロック整形コンテキストを生成します。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

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

例

+## 例 -

段をまたぐ見出しの設定

+### 段抜きの見出しの設定 -

この例では、見出しが記事のすべての段にまたがって作成されます。

+この例では、見出しが記事のすべての段にまたがって作成されます。 -

HTML

+#### HTML -
<article>
-  <h2>Header spanning all of the columns</h2>
-  <p>
+```html
+

+  
Header spanning all of the columns

+  

      The h2 should span all the columns. The rest
      of the text should be distributed among the columns.
-  </p>
-  <p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p>
-  <p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p>
-  <p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p>
-  <p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p>
-</article>
-
- -

CSS

- -
article {
+  

+  
This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.

+  
This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.

+  
This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.

+  
This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.

+
+```
+
+#### CSS
+
+```css
+article {
   columns: 3;
 }
 
 h2 {
   column-span: all;
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample('Making_a_heading_span_columns', 'auto', 260)}}

+{{EmbedLiveSample('Making_a_heading_span_columns', 'auto', 260)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Multicol', '#column-span', 'column-span')}}{{Spec2('CSS3 Multicol')}}初回定義
+{{Specifications}} -

ブラウザーの互換性

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

{{Compat("css.properties.column-span")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- [インライン要素](/ja/docs/Web/HTML/Inline_elements) +- {{domxref("HTMLSpanElement")}} -- cgit v1.2.3-54-g00ecf