From fb615c08a16488e1f72311382425a1e6fff3c13b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 5 Dec 2021 01:34:05 +0900 Subject: 2021/12/05 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/box-align/index.md | 141 +++++++++++++++++------------------- 1 file changed, 67 insertions(+), 74 deletions(-) (limited to 'files/ja/web/css/box-align') diff --git a/files/ja/web/css/box-align/index.md b/files/ja/web/css/box-align/index.md index cf3b2068ce..890b2c6b02 100644 --- a/files/ja/web/css/box-align/index.md +++ b/files/ja/web/css/box-align/index.md @@ -4,17 +4,21 @@ slug: Web/CSS/box-align tags: - CSS - CSS プロパティ - - Non-standard - - Reference + - NeedsUpdate + - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.box-align translation_of: Web/CSS/box-align --- -
{{CSSRef}}{{Non-standard_header}}{{warning("このプロパティは、当初の CSS Flexible Box Layout Module の草案段階のものでしたが、既により新しい標準のものが取って変わっています。")}}
+{{CSSRef}}{{Non-standard_header}}{{warning("このプロパティは、当初の CSS Flexible Box Layout Module の草案段階のものでしたが、より新しい標準で置き換えられました。")}} -

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

+**`box-align`** は [CSS](/ja/docs/Web/CSS) のプロパティで、交差軸方向に子要素をどう整列させるかを定義します。ボックス内に余分な空間がある場合にかぎり、その効果を確認することができます。 -

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

+現在の標準仕様に関する情報については、[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を確認してください。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 box-align: start;
 box-align: center;
 box-align: end;
@@ -25,42 +29,56 @@ box-align: stretch;
 box-lines: inherit;
 box-lines: initial;
 box-lines: unset;
-
+``` -

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

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

{{cssinfo}}

+## 構文 -

構文

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

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

+### 値 -

値

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

形式文法

+整列のために _start_ と指定されたボックスの辺は、ボックスの方向によって異なります。 + +- 水平方向の要素の場合、 _start_ は上端になります。 +- 垂直方向の要素の場合、 _start_ は左端になります。 + +start の反対側の端は _end_ となります。 + +要素の `align` 属性で配置が設定されている場合、このスタイルは無視されます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 -
<!DOCTYPE html>
-<html>
-<head>
-<title>CSS box-align example</title>
-<style>
+### ボックス配置の設定
+
+```html
+
+
+
+CSS box-align example
+
+
+
+  

+    
I will be second from the bottom of div.example, centered horizontally.

+    
I will be on the bottom of div.example, centered horizontally.

+  

+
+
+```
 
-
仕様書

+## 仕様書
 
-
+標準仕様には含まれていません。
 
-
ブラウザーの対応

+## ブラウザーの互換性
 
-
{{Compat("css.properties.box-align")}}

+{{Compat}}
 
-
関連情報

+## 関連情報
 
-
+- {{cssxref("align-items")}}, {{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-pack")}}
-- 
cgit v1.2.3-54-g00ecf