From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/text-justify/index.html | 118 +++++++++++++++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 files/ja/web/css/text-justify/index.html (limited to 'files/ja/web/css/text-justify') diff --git a/files/ja/web/css/text-justify/index.html b/files/ja/web/css/text-justify/index.html new file mode 100644 index 0000000000..f121ff0d09 --- /dev/null +++ b/files/ja/web/css/text-justify/index.html @@ -0,0 +1,118 @@ +--- +title: text-justify +slug: Web/CSS/text-justify +tags: + - CSS + - CSS テキスト + - CSS プロパティ + - Reference + - text-justify +translation_of: Web/CSS/text-justify +--- +
{{CSSRef}}
+ +

CSS の text-justify プロパティは、要素に {{cssxref("text-align")}}: justify; が設定された時にテキストに適用される両端揃えの種類を設定します。

+ +
text-justify: none;
+text-justify: auto;
+text-justify: inter-word;
+text-justify: inter-character;
+text-justify: distribute; /* 非推奨の値 */
+
+ +
{{cssinfo}}
+ +

構文

+ +

text-justify プロパティは、以下の値のリストのうち一つのキーワードで指定します。

+ +

値

+ +
+
none
+
テキストの両端揃えは行われません。これは {{cssxref("text-align")}} をまったく設定しない場合と同様の効果を持ちますが、何らかの理由で両端揃えを有効または無効にする必要があるときに便利です。
+
auto
+
ブラウザーは性能と品質の釣り合いに基づいて、テキストの言語 (例えば英語か、日本語か、中国語かなど) に最も適切なものは何かも加味して、現在の状況のために最適な種類の揃え方を選択します。これは text-justify をまったく設定しない場合に使われる既定の揃え方です。
+
inter-word
+
単語間に間隔を挿入する (事実上 {{cssxref("word-spacing")}} を変化させる) ことでテキストを揃えるもので、これは英語や韓国語のように、空白で単語を区切る言語に最も適しています。
+
inter-character
+
文字間に間隔を挿入する (事実上 {{cssxref("letter-spacing")}} を変化させる) ことでテキストを揃えるもので、これは日本語のような言語に最も適しています。
+
distribute {{deprecated_inline}}
+
inter-character と同じ動作を見せます。この値は後方互換性のためのものです。
+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ + + +
p {
+  font-size: 1.5em;
+  border: 1px solid black;
+  padding: 10px;
+  width: 95%;
+  margin: 10px auto;
+  text-align: justify;
+}
+
+.none {
+  text-justify: none;
+}
+
+.auto {
+  text-justify: auto;
+}
+
+.dist {
+  text-justify: distribute;
+}
+
+.word {
+  text-justify: inter-word;
+}
+
+.char {
+  text-justify: inter-character;
+}
+ +
{{EmbedLiveSample("Examples","100%",400)}}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}}{{Spec2('CSS3 Text')}} 
+ +

ブラウザーの対応

+ + + +
{{Compat("css.properties.text-justify")}}
+ +

関連情報

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