From e16ef28d7ef580733a618d623768f802936fcb12 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 5 Dec 2021 00:28:29 +0900 Subject: フレックスボックスの旧プロパティの文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/box-align/index.html | 144 ---------------------------------- files/ja/web/css/box-align/index.md | 144 ++++++++++++++++++++++++++++++++++ 2 files changed, 144 insertions(+), 144 deletions(-) delete mode 100644 files/ja/web/css/box-align/index.html create mode 100644 files/ja/web/css/box-align/index.md (limited to 'files/ja/web/css/box-align') diff --git a/files/ja/web/css/box-align/index.html b/files/ja/web/css/box-align/index.html deleted file mode 100644 index cf3b2068ce..0000000000 --- a/files/ja/web/css/box-align/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: box-align -slug: Web/CSS/box-align -tags: - - CSS - - CSS プロパティ - - Non-standard - - Reference -translation_of: Web/CSS/box-align ---- -
{{CSSRef}}{{Non-standard_header}}{{warning("このプロパティは、当初の CSS Flexible Box Layout Module の草案段階のものでしたが、既により新しい標準のものが取って変わっています。")}}
- -

box-align は、交差軸方向に子要素をどう整列させるかを定義するCSSプロパティです。ボックス内に余分なスペースがある場合にかぎり、その効果を確認することができます。

- -

現在の標準仕様に関する情報については、フレックスボックスを確認してください。

- -
/* キーワード値 */
-box-align: start;
-box-align: center;
-box-align: end;
-box-align: baseline;
-box-align: stretch;
-
-/* グローバル値 */
-box-lines: inherit;
-box-lines: initial;
-box-lines: unset;
-
- -

配置する方向は、その要素の向き (水平か垂直か) に依存します。

- -

{{cssinfo}}

- -

構文

- -

box-align プロパティは、 以下に記載する値で定義されます。

- -

値

- -
-
start
-
ボックス内のコンテンツを先頭に寄せて、末尾に余分なスペースを残します。
-
center
-
ボックス内のコンテンツを中央に寄せて、余分なスペースを等分に分割し始端と終端に残します。
-
end
-
ボックス内のコンテンツを末尾に寄せて、先頭に余分なスペースを残します。
-
baseline
-
ボックス内のコンテンツが持つテキストのベースラインに整列させます。これはボックス内のコンテンツの向きが水平である場合にのみ適用されます。
-
stretch
-
ボックス内に余分なスペースがなくなるようコンテンツを引き伸ばします。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -
<!DOCTYPE html>
-<html>
-<head>
-<title>CSS box-align example</title>
-<style>
-div.example {
-  display: box;                   /* 仕様書通り */
-  display: -moz-box;              /* Mozilla */
-  display: -webkit-box;           /* WebKit */
-
-  /* ボックスの高さを子要素より高くし、
-     box-pack のためのスペースを確保する */
-  height: 400px;
-
-  /* ボックスの幅を子要素より広くし、
-     box-align のためのスペースを確保する */
-  width: 300px;
-
-  /* 子要素の向きは垂直方向にする */
-  box-orient: vertical;           /* 仕様書通り */
-  -moz-box-orient: vertical;      /* Mozilla */
-  -webkit-box-orient: vertical;   /* WebKit */
-
-  /* 子要素をボックス内の水平方向に対して中央に整列させる */
-  box-align: center;              /* 仕様書通り */
-  -moz-box-align: center;         /* Mozilla */
-  -webkit-box-align: center;      /* WebKit */
-
-  /* 子要素をボックス内の終端に寄せる */
-  box-pack: end;                  /* 仕様書通り */
-  -moz-box-pack: end;             /* Mozilla */
-  -webkit-box-pack: end;          /* WebKit */
-}
-
-div.example > p {
-  /* 子要素を親要素の幅より狭くし、
-  box-align のためのスペースを確保する */
-  width: 200px;
-}
-</style>
-</head>
-<body>
-  <div class="example">
-    <p>I will be second from the bottom of div.example, centered horizontally.</p>
-    <p>I will be on the bottom of div.example, centered horizontally.</p>
-  </div>
-</body>
-</html>
- -

メモ

- -

配置の用途で start と定義されるボックスの辺は、ボックスの向きに依存します。

- - - - - - - - - - - - -
Horizontaltop
Verticalleft
- -

start と反対方向の辺が end と定義されます。

- -

その要素の align 属性を使って整列する方向を指定した場合、スタイルで指定した値は無視されます。

- -

仕様書

- - - -

ブラウザーの対応

- -

{{Compat("css.properties.box-align")}}

- -

関連情報

- - diff --git a/files/ja/web/css/box-align/index.md b/files/ja/web/css/box-align/index.md new file mode 100644 index 0000000000..cf3b2068ce --- /dev/null +++ b/files/ja/web/css/box-align/index.md @@ -0,0 +1,144 @@ +--- +title: box-align +slug: Web/CSS/box-align +tags: + - CSS + - CSS プロパティ + - Non-standard + - Reference +translation_of: Web/CSS/box-align +--- +
{{CSSRef}}{{Non-standard_header}}{{warning("このプロパティは、当初の CSS Flexible Box Layout Module の草案段階のものでしたが、既により新しい標準のものが取って変わっています。")}}
+ +

box-align は、交差軸方向に子要素をどう整列させるかを定義するCSSプロパティです。ボックス内に余分なスペースがある場合にかぎり、その効果を確認することができます。

+ +

現在の標準仕様に関する情報については、フレックスボックスを確認してください。

+ +
/* キーワード値 */
+box-align: start;
+box-align: center;
+box-align: end;
+box-align: baseline;
+box-align: stretch;
+
+/* グローバル値 */
+box-lines: inherit;
+box-lines: initial;
+box-lines: unset;
+
+ +

配置する方向は、その要素の向き (水平か垂直か) に依存します。

+ +

{{cssinfo}}

+ +

構文

+ +

box-align プロパティは、 以下に記載する値で定義されます。

+ +

値

+ +
+
start
+
ボックス内のコンテンツを先頭に寄せて、末尾に余分なスペースを残します。
+
center
+
ボックス内のコンテンツを中央に寄せて、余分なスペースを等分に分割し始端と終端に残します。
+
end
+
ボックス内のコンテンツを末尾に寄せて、先頭に余分なスペースを残します。
+
baseline
+
ボックス内のコンテンツが持つテキストのベースラインに整列させます。これはボックス内のコンテンツの向きが水平である場合にのみ適用されます。
+
stretch
+
ボックス内に余分なスペースがなくなるようコンテンツを引き伸ばします。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
<!DOCTYPE html>
+<html>
+<head>
+<title>CSS box-align example</title>
+<style>
+div.example {
+  display: box;                   /* 仕様書通り */
+  display: -moz-box;              /* Mozilla */
+  display: -webkit-box;           /* WebKit */
+
+  /* ボックスの高さを子要素より高くし、
+     box-pack のためのスペースを確保する */
+  height: 400px;
+
+  /* ボックスの幅を子要素より広くし、
+     box-align のためのスペースを確保する */
+  width: 300px;
+
+  /* 子要素の向きは垂直方向にする */
+  box-orient: vertical;           /* 仕様書通り */
+  -moz-box-orient: vertical;      /* Mozilla */
+  -webkit-box-orient: vertical;   /* WebKit */
+
+  /* 子要素をボックス内の水平方向に対して中央に整列させる */
+  box-align: center;              /* 仕様書通り */
+  -moz-box-align: center;         /* Mozilla */
+  -webkit-box-align: center;      /* WebKit */
+
+  /* 子要素をボックス内の終端に寄せる */
+  box-pack: end;                  /* 仕様書通り */
+  -moz-box-pack: end;             /* Mozilla */
+  -webkit-box-pack: end;          /* WebKit */
+}
+
+div.example > p {
+  /* 子要素を親要素の幅より狭くし、
+  box-align のためのスペースを確保する */
+  width: 200px;
+}
+</style>
+</head>
+<body>
+  <div class="example">
+    <p>I will be second from the bottom of div.example, centered horizontally.</p>
+    <p>I will be on the bottom of div.example, centered horizontally.</p>
+  </div>
+</body>
+</html>
+ +

メモ

+ +

配置の用途で start と定義されるボックスの辺は、ボックスの向きに依存します。

+ + + + + + + + + + + + +
Horizontaltop
Verticalleft
+ +

start と反対方向の辺が end と定義されます。

+ +

その要素の align 属性を使って整列する方向を指定した場合、スタイルで指定した値は無視されます。

+ +

仕様書

+ + + +

ブラウザーの対応

+ +

{{Compat("css.properties.box-align")}}

+ +

関連情報

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