From c30862917dbd010ac7489941ef50592c9d2c6005 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 5 Oct 2021 00:18:12 +0900 Subject: CSS Textの文書の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/text-align/index.html | 229 --------------------------------- files/ja/web/css/text-align/index.md | 229 +++++++++++++++++++++++++++++++++ 2 files changed, 229 insertions(+), 229 deletions(-) delete mode 100644 files/ja/web/css/text-align/index.html create mode 100644 files/ja/web/css/text-align/index.md (limited to 'files/ja/web/css/text-align') diff --git a/files/ja/web/css/text-align/index.html b/files/ja/web/css/text-align/index.html deleted file mode 100644 index 40f11c6cfa..0000000000 --- a/files/ja/web/css/text-align/index.html +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: text-align -slug: Web/CSS/text-align -tags: - - CSS - - CSS Property - - CSS Text - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/text-align ---- -
{{CSSRef}}
- -

text-align は CSS のプロパティで、ブロック要素または表セルボックスの水平方向の配置を設定します。つまり、 {{cssxref("vertical-align")}} のように、ただし水平方向に動作します。

- -
{{EmbedInteractiveExample("pages/css/text-align.html")}}
- - - -

構文

- -
/* キーワード値 */
-text-align: left;
-text-align: right;
-text-align: center;
-text-align: justify;
-text-align: justify-all;
-text-align: start;
-text-align: end;
-text-align: match-parent;
-
-/* 表の列における文字ベースの配置 */
-text-align: ".";
-text-align: "." center;
-
-/* ブロック配置の値 (標準外の構文) */
-text-align: -moz-center;
-text-align: -webkit-center;
-
-/* グローバル値 */
-text-align: inherit;
-text-align: initial;
-text-align: unset;
-
- -

text-align プロパティは、以下の方法のうちの一つで指定されます。

- - - -

値

- -
-
start {{experimental_inline}}
-
書字方向が左から右であれば left と、右から左であれば right と同じです。
-
end {{experimental_inline}}
-
書字方向が左から右であれば right と、右から左であれば left と同じです。
-
left
-
インラインコンテンツは行ボックスの左辺に寄せられます。
- -
インラインコンテンツは行ボックスの右辺に寄せられます。
-
center
-
インラインコンテンツは行ボックス内で中央寄せされます。
-
justify
-
インラインコンテンツは両端揃えされます。テキストは最終行を除いて、その左右の端が行ボックスの左右の端に揃うように間隔が空けられます。
-
justify-all {{experimental_inline}}
-
justify と同じですが、最終行も強制的に両端揃えされます。
-
match-parent {{experimental_inline}}
-
inherit に似ていますが、 start と end 値が親要素の {{cssxref("direction")}} に従って計算され、適切な left か right 値に置き換えられます。
-
{{cssxref("<string>")}} {{experimental_inline}}
-
表のセルに適用された場合、セルのコンテンツが揃えられる位置揃え文字を指定します。
-
- -

アクセシビリティの考慮

- -

両端揃えによって単語間の空白が不規則になると、失読症のような認知問題を抱えた人にとって問題になることがあります。

- - - -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

左揃え

- -

HTML

- -
<p class="example">
-  Integer elementum massa at nulla placerat varius.
-  Suspendisse in libero risus, in interdum massa.
-  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
-  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
-</p>
- -

CSS

- -
.example {
-  text-align: left;
-  border: solid;
-}
- -

結果

- -

{{EmbedLiveSample("Left_alignment","100%","100%")}}

- -

中央揃え

- -

HTML

- -
<p class="example">
-  Integer elementum massa at nulla placerat varius.
-  Suspendisse in libero risus, in interdum massa.
-  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
-  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
-</p>
- -

CSS

- -
.example {
-  text-align: center;
-  border: solid;
-}
- -

結果

- -

{{EmbedLiveSample("Centered_text","100%","100%")}}

- -

両端揃え

- -

HTML

- -
<p class="example">
-  Integer elementum massa at nulla placerat varius.
-  Suspendisse in libero risus, in interdum massa.
-  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
-  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
-</p>
- -

CSS

- -
.example {
-  text-align: justify;
-  border: solid;
-}
- -

結果

- -

{{EmbedLiveSample("Justify","100%","100%")}}

- -

注

- -

インラインコンテンツを中央揃えせずにブロック自体を中央揃えする標準互換の方法は、次のように、 left 及び right {{cssxref("margin")}} を auto に設定することです。

- -
.something {
-  margin: auto;
-}
-
- -
.something {
-  margin: 0 auto;
-}
-
- -
.something {
-  margin-left: auto;
-  margin-right: auto;
-}
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Logical Properties', '#text-align', 'text-align')}}{{Spec2('CSS Logical Properties')}}変更なし
{{SpecName('CSS4 Text', '#alignment', 'text-align')}}{{Spec2('CSS4 Text')}}<string> 値を追加。
{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}{{Spec2('CSS3 Text')}}start と end、match-parent キーワードを追加。名前のなかった初期値を（まさにそれである）start に変更。
{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#text-align', 'text-align')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/text-align/index.md b/files/ja/web/css/text-align/index.md new file mode 100644 index 0000000000..40f11c6cfa --- /dev/null +++ b/files/ja/web/css/text-align/index.md @@ -0,0 +1,229 @@ +--- +title: text-align +slug: Web/CSS/text-align +tags: + - CSS + - CSS Property + - CSS Text + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/text-align +--- +
{{CSSRef}}
+ +

text-align は CSS のプロパティで、ブロック要素または表セルボックスの水平方向の配置を設定します。つまり、 {{cssxref("vertical-align")}} のように、ただし水平方向に動作します。

+ +
{{EmbedInteractiveExample("pages/css/text-align.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+text-align: left;
+text-align: right;
+text-align: center;
+text-align: justify;
+text-align: justify-all;
+text-align: start;
+text-align: end;
+text-align: match-parent;
+
+/* 表の列における文字ベースの配置 */
+text-align: ".";
+text-align: "." center;
+
+/* ブロック配置の値 (標準外の構文) */
+text-align: -moz-center;
+text-align: -webkit-center;
+
+/* グローバル値 */
+text-align: inherit;
+text-align: initial;
+text-align: unset;
+
+ +

text-align プロパティは、以下の方法のうちの一つで指定されます。

+ + + +

値

+ +
+
start {{experimental_inline}}
+
書字方向が左から右であれば left と、右から左であれば right と同じです。
+
end {{experimental_inline}}
+
書字方向が左から右であれば right と、右から左であれば left と同じです。
+
left
+
インラインコンテンツは行ボックスの左辺に寄せられます。
+ +
インラインコンテンツは行ボックスの右辺に寄せられます。
+
center
+
インラインコンテンツは行ボックス内で中央寄せされます。
+
justify
+
インラインコンテンツは両端揃えされます。テキストは最終行を除いて、その左右の端が行ボックスの左右の端に揃うように間隔が空けられます。
+
justify-all {{experimental_inline}}
+
justify と同じですが、最終行も強制的に両端揃えされます。
+
match-parent {{experimental_inline}}
+
inherit に似ていますが、 start と end 値が親要素の {{cssxref("direction")}} に従って計算され、適切な left か right 値に置き換えられます。
+
{{cssxref("<string>")}} {{experimental_inline}}
+
表のセルに適用された場合、セルのコンテンツが揃えられる位置揃え文字を指定します。
+
+ +

アクセシビリティの考慮

+ +

両端揃えによって単語間の空白が不規則になると、失読症のような認知問題を抱えた人にとって問題になることがあります。

+ + + +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

左揃え

+ +

HTML

+ +
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>
+ +

CSS

+ +
.example {
+  text-align: left;
+  border: solid;
+}
+ +

結果

+ +

{{EmbedLiveSample("Left_alignment","100%","100%")}}

+ +

中央揃え

+ +

HTML

+ +
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>
+ +

CSS

+ +
.example {
+  text-align: center;
+  border: solid;
+}
+ +

結果

+ +

{{EmbedLiveSample("Centered_text","100%","100%")}}

+ +

両端揃え

+ +

HTML

+ +
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>
+ +

CSS

+ +
.example {
+  text-align: justify;
+  border: solid;
+}
+ +

結果

+ +

{{EmbedLiveSample("Justify","100%","100%")}}

+ +

注

+ +

インラインコンテンツを中央揃えせずにブロック自体を中央揃えする標準互換の方法は、次のように、 left 及び right {{cssxref("margin")}} を auto に設定することです。

+ +
.something {
+  margin: auto;
+}
+
+ +
.something {
+  margin: 0 auto;
+}
+
+ +
.something {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Logical Properties', '#text-align', 'text-align')}}{{Spec2('CSS Logical Properties')}}変更なし
{{SpecName('CSS4 Text', '#alignment', 'text-align')}}{{Spec2('CSS4 Text')}}<string> 値を追加。
{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}{{Spec2('CSS3 Text')}}start と end、match-parent キーワードを追加。名前のなかった初期値を（まさにそれである）start に変更。
{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#text-align', 'text-align')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

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