From 8c509c815fd59af2d2ed09eda7169a9f11333f7b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 30 Nov 2021 01:04:30 +0900 Subject: CSS グリッドレイアウトのリファレンスの変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/grid-column/index.html | 189 -------------------------------- files/ja/web/css/grid-column/index.md | 189 ++++++++++++++++++++++++++++++++ 2 files changed, 189 insertions(+), 189 deletions(-) delete mode 100644 files/ja/web/css/grid-column/index.html create mode 100644 files/ja/web/css/grid-column/index.md (limited to 'files/ja/web/css/grid-column') diff --git a/files/ja/web/css/grid-column/index.html b/files/ja/web/css/grid-column/index.html deleted file mode 100644 index 3a6f29ac1d..0000000000 --- a/files/ja/web/css/grid-column/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: grid-column -slug: Web/CSS/grid-column -tags: - - CSS - - CSS グリッド - - CSS プロパティ - - Reference -translation_of: Web/CSS/grid-column ---- -

grid-column は CSS のプロパティで、 {{cssxref("grid-column-start")}} および {{cssxref("grid-column-end")}} の一括指定プロパティであり、{{glossary("grid column", "グリッド列")}}の中におけるグリッドアイテムの寸法と位置を指定し、線、区間、なし (自動) をグリッド配置に適用されることで、{{Glossary("grid areas", "グリッド領域")}}の行の開始と終了の端を指定します。

- -
{{EmbedInteractiveExample("pages/css/grid-column.html")}}
- - - -

構文

- -

このプロパティは一つまたは二つの <grid-line> の値で指定します。

- -

二つの <grid-line> 値を指定する場合は、 "/" で区切ります。個別指定の grid-column-start はスラッシュの前に設定し、個別指定の grid-column-end はスラッシュの後に設定します。

- -

それぞれの <grid-line> の値は以下の何れかを指定できます。

- - - -

値

- -
-
auto
-
プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の 1 とするためのキーワードです。
-
<custom-ident>
-
'<custom-ident>-start'/'<custom-ident>-end' という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。 -

メモ: 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 grid-column: foo; と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に foo-start/foo-end という名前の線が明示的に存在しない限り)。

- -

そうでなければ、これは <custom-ident> に沿って整数の 1 が指定されたものとして扱われます。

-
-
<integer> && <custom-ident>?
-
n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 -

名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。

- -

0 の {{cssxref("integer")}} 値は無効です。

-
-
span && [ <integer> || <custom-ident> ]
-
グリッドアイテムのグリッド領域の列開始の端が終了の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。 -

名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分にない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。

- -

the <integer> が省略された場合の既定値は 1 です。負の数や0は無効です。

-
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<div id="grid">
-  <div id="item1"></div>
-  <div id="item2"></div>
-  <div id="item3"></div>
-</div>
- -

CSS

- -
#grid {
-  display: grid;
-  height: 100px;
-  grid-template-columns: repeat(6, 1fr);
-  grid-template-rows: 100px;
-}
-
-#item1 {
-  background-color: lime;
-}
-
-#item2 {
-  background-color: yellow;
-  grid-column: 2 / 4;
-}
-
-#item3 {
-  background-color: blue;
-  grid-column: span 2 / 7;
-}
-
- -

{{EmbedLiveSample("Example", "100%", "100px")}}

- -

Internet Explorer での問題

- -

IE11 はグリッドアイテムの自動配置に対応していません。すべてのアイテムは、明示的に -ms-{{cssxref("grid-column")}} および -ms-{{cssxref("grid-row")}} を記述しない限り、最初の行・列に配置されます。小さな JavaScript を用いて自動的な配置をすることもできます。 ソースリポジトリ

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Grid", "#propdef-grid-column", "grid-column")}}{{Spec2("CSS3 Grid")}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - - - diff --git a/files/ja/web/css/grid-column/index.md b/files/ja/web/css/grid-column/index.md new file mode 100644 index 0000000000..3a6f29ac1d --- /dev/null +++ b/files/ja/web/css/grid-column/index.md @@ -0,0 +1,189 @@ +--- +title: grid-column +slug: Web/CSS/grid-column +tags: + - CSS + - CSS グリッド + - CSS プロパティ + - Reference +translation_of: Web/CSS/grid-column +--- +

grid-column は CSS のプロパティで、 {{cssxref("grid-column-start")}} および {{cssxref("grid-column-end")}} の一括指定プロパティであり、{{glossary("grid column", "グリッド列")}}の中におけるグリッドアイテムの寸法と位置を指定し、線、区間、なし (自動) をグリッド配置に適用されることで、{{Glossary("grid areas", "グリッド領域")}}の行の開始と終了の端を指定します。

+ +
{{EmbedInteractiveExample("pages/css/grid-column.html")}}
+ + + +

構文

+ +

このプロパティは一つまたは二つの <grid-line> の値で指定します。

+ +

二つの <grid-line> 値を指定する場合は、 "/" で区切ります。個別指定の grid-column-start はスラッシュの前に設定し、個別指定の grid-column-end はスラッシュの後に設定します。

+ +

それぞれの <grid-line> の値は以下の何れかを指定できます。

+ + + +

値

+ +
+
auto
+
プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の 1 とするためのキーワードです。
+
<custom-ident>
+
'<custom-ident>-start'/'<custom-ident>-end' という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。 +

メモ: 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 grid-column: foo; と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に foo-start/foo-end という名前の線が明示的に存在しない限り)。

+ +

そうでなければ、これは <custom-ident> に沿って整数の 1 が指定されたものとして扱われます。

+
+
<integer> && <custom-ident>?
+
n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 +

名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。

+ +

0 の {{cssxref("integer")}} 値は無効です。

+
+
span && [ <integer> || <custom-ident> ]
+
グリッドアイテムのグリッド領域の列開始の端が終了の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。 +

名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分にない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。

+ +

the <integer> が省略された場合の既定値は 1 です。負の数や0は無効です。

+
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+ +

CSS

+ +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: 100px;
+}
+
+#item1 {
+  background-color: lime;
+}
+
+#item2 {
+  background-color: yellow;
+  grid-column: 2 / 4;
+}
+
+#item3 {
+  background-color: blue;
+  grid-column: span 2 / 7;
+}
+
+ +

{{EmbedLiveSample("Example", "100%", "100px")}}

+ +

Internet Explorer での問題

+ +

IE11 はグリッドアイテムの自動配置に対応していません。すべてのアイテムは、明示的に -ms-{{cssxref("grid-column")}} および -ms-{{cssxref("grid-row")}} を記述しない限り、最初の行・列に配置されます。小さな JavaScript を用いて自動的な配置をすることもできます。 ソースリポジトリ

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Grid", "#propdef-grid-column", "grid-column")}}{{Spec2("CSS3 Grid")}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

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