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/hanging-punctuation/index.html | 122 -------- files/ja/web/css/hanging-punctuation/index.md | 122 ++++++++ files/ja/web/css/hyphens/index.html | 154 ---------- files/ja/web/css/hyphens/index.md | 154 ++++++++++ files/ja/web/css/letter-spacing/index.html | 133 --------- files/ja/web/css/letter-spacing/index.md | 133 +++++++++ files/ja/web/css/line-break/index.html | 114 -------- files/ja/web/css/line-break/index.md | 114 ++++++++ files/ja/web/css/overflow-wrap/index.html | 144 --------- files/ja/web/css/overflow-wrap/index.md | 144 +++++++++ files/ja/web/css/tab-size/index.html | 96 ------ files/ja/web/css/tab-size/index.md | 96 ++++++ files/ja/web/css/text-align-last/index.html | 104 ------- files/ja/web/css/text-align-last/index.md | 104 +++++++ files/ja/web/css/text-align/index.html | 229 --------------- files/ja/web/css/text-align/index.md | 229 +++++++++++++++ files/ja/web/css/text-indent/index.html | 135 --------- files/ja/web/css/text-indent/index.md | 135 +++++++++ files/ja/web/css/text-justify/index.html | 116 -------- files/ja/web/css/text-justify/index.md | 116 ++++++++ files/ja/web/css/text-transform/index.html | 371 ------------------------ files/ja/web/css/text-transform/index.md | 371 ++++++++++++++++++++++++ files/ja/web/css/white-space/index.html | 246 ---------------- files/ja/web/css/white-space/index.md | 246 ++++++++++++++++ files/ja/web/css/word-break/index.html | 146 ---------- files/ja/web/css/word-break/index.md | 146 ++++++++++ files/ja/web/css/word-spacing/index.html | 125 -------- files/ja/web/css/word-spacing/index.md | 125 ++++++++ 28 files changed, 2235 insertions(+), 2235 deletions(-) delete mode 100644 files/ja/web/css/hanging-punctuation/index.html create mode 100644 files/ja/web/css/hanging-punctuation/index.md delete mode 100644 files/ja/web/css/hyphens/index.html create mode 100644 files/ja/web/css/hyphens/index.md delete mode 100644 files/ja/web/css/letter-spacing/index.html create mode 100644 files/ja/web/css/letter-spacing/index.md delete mode 100644 files/ja/web/css/line-break/index.html create mode 100644 files/ja/web/css/line-break/index.md delete mode 100644 files/ja/web/css/overflow-wrap/index.html create mode 100644 files/ja/web/css/overflow-wrap/index.md delete mode 100644 files/ja/web/css/tab-size/index.html create mode 100644 files/ja/web/css/tab-size/index.md delete mode 100644 files/ja/web/css/text-align-last/index.html create mode 100644 files/ja/web/css/text-align-last/index.md delete mode 100644 files/ja/web/css/text-align/index.html create mode 100644 files/ja/web/css/text-align/index.md delete mode 100644 files/ja/web/css/text-indent/index.html create mode 100644 files/ja/web/css/text-indent/index.md delete mode 100644 files/ja/web/css/text-justify/index.html create mode 100644 files/ja/web/css/text-justify/index.md delete mode 100644 files/ja/web/css/text-transform/index.html create mode 100644 files/ja/web/css/text-transform/index.md delete mode 100644 files/ja/web/css/white-space/index.html create mode 100644 files/ja/web/css/white-space/index.md delete mode 100644 files/ja/web/css/word-break/index.html create mode 100644 files/ja/web/css/word-break/index.md delete mode 100644 files/ja/web/css/word-spacing/index.html create mode 100644 files/ja/web/css/word-spacing/index.md (limited to 'files') diff --git a/files/ja/web/css/hanging-punctuation/index.html b/files/ja/web/css/hanging-punctuation/index.html deleted file mode 100644 index 858ebb6b1c..0000000000 --- a/files/ja/web/css/hanging-punctuation/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: hanging-punctuation -slug: Web/CSS/hanging-punctuation -tags: - - CSS - - CSS Property - - CSS Text - - CSS テキスト - - CSS プロパティ - - Experimental - - Reference - - リファレンス -translation_of: Web/CSS/hanging-punctuation ---- -
{{CSSRef}}
- -

hanging-punctuation は CSS のプロパティで、区切り記号をテキストの行頭や行末にぶら下げるべきかどうかを指定します。ぶら下げられる区切り記号は行ボックスの外側に配置されれることがあります。

- -
/* キーワード値 */
-hanging-punctuation: none;
-hanging-punctuation: first;
-hanging-punctuation: last;
-hanging-punctuation: force-end;
-hanging-punctuation: allow-end;
-
-/* 2 つのキーワード */
-hanging-punctuation: first force-end;
-hanging-punctuation: first allow-end;
-hanging-punctuation: first last;
-hanging-punctuation: last force-end;
-hanging-punctuation: last allow-end;
-
-/* 3 つのキーワード */
-hanging-punctuation: first force-end last;
-hanging-punctuation: first allow-end last;
-
-/* グローバル値 */
-hanging-punctuation: inherit;
-hanging-punctuation: initial;
-hanging-punctuation: unset;
-
- -

{{CSSInfo}}

- -

構文

- -

hanging-punctuation プロパティは 1 つ、2 つ、 3 つの値で指定することができます。

- - - -

値

- -
-
none
-
文字のぶら下げを行いません。
-
first
-
要素の最初の書式設定された行頭にある、開き括弧または引用符をぶら下げます。
-
last
-
要素の最後の書式設定された行末にある、閉じ括弧または引用符をぶら下げます。
-
force-end
-
行末の句読点をぶら下げます。
-
allow-end
-
句読点をぶら下げないと行末が揃わない場合に、句読点をぶら下げます。
-
- -

形式文法

- -{{CSSSyntax}} - -

例

- -

HTML

- -
<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.”</p>
- -

CSS

- -
p {
-  hanging-punctuation: first last;
-  margin: .5rem;
-}
- -

結果

- -

{{EmbedLiveSample("Example")}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Text", "#hanging-punctuation-property", "hanging-punctuation")}}{{Spec2("CSS3 Text")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.hanging-punctuation")}}

diff --git a/files/ja/web/css/hanging-punctuation/index.md b/files/ja/web/css/hanging-punctuation/index.md new file mode 100644 index 0000000000..858ebb6b1c --- /dev/null +++ b/files/ja/web/css/hanging-punctuation/index.md @@ -0,0 +1,122 @@ +--- +title: hanging-punctuation +slug: Web/CSS/hanging-punctuation +tags: + - CSS + - CSS Property + - CSS Text + - CSS テキスト + - CSS プロパティ + - Experimental + - Reference + - リファレンス +translation_of: Web/CSS/hanging-punctuation +--- +
{{CSSRef}}
+ +

hanging-punctuation は CSS のプロパティで、区切り記号をテキストの行頭や行末にぶら下げるべきかどうかを指定します。ぶら下げられる区切り記号は行ボックスの外側に配置されれることがあります。

+ +
/* キーワード値 */
+hanging-punctuation: none;
+hanging-punctuation: first;
+hanging-punctuation: last;
+hanging-punctuation: force-end;
+hanging-punctuation: allow-end;
+
+/* 2 つのキーワード */
+hanging-punctuation: first force-end;
+hanging-punctuation: first allow-end;
+hanging-punctuation: first last;
+hanging-punctuation: last force-end;
+hanging-punctuation: last allow-end;
+
+/* 3 つのキーワード */
+hanging-punctuation: first force-end last;
+hanging-punctuation: first allow-end last;
+
+/* グローバル値 */
+hanging-punctuation: inherit;
+hanging-punctuation: initial;
+hanging-punctuation: unset;
+
+ +

{{CSSInfo}}

+ +

構文

+ +

hanging-punctuation プロパティは 1 つ、2 つ、 3 つの値で指定することができます。

+ + + +

値

+ +
+
none
+
文字のぶら下げを行いません。
+
first
+
要素の最初の書式設定された行頭にある、開き括弧または引用符をぶら下げます。
+
last
+
要素の最後の書式設定された行末にある、閉じ括弧または引用符をぶら下げます。
+
force-end
+
行末の句読点をぶら下げます。
+
allow-end
+
句読点をぶら下げないと行末が揃わない場合に、句読点をぶら下げます。
+
+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

HTML

+ +
<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.”</p>
+ +

CSS

+ +
p {
+  hanging-punctuation: first last;
+  margin: .5rem;
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Text", "#hanging-punctuation-property", "hanging-punctuation")}}{{Spec2("CSS3 Text")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.hanging-punctuation")}}

diff --git a/files/ja/web/css/hyphens/index.html b/files/ja/web/css/hyphens/index.html deleted file mode 100644 index 09965ce859..0000000000 --- a/files/ja/web/css/hyphens/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: hyphens -slug: Web/CSS/hyphens -tags: - - CSS - - CSS Property - - CSS テキスト - - CSS プロパティ - - CSS 文字列 - - Reference -translation_of: Web/CSS/hyphens ---- -
{{CSSRef}}
- -

hyphens は CSS のプロパティで、文字列を複数行にわたって折り返す際に、単語のハイフネーションを行う方法を指定します。ハイフネーションをまったく行わなかったり、手動で指定された位置で文字列のハイフネーションを行ったり、ブラウザーに適切な位置にハイフンを挿入させたりすることができます。

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

ハイフネーションの規則は言語に依存します。 HTML では言語は lang 属性で特定され、ブラウザーはこの属性が存在し、適切なハイフネーション辞書が利用できる場合にのみハイフネーションを行います。 XML では、 xml:lang 属性を使用する必要があります。

- -
-

注: どのようにハイフネーションを行うかの規則は仕様書で明確に定義されていないため、厳密なハイフネーションの方式はブラウザーにより異なります。

-
- -

構文

- -
/* キーワード値 */
-hyphens: none;
-hyphens: manual;
-hyphens: auto;
-
-/* グローバル値 */
-hyphens: inherit;
-hyphens: initial;
-hyphens: unset;
-
- -

hyphens プロパティは、以下に挙げたキーワード値のうちの一つで指定します。

- -

値

- -
-
none
-
単語内で分割が提案されている文字の位置であっても、改行で単語を分割しません。行はホワイトスペースの位置のみで折り返します。
-
manual
-
単語内で分割が提案されている文字の位置でのみ、行の折り返しで単語を分割します。詳しくは{{anch("Suggesting line break opportunities", "改行候補位置の提案")}}を参照してください。
-
auto
-
ブラウザーは自身が選択した規則に従って、ハイフネーションを行うのに適切な位置で自動的に単語を分割します。しかし、改行候補位置（{{anch("Suggesting line break opportunities", "改行候補位置の提案")}}を参照）があれば、自動的な改行位置の選択を上書きします。
-
- -
-

メモ: auto を設定したときの動作は、正しくタグ付けされた言語に依存して、適切なハイフネーション規則が選択されます。選択した言語で自動的なハイフネーションが適用されるようにすることを保証するために、 HTML の lang 属性を必ず指定してください。

-
- -

形式文法

- -{{csssyntax}} - -

改行候補位置の提案

- -

文字列中で改行が可能な位置を手動で指定するために使用できる Unicode 文字は2つあります。

- -
-
U+2010 (HYPHEN)
-
「ハード」ハイフン文字は、目に見える改行候補位置を示します。実際はその位置で改行されない場合でも、ハイフンが表示されます。
-
U+00AD (SHY)
-
不可視の「ソフト」ハイフン ("soft" hyphen) です。この文字は表示されませんが、ブラウザーが必要に応じて単語を分割できる位置を示します。 HTML では、 &shy; を使用してソフトハイフンを挿入することができます。
-
- -
-

HTML の {{htmlelement("wbr")}} 要素によって改行が行われた場合、ハイフンは挿入されません。

-
- -

例

- -

以下の例では3つのクラスを使用し、それぞれの hyphens プロパティの設定を示します。

- -

HTML

- -
<dl>
-  <dt><code>none</code>: no hyphen; overflow if needed</dt>
-  <dd lang="en" class="none">An extreme&shy;ly long English word</dd>
-  <dt><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)</dt>
-  <dd lang="en" class="manual">An extreme&shy;ly long English word</dd>
-  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
-  <dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
-</dl>
-
- -

CSS

- -
dd {
-  width: 55px;
-  border: 1px solid black;
- }
-dd.none {
-  -webkit-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-dd.manual {
-  -webkit-hyphens: manual;
-  -ms-hyphens: manual;
-  hyphens: manual;
-}
-dd.auto {
-  -webkit-hyphens: auto;
-  -ms-hyphens: auto;
-  hyphens: auto;
-}
-
- -

結果

- -
-

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

-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}{{Spec2("CSS3 Text")}}初回定義。
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -
-

{{Compat("css.properties.hyphens")}}

-
- -

関連情報

- - diff --git a/files/ja/web/css/hyphens/index.md b/files/ja/web/css/hyphens/index.md new file mode 100644 index 0000000000..09965ce859 --- /dev/null +++ b/files/ja/web/css/hyphens/index.md @@ -0,0 +1,154 @@ +--- +title: hyphens +slug: Web/CSS/hyphens +tags: + - CSS + - CSS Property + - CSS テキスト + - CSS プロパティ + - CSS 文字列 + - Reference +translation_of: Web/CSS/hyphens +--- +
{{CSSRef}}
+ +

hyphens は CSS のプロパティで、文字列を複数行にわたって折り返す際に、単語のハイフネーションを行う方法を指定します。ハイフネーションをまったく行わなかったり、手動で指定された位置で文字列のハイフネーションを行ったり、ブラウザーに適切な位置にハイフンを挿入させたりすることができます。

+ +
{{EmbedInteractiveExample("pages/css/hyphens.html")}}
+ + + +

ハイフネーションの規則は言語に依存します。 HTML では言語は lang 属性で特定され、ブラウザーはこの属性が存在し、適切なハイフネーション辞書が利用できる場合にのみハイフネーションを行います。 XML では、 xml:lang 属性を使用する必要があります。

+ +
+

注: どのようにハイフネーションを行うかの規則は仕様書で明確に定義されていないため、厳密なハイフネーションの方式はブラウザーにより異なります。

+
+ +

構文

+ +
/* キーワード値 */
+hyphens: none;
+hyphens: manual;
+hyphens: auto;
+
+/* グローバル値 */
+hyphens: inherit;
+hyphens: initial;
+hyphens: unset;
+
+ +

hyphens プロパティは、以下に挙げたキーワード値のうちの一つで指定します。

+ +

値

+ +
+
none
+
単語内で分割が提案されている文字の位置であっても、改行で単語を分割しません。行はホワイトスペースの位置のみで折り返します。
+
manual
+
単語内で分割が提案されている文字の位置でのみ、行の折り返しで単語を分割します。詳しくは{{anch("Suggesting line break opportunities", "改行候補位置の提案")}}を参照してください。
+
auto
+
ブラウザーは自身が選択した規則に従って、ハイフネーションを行うのに適切な位置で自動的に単語を分割します。しかし、改行候補位置（{{anch("Suggesting line break opportunities", "改行候補位置の提案")}}を参照）があれば、自動的な改行位置の選択を上書きします。
+
+ +
+

メモ: auto を設定したときの動作は、正しくタグ付けされた言語に依存して、適切なハイフネーション規則が選択されます。選択した言語で自動的なハイフネーションが適用されるようにすることを保証するために、 HTML の lang 属性を必ず指定してください。

+
+ +

形式文法

+ +{{csssyntax}} + +

改行候補位置の提案

+ +

文字列中で改行が可能な位置を手動で指定するために使用できる Unicode 文字は2つあります。

+ +
+
U+2010 (HYPHEN)
+
「ハード」ハイフン文字は、目に見える改行候補位置を示します。実際はその位置で改行されない場合でも、ハイフンが表示されます。
+
U+00AD (SHY)
+
不可視の「ソフト」ハイフン ("soft" hyphen) です。この文字は表示されませんが、ブラウザーが必要に応じて単語を分割できる位置を示します。 HTML では、 &shy; を使用してソフトハイフンを挿入することができます。
+
+ +
+

HTML の {{htmlelement("wbr")}} 要素によって改行が行われた場合、ハイフンは挿入されません。

+
+ +

例

+ +

以下の例では3つのクラスを使用し、それぞれの hyphens プロパティの設定を示します。

+ +

HTML

+ +
<dl>
+  <dt><code>none</code>: no hyphen; overflow if needed</dt>
+  <dd lang="en" class="none">An extreme&shy;ly long English word</dd>
+  <dt><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)</dt>
+  <dd lang="en" class="manual">An extreme&shy;ly long English word</dd>
+  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
+  <dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
+</dl>
+
+ +

CSS

+ +
dd {
+  width: 55px;
+  border: 1px solid black;
+ }
+dd.none {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+dd.manual {
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
+}
+dd.auto {
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
+
+ +

結果

+ +
+

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

+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}{{Spec2("CSS3 Text")}}初回定義。
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +
+

{{Compat("css.properties.hyphens")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/letter-spacing/index.html b/files/ja/web/css/letter-spacing/index.html deleted file mode 100644 index f16840257e..0000000000 --- a/files/ja/web/css/letter-spacing/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: letter-spacing -slug: Web/CSS/letter-spacing -tags: - - CSS - - CSS Property - - CSS Text - - Reference - - SVG - - 'recipe:css-property' -translation_of: Web/CSS/letter-spacing ---- -
{{CSSRef}}
- -

letter-spacing はCSS のプロパティで、テキストの水平方向の字間のスペースに関する挙動を設定します。この値はテキストを描画する際に文字間の自然な空間に追加されます。 letter-spacing が正の値であった場合は、文字と文字の間が開き、 letter-spacing が負の値であった場合は、文字と文字が互いに近づきます。

- -
{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}
- - - -

構文

- -
/* キーワード値 */
-letter-spacing: normal;
-
-/* <length> 値 */
-letter-spacing: 0.3em;
-letter-spacing: 3px;
-letter-spacing: .3px;
-
-/* グローバル値 */
-letter-spacing: inherit;
-letter-spacing: initial;
-letter-spacing: unset;
-
- -

値

- -
-
normal
-
現在のフォントでの通常の字間になります。 0 の値とは異なり、この値は{{glossary("user agent", "ユーザーエージェント")}}が文字列を両端揃えするために字間を変えることを許可します。
-
{{cssxref("<length>")}}
-
既定の字間に加える字間のスペースを指定します。負の値も指定可能ですが、実装に依存した制限があるかもしれません。ユーザーエージェントは文字列を両端揃えするために、字間スペースをさらに増減させることはありません。
-
- -

アクセシビリティへの配慮

- -

正と負のどちらでも、大きすぎる値を letter-spacing に指定すると読みづらくなってしまいます。正の値として大きすぎる場合、文字と文字が離れすぎるせいでひとつの単語ではなくバラバラの文字に見えてしまいます。負の値として大きすぎる場合、文字と文字が重なり合うために何が書いてあるのか分からなくなってしまいます。

- -

フォントの文字幅は種類ごとに異なるため、読みやすい letter-spacing もそれぞれ異なります。すべてのフォントで読みやすさを提供してくれる単一の設定値というものはありません。

- - - -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

字間の設定

- -

HTML

- -
<p class="normal">letter spacing</p>
-<p class="em-wide">letter spacing</p>
-<p class="em-wider">letter spacing</p>
-<p class="em-tight">letter spacing</p>
-<p class="px-wide">letter spacing</p>
-
- -

CSS

- -
.normal   { letter-spacing: normal; }
-.em-wide  { letter-spacing: 0.4em; }
-.em-wider { letter-spacing: 1em; }
-.em-tight { letter-spacing: -0.05em; }
-.px-wide  { letter-spacing: 6px; }
-
- -

結果

- -

{{ EmbedLiveSample('Setting_letter_spacing', 440, 185) }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}{{Spec2('CSS3 Text')}}変更なし。
{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}{{Spec2('CSS2.1')}}変更なし。
{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}{{Spec2('SVG1.1')}}SVG での初回定義
{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.letter-spacing")}}

- -

関連情報

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

letter-spacing はCSS のプロパティで、テキストの水平方向の字間のスペースに関する挙動を設定します。この値はテキストを描画する際に文字間の自然な空間に追加されます。 letter-spacing が正の値であった場合は、文字と文字の間が開き、 letter-spacing が負の値であった場合は、文字と文字が互いに近づきます。

+ +
{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+letter-spacing: normal;
+
+/* <length> 値 */
+letter-spacing: 0.3em;
+letter-spacing: 3px;
+letter-spacing: .3px;
+
+/* グローバル値 */
+letter-spacing: inherit;
+letter-spacing: initial;
+letter-spacing: unset;
+
+ +

値

+ +
+
normal
+
現在のフォントでの通常の字間になります。 0 の値とは異なり、この値は{{glossary("user agent", "ユーザーエージェント")}}が文字列を両端揃えするために字間を変えることを許可します。
+
{{cssxref("<length>")}}
+
既定の字間に加える字間のスペースを指定します。負の値も指定可能ですが、実装に依存した制限があるかもしれません。ユーザーエージェントは文字列を両端揃えするために、字間スペースをさらに増減させることはありません。
+
+ +

アクセシビリティへの配慮

+ +

正と負のどちらでも、大きすぎる値を letter-spacing に指定すると読みづらくなってしまいます。正の値として大きすぎる場合、文字と文字が離れすぎるせいでひとつの単語ではなくバラバラの文字に見えてしまいます。負の値として大きすぎる場合、文字と文字が重なり合うために何が書いてあるのか分からなくなってしまいます。

+ +

フォントの文字幅は種類ごとに異なるため、読みやすい letter-spacing もそれぞれ異なります。すべてのフォントで読みやすさを提供してくれる単一の設定値というものはありません。

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

字間の設定

+ +

HTML

+ +
<p class="normal">letter spacing</p>
+<p class="em-wide">letter spacing</p>
+<p class="em-wider">letter spacing</p>
+<p class="em-tight">letter spacing</p>
+<p class="px-wide">letter spacing</p>
+
+ +

CSS

+ +
.normal   { letter-spacing: normal; }
+.em-wide  { letter-spacing: 0.4em; }
+.em-wider { letter-spacing: 1em; }
+.em-tight { letter-spacing: -0.05em; }
+.px-wide  { letter-spacing: 6px; }
+
+ +

結果

+ +

{{ EmbedLiveSample('Setting_letter_spacing', 440, 185) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}{{Spec2('CSS3 Text')}}変更なし。
{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}{{Spec2('CSS2.1')}}変更なし。
{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}{{Spec2('SVG1.1')}}SVG での初回定義
{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.letter-spacing")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/line-break/index.html b/files/ja/web/css/line-break/index.html deleted file mode 100644 index 99fff450bd..0000000000 --- a/files/ja/web/css/line-break/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: line-break -slug: Web/CSS/line-break -tags: - - Asian - - CSS - - CSS Property - - CSS Text - - NeedsExample - - Reference - - i18n - - l10n - - 'recipe:css-property' - - 日本語処理 - - 禁則処理 -translation_of: Web/CSS/line-break ---- -
{{CSSRef}}
- -

line-break は CSS のプロパティで、中国語、日本語、韓国語 (CJK) のテキストにおいて、句読点や記号を用いた場合の改行規則を設定します。

- -
/* キーワード値 */
-line-break: auto;
-line-break: loose;
-line-break: normal;
-line-break: strict;
-line-break: anywhere;
-
-/* グローバル値 */
-line-break: inherit;
-line-break: initial;
-line-break: unset;
-
- -

構文

- -

値

- -
-
auto
-
既定の改行規則を使用してテキストを改行します。
-
loose
-
最も制限の少ない改行規則を使用してテキストを改行します。一般的に、新聞などの短い行に使用されます。
-
normal
-
最も一般的な改行規則を使用してテキストを改行します。
-
strict
-
最も厳格な改行規則を使用してテキストを改行します。
-
anywhere
-
-

句読点や温存された空白、単語の途中も含め、すべての文字の間で折り返しできるようにし、 GL, WJ, ZWJ の文字クラスや、 {{cssxref("word-break")}} プロパティでもたらされる折り返しの禁止を一切無視します。どの折り返しの機会も優先されることはありません。ハイフネーションは適用されません。

-
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

テキストの折り返しの設定

- -

"々", "ぁ", "。" の前で折り返しが行われるかどうかを確認してください。

- -

HTML

- -
<div lang="ja">
-  <p class="wrapbox auto">auto:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
-  <p class="wrapbox loose">loose:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
-  <p class="wrapbox normal">normal:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
-  <p class="wrapbox strict">strict:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
-  <p class="wrapbox anywhere">anywhere:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
-</div>
-
- -

CSS

- -
.wrapbox { width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; }
-.auto { line-break: auto; }
-.loose { line-break: loose; }
-.normal { line-break: normal; }
-.strict { line-break: strict; }
-.anywhere { line-break: anywhere; }
-
- -

Result

- -

{{ EmbedLiveSample('Setting_text_wrapping', 200, 400) }}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Text', '#line-break-property', 'line-break')}}{{Spec2('CSS3 Text')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.line-break")}}

diff --git a/files/ja/web/css/line-break/index.md b/files/ja/web/css/line-break/index.md new file mode 100644 index 0000000000..99fff450bd --- /dev/null +++ b/files/ja/web/css/line-break/index.md @@ -0,0 +1,114 @@ +--- +title: line-break +slug: Web/CSS/line-break +tags: + - Asian + - CSS + - CSS Property + - CSS Text + - NeedsExample + - Reference + - i18n + - l10n + - 'recipe:css-property' + - 日本語処理 + - 禁則処理 +translation_of: Web/CSS/line-break +--- +
{{CSSRef}}
+ +

line-break は CSS のプロパティで、中国語、日本語、韓国語 (CJK) のテキストにおいて、句読点や記号を用いた場合の改行規則を設定します。

+ +
/* キーワード値 */
+line-break: auto;
+line-break: loose;
+line-break: normal;
+line-break: strict;
+line-break: anywhere;
+
+/* グローバル値 */
+line-break: inherit;
+line-break: initial;
+line-break: unset;
+
+ +

構文

+ +

値

+ +
+
auto
+
既定の改行規則を使用してテキストを改行します。
+
loose
+
最も制限の少ない改行規則を使用してテキストを改行します。一般的に、新聞などの短い行に使用されます。
+
normal
+
最も一般的な改行規則を使用してテキストを改行します。
+
strict
+
最も厳格な改行規則を使用してテキストを改行します。
+
anywhere
+
+

句読点や温存された空白、単語の途中も含め、すべての文字の間で折り返しできるようにし、 GL, WJ, ZWJ の文字クラスや、 {{cssxref("word-break")}} プロパティでもたらされる折り返しの禁止を一切無視します。どの折り返しの機会も優先されることはありません。ハイフネーションは適用されません。

+
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

テキストの折り返しの設定

+ +

"々", "ぁ", "。" の前で折り返しが行われるかどうかを確認してください。

+ +

HTML

+ +
<div lang="ja">
+  <p class="wrapbox auto">auto:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
+  <p class="wrapbox loose">loose:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
+  <p class="wrapbox normal">normal:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
+  <p class="wrapbox strict">strict:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
+  <p class="wrapbox anywhere">anywhere:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
+</div>
+
+ +

CSS

+ +
.wrapbox { width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; }
+.auto { line-break: auto; }
+.loose { line-break: loose; }
+.normal { line-break: normal; }
+.strict { line-break: strict; }
+.anywhere { line-break: anywhere; }
+
+ +

Result

+ +

{{ EmbedLiveSample('Setting_text_wrapping', 200, 400) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Text', '#line-break-property', 'line-break')}}{{Spec2('CSS3 Text')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.line-break")}}

diff --git a/files/ja/web/css/overflow-wrap/index.html b/files/ja/web/css/overflow-wrap/index.html deleted file mode 100644 index 3d7387d243..0000000000 --- a/files/ja/web/css/overflow-wrap/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: overflow-wrap -slug: Web/CSS/overflow-wrap -tags: - - CSS - - CSS テキスト - - CSS プロパティ - - Reference -translation_of: Web/CSS/overflow-wrap ---- -
{{CSSRef}}
- -

overflow-wrap は CSS のプロパティで、インライン要素に対して、テキストが行ボックスをあふれないように、ブラウザーが不可分の文字列の途中で改行を入れるかどうかの設定を適用します。

- -
{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}
- - - -
-

メモ: {{cssxref("word-break")}} とは対照的に、 overflow-wrap は単語全体があふれずに行内に配置できない場合にのみ、改行を生成します。

-
- -

このプロパティはもともと、標準外かつ接頭辞のない word-wrap と呼ばれる Microsoft 拡張であり、多くのブラウザーはこの名前で実装していました。 overflow-wrap に改名されたため、 word-wrap は別名になりました。

- -

構文

- -
/* キーワード値 */
-overflow-wrap: normal;
-overflow-wrap: break-word;
-overflow-wrap: anywhere;
-
-/* グローバル値 */
-overflow-wrap: inherit;
-overflow-wrap: initial;
-overflow-wrap: unset;
-
- -

overflow-wrap プロパティは、下記の値一覧中の一つのキーワードで指定します。

- -

値

- -
-
normal
-
通常の単語の分割位置 (2つの単語の間の空白など) でのみ改行することを示します。
-
anywhere
-
あふれることを避けるために、行内にその他の分割可能な位置がない場合、その他の分割できない文字列 — 長い単語や URL — が任意の場所で分割されることがあります。分割位置にハイフン文字は挿入されません。コンテンツの最小固有寸法を計算する時には、単語分割によって導入された折り返し可能位置が考慮されます。
-
break-word
-
anywhere の値と同様に、行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割されますが、コンテンツの最小固有寸法を計算する時に、単語分割によって導入された折り返し可能位置が考慮されません。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

この例は、長い単語が分割されるときの overflow-wrap, word-break, and hyphens の結果を比較するものです。

- -

HTML

- -
<p>They say the fishing is excellent at
-  Lake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
-  though I've never been there myself. (<code>normal</code>)</p>
-<p>They say the fishing is excellent at
-  Lake <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
-  though I've never been there myself. (<code>overflow-wrap: anywhere</code>)</p>
-<p>They say the fishing is excellent at
-  Lake <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
-  though I've never been there myself. (<code>overflow-wrap: break-word</code>)</p>
-<p>They say the fishing is excellent at
-  Lake <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
-  though I've never been there myself. (<code>word-break</code>)</p>
-<p>They say the fishing is excellent at
-  Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
-  though I've never been there myself. (<code>hyphens</code>, without <code>lang</code> attribute)</p>
-<p lang="en">They say the fishing is excellent at
-  Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
-  though I've never been there myself. (<code>hyphens</code>, English rules)</p>
-<p class="hyphens" lang="de">They say the fishing is excellent at
-  Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
-  though I've never been there myself. (<code>hyphens</code>, German rules)</p>
-
- -

CSS

- -
p {
-   width: 13em;
-   margin: 2px;
-   background: gold;
-}
-
-.ow-anywhere {
-   overflow-wrap: anywhere;
-}
-
-.ow-break-word {
-   overflow-wrap: break-word;
-}
-
-.word-break {
-   word-break: break-all;
-}
-
-.hyphens {
-   hyphens: auto;
-}
-
- -

結果

- -

{{ EmbedLiveSample('Example', '100%', 260) }}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS3 Text', '#propdef-overflow-wrap', 'overflow-wrap') }}{{ Spec2('CSS3 Text') }}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.overflow-wrap")}}

- -

関連情報

- - diff --git a/files/ja/web/css/overflow-wrap/index.md b/files/ja/web/css/overflow-wrap/index.md new file mode 100644 index 0000000000..3d7387d243 --- /dev/null +++ b/files/ja/web/css/overflow-wrap/index.md @@ -0,0 +1,144 @@ +--- +title: overflow-wrap +slug: Web/CSS/overflow-wrap +tags: + - CSS + - CSS テキスト + - CSS プロパティ + - Reference +translation_of: Web/CSS/overflow-wrap +--- +
{{CSSRef}}
+ +

overflow-wrap は CSS のプロパティで、インライン要素に対して、テキストが行ボックスをあふれないように、ブラウザーが不可分の文字列の途中で改行を入れるかどうかの設定を適用します。

+ +
{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}
+ + + +
+

メモ: {{cssxref("word-break")}} とは対照的に、 overflow-wrap は単語全体があふれずに行内に配置できない場合にのみ、改行を生成します。

+
+ +

このプロパティはもともと、標準外かつ接頭辞のない word-wrap と呼ばれる Microsoft 拡張であり、多くのブラウザーはこの名前で実装していました。 overflow-wrap に改名されたため、 word-wrap は別名になりました。

+ +

構文

+ +
/* キーワード値 */
+overflow-wrap: normal;
+overflow-wrap: break-word;
+overflow-wrap: anywhere;
+
+/* グローバル値 */
+overflow-wrap: inherit;
+overflow-wrap: initial;
+overflow-wrap: unset;
+
+ +

overflow-wrap プロパティは、下記の値一覧中の一つのキーワードで指定します。

+ +

値

+ +
+
normal
+
通常の単語の分割位置 (2つの単語の間の空白など) でのみ改行することを示します。
+
anywhere
+
あふれることを避けるために、行内にその他の分割可能な位置がない場合、その他の分割できない文字列 — 長い単語や URL — が任意の場所で分割されることがあります。分割位置にハイフン文字は挿入されません。コンテンツの最小固有寸法を計算する時には、単語分割によって導入された折り返し可能位置が考慮されます。
+
break-word
+
anywhere の値と同様に、行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割されますが、コンテンツの最小固有寸法を計算する時に、単語分割によって導入された折り返し可能位置が考慮されません。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

この例は、長い単語が分割されるときの overflow-wrap, word-break, and hyphens の結果を比較するものです。

+ +

HTML

+ +
<p>They say the fishing is excellent at
+  Lake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>normal</code>)</p>
+<p>They say the fishing is excellent at
+  Lake <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>overflow-wrap: anywhere</code>)</p>
+<p>They say the fishing is excellent at
+  Lake <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>overflow-wrap: break-word</code>)</p>
+<p>They say the fishing is excellent at
+  Lake <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>word-break</code>)</p>
+<p>They say the fishing is excellent at
+  Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>hyphens</code>, without <code>lang</code> attribute)</p>
+<p lang="en">They say the fishing is excellent at
+  Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>hyphens</code>, English rules)</p>
+<p class="hyphens" lang="de">They say the fishing is excellent at
+  Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>hyphens</code>, German rules)</p>
+
+ +

CSS

+ +
p {
+   width: 13em;
+   margin: 2px;
+   background: gold;
+}
+
+.ow-anywhere {
+   overflow-wrap: anywhere;
+}
+
+.ow-break-word {
+   overflow-wrap: break-word;
+}
+
+.word-break {
+   word-break: break-all;
+}
+
+.hyphens {
+   hyphens: auto;
+}
+
+ +

結果

+ +

{{ EmbedLiveSample('Example', '100%', 260) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Text', '#propdef-overflow-wrap', 'overflow-wrap') }}{{ Spec2('CSS3 Text') }}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.overflow-wrap")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/tab-size/index.html b/files/ja/web/css/tab-size/index.html deleted file mode 100644 index ca89ae5ed3..0000000000 --- a/files/ja/web/css/tab-size/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: tab-size -slug: Web/CSS/tab-size -tags: - - CSS - - CSS Property - - CSS テキスト - - CSS プロパティ - - Experimental - - Reference -translation_of: Web/CSS/tab-size ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

CSS の tab-size プロパティは、タブ文字 (U+0009) の表示幅の指定に用います。

- -
/* <integer> 値 */
-tab-size: 4;
-tab-size: 0;
-
-/* <length> 値 */
-tab-size: 10px;
-tab-size: 2em;
-
-/* グローバル値 */
-tab-size: inherit;
-tab-size: initial;
-tab-size: unset;
-
- -

{{CSSInfo}}

- -

構文

- -

値

- -
-
{{CSSxRef("<integer>")}}
-
タブの空白文字の文字数です。正の数でなければなりません。
-
{{CSSxRef("<length>")}}
-
タブの幅です。正の数でなければなりません。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -
pre {
-  tab-size: 4; /* スペース 4 つ分となります */
-}
-
- -
pre {
-  tab-size: 0; /* インデント除去 */
-}
-
- -
pre {
-  tab-size: 2; /* タブの幅をスペース 2 個分に設定 */
-}
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Text', '#tab-size-property', 'tab-size')}}{{Spec2('CSS3 Text')}}初回定義
- -

ブラウザーの対応

- - - -

{{Compat("css.properties.tab-size")}}

- -

- -

関連情報

- - diff --git a/files/ja/web/css/tab-size/index.md b/files/ja/web/css/tab-size/index.md new file mode 100644 index 0000000000..ca89ae5ed3 --- /dev/null +++ b/files/ja/web/css/tab-size/index.md @@ -0,0 +1,96 @@ +--- +title: tab-size +slug: Web/CSS/tab-size +tags: + - CSS + - CSS Property + - CSS テキスト + - CSS プロパティ + - Experimental + - Reference +translation_of: Web/CSS/tab-size +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS の tab-size プロパティは、タブ文字 (U+0009) の表示幅の指定に用います。

+ +
/* <integer> 値 */
+tab-size: 4;
+tab-size: 0;
+
+/* <length> 値 */
+tab-size: 10px;
+tab-size: 2em;
+
+/* グローバル値 */
+tab-size: inherit;
+tab-size: initial;
+tab-size: unset;
+
+ +

{{CSSInfo}}

+ +

構文

+ +

値

+ +
+
{{CSSxRef("<integer>")}}
+
タブの空白文字の文字数です。正の数でなければなりません。
+
{{CSSxRef("<length>")}}
+
タブの幅です。正の数でなければなりません。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
pre {
+  tab-size: 4; /* スペース 4 つ分となります */
+}
+
+ +
pre {
+  tab-size: 0; /* インデント除去 */
+}
+
+ +
pre {
+  tab-size: 2; /* タブの幅をスペース 2 個分に設定 */
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Text', '#tab-size-property', 'tab-size')}}{{Spec2('CSS3 Text')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.tab-size")}}

+ +

+ +

関連情報

+ + diff --git a/files/ja/web/css/text-align-last/index.html b/files/ja/web/css/text-align-last/index.html deleted file mode 100644 index 09b63d62dd..0000000000 --- a/files/ja/web/css/text-align-last/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: text-align-last -slug: Web/CSS/text-align-last -tags: - - CSS - - CSS Property - - CSS テキスト - - Experimental - - Reference -translation_of: Web/CSS/text-align-last ---- -
{{CSSRef}}
- -

CSS の text-align-last プロパティは、ブロックの最後の行、あるいは強制的な改行の直前の行をどのように配置するかを設定します。

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

構文

- -
/* キーワード値 */
-text-align-last: auto;
-text-align-last: start;
-text-align-last: end;
-text-align-last: left;
-text-align-last: right;
-text-align-last: center;
-text-align-last: justify;
-
-/* グローバル値 */
-text-align-last: inherit;
-text-align-last: initial;
-text-align-last: unset;
-
- -

値

- -
-
auto
-
{{cssxref("text-align")}} の値と同じ方向に配置されます。ただし {{cssxref("text-align")}} が justify である場合は、text-align-last に start を設定した場合と同じ効果になります。
-
start
-
文章の記述方向が左から右であれば left、右から左であれば right と同じです。
-
end
-
文章の記述方向が左から右であれば right、右から左であれば left と同じです。
-
left
-
インライン要素は行ボックスの左端に配置されます。
-
right
-
インライン要素は行ボックスの右端に配置されます。
-
center
-
インラインコンテンツは行ボックスの中央に配置されます。
-
justify
-
テキストは行末揃えになります。テキストは段落の左端から右端までに配置されるでしょう。
-
- -

形式文法

- -{{csssyntax}} - -

例

- - - -
p {
-  font-size: 1.4em;
-  text-align: justify;
-  text-align-last: center;
-}
- -

{{EmbedLiveSample('Example','560')}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Text', '#text-align-last-property', 'text-align-last')}}{{Spec2('CSS3 Text')}}初回定義
- -
{{cssinfo}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/text-align-last/index.md b/files/ja/web/css/text-align-last/index.md new file mode 100644 index 0000000000..09b63d62dd --- /dev/null +++ b/files/ja/web/css/text-align-last/index.md @@ -0,0 +1,104 @@ +--- +title: text-align-last +slug: Web/CSS/text-align-last +tags: + - CSS + - CSS Property + - CSS テキスト + - Experimental + - Reference +translation_of: Web/CSS/text-align-last +--- +
{{CSSRef}}
+ +

CSS の text-align-last プロパティは、ブロックの最後の行、あるいは強制的な改行の直前の行をどのように配置するかを設定します。

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

構文

+ +
/* キーワード値 */
+text-align-last: auto;
+text-align-last: start;
+text-align-last: end;
+text-align-last: left;
+text-align-last: right;
+text-align-last: center;
+text-align-last: justify;
+
+/* グローバル値 */
+text-align-last: inherit;
+text-align-last: initial;
+text-align-last: unset;
+
+ +

値

+ +
+
auto
+
{{cssxref("text-align")}} の値と同じ方向に配置されます。ただし {{cssxref("text-align")}} が justify である場合は、text-align-last に start を設定した場合と同じ効果になります。
+
start
+
文章の記述方向が左から右であれば left、右から左であれば right と同じです。
+
end
+
文章の記述方向が左から右であれば right、右から左であれば left と同じです。
+
left
+
インライン要素は行ボックスの左端に配置されます。
+
right
+
インライン要素は行ボックスの右端に配置されます。
+
center
+
インラインコンテンツは行ボックスの中央に配置されます。
+
justify
+
テキストは行末揃えになります。テキストは段落の左端から右端までに配置されるでしょう。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ + + +
p {
+  font-size: 1.4em;
+  text-align: justify;
+  text-align-last: center;
+}
+ +

{{EmbedLiveSample('Example','560')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Text', '#text-align-last-property', 'text-align-last')}}{{Spec2('CSS3 Text')}}初回定義
+ +
{{cssinfo}}
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + 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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/text-indent/index.html b/files/ja/web/css/text-indent/index.html deleted file mode 100644 index 8deb5c87e4..0000000000 --- a/files/ja/web/css/text-indent/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: text-indent -slug: Web/CSS/text-indent -tags: - - CSS - - CSS テキスト - - CSS プロパティ - - Reference - - レイアウト -translation_of: Web/CSS/text-indent ---- -
{{CSSRef}}
- -

CSS の text-indent プロパティは、ブロック内のテキストの行の前に置く空白 (字下げ) の幅を設定します。

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

包含ブロック要素のコンテンツボックスの左端 (右書きの場合は右端) に、水平に空白が挿入されます。

- -

構文

- -
/* <length> 値 */
-text-indent: 3mm;
-text-indent: 40px;
-
-/* <percentage> 値
-   包含ブロックの幅に対する割合 */
-text-indent: 15%;
-
-/* Keyword values */
-text-indent: 5em each-line;
-text-indent: 5em hanging;
-text-indent: 5em hanging each-line;
-
-/* Global values */
-text-indent: inherit;
-text-indent: initial;
-text-indent: unset;
-
- -

値

- -
-
{{cssxref("<length>")}}
-
{{cssxref("<length>")}} を絶対値として字下げが指定されます。負の値も許可されます。利用できる単位は {{cssxref("<length>")}} をご覧ください。
-
{{cssxref("<percentage>")}}
-
包含ブロックの幅の {{cssxref("<percentage>")}} 分だけ字下げされます。
-
each-line {{experimental_inline}}
-
強制的な改行の後の各行も、ブロックコンテナーの先頭行と同様に字下げします。ただし自動折り返しの次の行はインデントしません。
-
hanging {{experimental_inline}}
-
インデントされる行が逆になります。つまり、先頭行以外のすべての行を字下げします。
-
- -

形式文法

- -{{csssyntax}} - -

単純なインデントの例

- -

HTML

- -
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
-<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
-
- -

CSS

- -
p {
-  text-indent: 5em;
-  background: powderblue;
-}
- -

{{ EmbedLiveSample('Simple_indent','100%','100%') }}

- -

パーセント表記のインデントの例

- -

HTML

- -
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
-<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
- -

CSS

- -
p {
-  text-indent: 30%;
-  background: plum;
-}
- -

{{ EmbedLiveSample('Percentage_indent_example','100%','100%') }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Text', '#text-indent-property', 'text-indent')}}{{Spec2('CSS3 Text')}}hanging と each-line キーワードを追加。
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}{{Spec2('CSS3 Transitions')}}text-indent がアニメーション可能に。
{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}{{Spec2('CSS2.1')}}display: inline-block と無名ブロックボックスの場合の動作が明確に定義されるようになりました。
{{SpecName('CSS1', '#text-indent', 'text-indent')}}{{Spec2('CSS1')}}Initial definition.
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

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

diff --git a/files/ja/web/css/text-indent/index.md b/files/ja/web/css/text-indent/index.md new file mode 100644 index 0000000000..8deb5c87e4 --- /dev/null +++ b/files/ja/web/css/text-indent/index.md @@ -0,0 +1,135 @@ +--- +title: text-indent +slug: Web/CSS/text-indent +tags: + - CSS + - CSS テキスト + - CSS プロパティ + - Reference + - レイアウト +translation_of: Web/CSS/text-indent +--- +
{{CSSRef}}
+ +

CSS の text-indent プロパティは、ブロック内のテキストの行の前に置く空白 (字下げ) の幅を設定します。

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

包含ブロック要素のコンテンツボックスの左端 (右書きの場合は右端) に、水平に空白が挿入されます。

+ +

構文

+ +
/* <length> 値 */
+text-indent: 3mm;
+text-indent: 40px;
+
+/* <percentage> 値
+   包含ブロックの幅に対する割合 */
+text-indent: 15%;
+
+/* Keyword values */
+text-indent: 5em each-line;
+text-indent: 5em hanging;
+text-indent: 5em hanging each-line;
+
+/* Global values */
+text-indent: inherit;
+text-indent: initial;
+text-indent: unset;
+
+ +

値

+ +
+
{{cssxref("<length>")}}
+
{{cssxref("<length>")}} を絶対値として字下げが指定されます。負の値も許可されます。利用できる単位は {{cssxref("<length>")}} をご覧ください。
+
{{cssxref("<percentage>")}}
+
包含ブロックの幅の {{cssxref("<percentage>")}} 分だけ字下げされます。
+
each-line {{experimental_inline}}
+
強制的な改行の後の各行も、ブロックコンテナーの先頭行と同様に字下げします。ただし自動折り返しの次の行はインデントしません。
+
hanging {{experimental_inline}}
+
インデントされる行が逆になります。つまり、先頭行以外のすべての行を字下げします。
+
+ +

形式文法

+ +{{csssyntax}} + +

単純なインデントの例

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+ +

CSS

+ +
p {
+  text-indent: 5em;
+  background: powderblue;
+}
+ +

{{ EmbedLiveSample('Simple_indent','100%','100%') }}

+ +

パーセント表記のインデントの例

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+ +

CSS

+ +
p {
+  text-indent: 30%;
+  background: plum;
+}
+ +

{{ EmbedLiveSample('Percentage_indent_example','100%','100%') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Text', '#text-indent-property', 'text-indent')}}{{Spec2('CSS3 Text')}}hanging と each-line キーワードを追加。
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}{{Spec2('CSS3 Transitions')}}text-indent がアニメーション可能に。
{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}{{Spec2('CSS2.1')}}display: inline-block と無名ブロックボックスの場合の動作が明確に定義されるようになりました。
{{SpecName('CSS1', '#text-indent', 'text-indent')}}{{Spec2('CSS1')}}Initial definition.
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

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

diff --git a/files/ja/web/css/text-justify/index.html b/files/ja/web/css/text-justify/index.html deleted file mode 100644 index 0c7a270d9f..0000000000 --- a/files/ja/web/css/text-justify/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -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")}}
- -

関連情報

- - diff --git a/files/ja/web/css/text-justify/index.md b/files/ja/web/css/text-justify/index.md new file mode 100644 index 0000000000..0c7a270d9f --- /dev/null +++ b/files/ja/web/css/text-justify/index.md @@ -0,0 +1,116 @@ +--- +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")}}
+ +

関連情報

+ + diff --git a/files/ja/web/css/text-transform/index.html b/files/ja/web/css/text-transform/index.html deleted file mode 100644 index ed7b49fb81..0000000000 --- a/files/ja/web/css/text-transform/index.html +++ /dev/null @@ -1,371 +0,0 @@ ---- -title: text-transform -slug: Web/CSS/text-transform -tags: - - CSS - - CSS Property - - Layout - - Reference - - Text - - 'recipe:css-property' - - 日本語処理 -translation_of: Web/CSS/text-transform ---- -
{{CSSRef}}
- -

CSS の text-transform プロパティは、要素のテキストを大文字表記する方法を指定します。テキストをすべて大文字にしたり、すべて小文字にしたり、各単語の先頭を大文字にしたりすることを指定します。フリガナの読みやすさを向上するのにも役立ちます。

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

text-transform プロパティは、以下のように言語固有の大文字・小文字の扱いを考慮します。

- - - -

言語は HTML の lang 属性や XML の xml:lang 属性で定義します。

- -
-

注: これらの特定のケースはブラウザーにより異なりますので、ブラウザーの互換性を確認してください。

-
- -

構文

- -
/* キーワード値 */
-text-transform: none;
-text-transform: capitalize;
-text-transform: uppercase;
-text-transform: lowercase;
-text-transform: full-width;
-text-transform: full-size-kana;
-
-/* グローバル値 */
-text-transform: inherit;
-text-transform: initial;
-text-transform: unset;
-
- -
-
capitalize
-
-

それぞれの単語の最初の文字を強制的に大文字に変換させるキーワードです。ほかの文字は変更しません。すなわち、要素のテキストで記載した元の表記を維持します。文字とは、文字または数字の一般カテゴリーの一部である任意の Unicode 文字です {{experimental_inline}}。単語の先頭にある句読点や記号は無視されます。

- -
capitalize が言語固有の先頭文字を大文字にする慣習 (英語で冠詞を除外するなど) に従うと期待するべきではありません。
- -
capitalize キーワードは CSS 1 及び CSS 2.1 で定義されていたものでした。この結果、最初の文字を計算する方法は、ブラウザーによって異なっていました (Firefox は - および _ を文字として捉えていましたが、他はそうではありませんでした。 Webkit 及び Gecko は ⓐ のような文字から作られた記号を、誤って文字として認識していました。 Internet Explorer 9 は最も CSS 2 の定義に近かったのですが、いくつかおかしいものがありました)。正しいふるまいを詳細に定義したので、 CSS Text Level 3 ではこれを一掃しました。ブラウザーの互換性表の capitalize の行は、それぞれのエンジンがこの詳細に定義された振る舞いに対応し始めたバージョンを記載しています。
-
-
uppercase
-
すべての文字を大文字に変換させるキーワードです。
-
lowercase
-
すべての文字を小文字に変換させるキーワードです。
-
none
-
すべての文字を変換させないキーワードです。
-
full-width
-
一般的な東アジアの文字 (中国語や日本語など) において、強制的に文字 — 主に記号やラテン文字 — を正方形の枠内に (全角で) 表記して、揃えて表示するキーワードです。
-
full-size-kana
-
このキーワードは一般に {{htmlelement("ruby")}} によるフリガナで使用され、すべての小文字の仮名文字を同等の大文字の仮名文字に変換することで、ルビで使われるフォントの大きさによる読みやすさの問題を解消します。
-
- -

アクセシビリティの考慮

- -

テキストの長い区間に text-transform の値を uppercase で設定すると、失読症のような認知障碍を持つ人にとって読むのが難しくなることがあります。

- - - -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

none

- -
<p>Initial String
-  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
-</p>
-<p>text-transform: none
-  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
-</p>
-
- -
span {
-  text-transform: none;
-}
-strong { float: right; }
- -

文字を変換しない例です。

- -

{{ EmbedLiveSample('none', '100%', '100px') }}

- -

capitalize (一般的)

- -
<p>Initial String
-  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
-</p>
-<p>text-transform: capitalize
-  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
-</p>
- -
span {
-  text-transform: capitalize;
-}
-strong { float: right; }
- -

頭文字を大文字にする例です。

- -

{{ EmbedLiveSample('capitalize_General', '100%', '100px') }}

- -

capitalize (句読点)

- -
<p>Initial String
-  <strong>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</strong>
-</p>
-<p>text-transform: capitalize
-  <strong><span>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</span></strong>
-</p>
- -
span {
-  text-transform: capitalize;
-}
-strong { float: right; }
- -

単語の前の区切り記号が無視される様子を示す例です。このキーワードは、文字または数字の一般カテゴリに含まれる Unicode 文字である、最初の文字が対象です。

- -

{{ EmbedLiveSample('capitalize_Punctuation', '100%', '100px') }}

- -

capitalize (記号)

- -
<p>Initial String
-  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
-</p>
-<p>text-transform: capitalize
-  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
-</p>
- -
span {
-  text-transform: capitalize;
-}
-strong { float: right; }
- -

頭文字の記号が無視されるかを示す例です。このキーワードは、文字または数字の一般カテゴリーに含まれる Unicode 文字である、最初の文字が対象です。

- -

{{ EmbedLiveSample('capitalize_Symbols', '100%', '100px') }}

- -

capitalize (オランダ語の二重音字 ij)

- -
<p>Initial String
-  <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong>
-</p>
-<p>text-transform: capitalize
-  <strong><span lang="nl">The Dutch word: "ijsland" starts with a digraph.</span></strong>
-</p>
- -
span {
-  text-transform: capitalize;
-}
-strong { float: right; }
- -

オランダ語の二重音字 ij を1文字として扱わなければならないことを示す例です。

- -

{{ EmbedLiveSample('capitalize_Dutch_ij_digraph', '100%', '100px') }}

- -

uppercase (一般的)

- -
<p>Initial String
-  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
-</p>
-<p>text-transform: uppercase
-  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
-</p>
- -
span {
-  text-transform: uppercase;
-}
-strong { float: right; }
- -

テキストを大文字に変換する例です。

- -

{{ EmbedLiveSample('uppercase_General', '100%', '100px') }}

- -

uppercase> (ギリシャ語の母音字)

- -
<p>Initial String
-  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
-</p>
-<p>text-transform: uppercase
-  <strong><span>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong>
-</p>
- -
span {
-  text-transform: uppercase;
-}
-strong { float: right; }
- -

離接的接続の eta を除くギリシャ語の母音字はアクセント記号を持たないこと、および二重母音の最初の文字のアクセント記号が 2 文字目の母音字のトレマになることを示す例です。

- -

{{ EmbedLiveSample('uppercase_Greek_Vowels', '100%', '100px') }}

- -

lowercase (一般的)

- -
<p>Initial String
-  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
-</p>
-<p>text-transform: lowercase
-  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
-</p>
- -
span {
-  text-transform: lowercase;
-}
-strong { float: right; }
- -

テキストを小文字に変換する例です。

- -

{{ EmbedLiveSample('lowercase_General', '100%', '100px') }}

- -

lowercase (ギリシャ文字 Σ)

- -
<p>Initial String
-  <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong>
-</p>
-<p>text-transform: lowercase
-  <strong><span>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span></strong>
-</p>
- -
span {
-  text-transform: lowercase;
-}
-strong { float: right; }
- -

ギリシャ文字のシグマ (Σ) が、状況に応じて一般的な小文字のシグマ (σ) または単語の末尾での表記 (ς) に変換される例です。

- -

{{ EmbedLiveSample('lowercase_Greek_Σ', '100%', '100px') }}

- -

lowercase (リヒテンシュタイン語)

- -
<p>Initial String
-  <strong>Ĩ is a Lithuanian LETTER as is J́</strong>
-</p>
-<p>text-transform: lowercase
-  <strong><span lang="lt">Ĩ is a Lithuanian LETTER as is J́</span></strong>
-</p>
- -
span {
-  text-transform: lowercase;
-}
-strong { float: right; }
- -

これはリヒテンシュタインの文字 Ĩ および J́ が小文字に変換されるとドットを保持する様子を示します。

- -

{{ EmbedLiveSample('lowercase_Lithuanian', '100%', '100px') }}

- -

full-width (一般)

- -
<p>Initial String
-  <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong>
-</p>
-<p>text-transform: full-width
-  <strong><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span></strong>
-</p>
- -
span {
-  text-transform: full-width;
-}
-strong { width: 100%; float: right; }
- -

一部の文字は半角と全角の 2 種類の表現があり、それらは別々の Unicode コードポイントを持ちます。全角文字は、アジア圏の表意文字と自然な形で混在させるために使用します。

- -

{{ EmbedLiveSample('full-width_General', '100%', '175px') }}

- -

full-width (日本語の半角カタカナ)

- -
<p>Initial String
-  <strong>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</strong>
-</p>
-<p>text-transform: full-width
-  <strong><span>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</span></strong>
-</p>
- -
span {
-  text-transform: full-width;
-}
-strong { width: 100%; float: right; }
- -

日本語の半角カタカナは、8ビットの文字コードでカタカナを表現するために使われていました。通常の (全角の) カタカナ文字とは異なり、濁点の付いた文字は、文字本体と濁点の2つのコードポイントで表現されます。 full-width は、これらの文字を全角に変換する際に、1つのコードポイントにまとめます。

- -

{{ EmbedLiveSample('full-width_Japanese_half-width_katakana', '100%', '175px') }}

- -

full-size-kana

- -
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
-<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
-</p>
- -
p:nth-of-type(2) {
-  text-transform: full-size-kana;
-}
- -

{{ EmbedLiveSample('full-size-kana', '100%', '175px') }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}{{Spec2('CSS3 Text')}}対象の文字を {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}} から、 Unicode の数字又は文字一般のカテゴリーに属するすべての文字に拡張。 capitalize の動作を、最初の区切り文字や記号を無視して単語の先頭の文字に適用するように変更。表意文字とアルファベット文字を自然な形で混在させるための full-width および full-size-kana キーワードを追加。
{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}{{Spec2('CSS2.1')}}対象の文字を {{SpecName('CSS1', '#text-transform', 'text-transform')}} から、2 種類の表記を持つ非ラテン文字に拡張。
{{SpecName('CSS1', '#text-transform', 'text-transform')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/text-transform/index.md b/files/ja/web/css/text-transform/index.md new file mode 100644 index 0000000000..ed7b49fb81 --- /dev/null +++ b/files/ja/web/css/text-transform/index.md @@ -0,0 +1,371 @@ +--- +title: text-transform +slug: Web/CSS/text-transform +tags: + - CSS + - CSS Property + - Layout + - Reference + - Text + - 'recipe:css-property' + - 日本語処理 +translation_of: Web/CSS/text-transform +--- +
{{CSSRef}}
+ +

CSS の text-transform プロパティは、要素のテキストを大文字表記する方法を指定します。テキストをすべて大文字にしたり、すべて小文字にしたり、各単語の先頭を大文字にしたりすることを指定します。フリガナの読みやすさを向上するのにも役立ちます。

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

text-transform プロパティは、以下のように言語固有の大文字・小文字の扱いを考慮します。

+ + + +

言語は HTML の lang 属性や XML の xml:lang 属性で定義します。

+ +
+

注: これらの特定のケースはブラウザーにより異なりますので、ブラウザーの互換性を確認してください。

+
+ +

構文

+ +
/* キーワード値 */
+text-transform: none;
+text-transform: capitalize;
+text-transform: uppercase;
+text-transform: lowercase;
+text-transform: full-width;
+text-transform: full-size-kana;
+
+/* グローバル値 */
+text-transform: inherit;
+text-transform: initial;
+text-transform: unset;
+
+ +
+
capitalize
+
+

それぞれの単語の最初の文字を強制的に大文字に変換させるキーワードです。ほかの文字は変更しません。すなわち、要素のテキストで記載した元の表記を維持します。文字とは、文字または数字の一般カテゴリーの一部である任意の Unicode 文字です {{experimental_inline}}。単語の先頭にある句読点や記号は無視されます。

+ +
capitalize が言語固有の先頭文字を大文字にする慣習 (英語で冠詞を除外するなど) に従うと期待するべきではありません。
+ +
capitalize キーワードは CSS 1 及び CSS 2.1 で定義されていたものでした。この結果、最初の文字を計算する方法は、ブラウザーによって異なっていました (Firefox は - および _ を文字として捉えていましたが、他はそうではありませんでした。 Webkit 及び Gecko は ⓐ のような文字から作られた記号を、誤って文字として認識していました。 Internet Explorer 9 は最も CSS 2 の定義に近かったのですが、いくつかおかしいものがありました)。正しいふるまいを詳細に定義したので、 CSS Text Level 3 ではこれを一掃しました。ブラウザーの互換性表の capitalize の行は、それぞれのエンジンがこの詳細に定義された振る舞いに対応し始めたバージョンを記載しています。
+
+
uppercase
+
すべての文字を大文字に変換させるキーワードです。
+
lowercase
+
すべての文字を小文字に変換させるキーワードです。
+
none
+
すべての文字を変換させないキーワードです。
+
full-width
+
一般的な東アジアの文字 (中国語や日本語など) において、強制的に文字 — 主に記号やラテン文字 — を正方形の枠内に (全角で) 表記して、揃えて表示するキーワードです。
+
full-size-kana
+
このキーワードは一般に {{htmlelement("ruby")}} によるフリガナで使用され、すべての小文字の仮名文字を同等の大文字の仮名文字に変換することで、ルビで使われるフォントの大きさによる読みやすさの問題を解消します。
+
+ +

アクセシビリティの考慮

+ +

テキストの長い区間に text-transform の値を uppercase で設定すると、失読症のような認知障碍を持つ人にとって読むのが難しくなることがあります。

+ + + +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

none

+ +
<p>Initial String
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+</p>
+<p>text-transform: none
+  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
+</p>
+
+ +
span {
+  text-transform: none;
+}
+strong { float: right; }
+ +

文字を変換しない例です。

+ +

{{ EmbedLiveSample('none', '100%', '100px') }}

+ +

capitalize (一般的)

+ +
<p>Initial String
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+</p>
+<p>text-transform: capitalize
+  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
+</p>
+ +
span {
+  text-transform: capitalize;
+}
+strong { float: right; }
+ +

頭文字を大文字にする例です。

+ +

{{ EmbedLiveSample('capitalize_General', '100%', '100px') }}

+ +

capitalize (句読点)

+ +
<p>Initial String
+  <strong>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</strong>
+</p>
+<p>text-transform: capitalize
+  <strong><span>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</span></strong>
+</p>
+ +
span {
+  text-transform: capitalize;
+}
+strong { float: right; }
+ +

単語の前の区切り記号が無視される様子を示す例です。このキーワードは、文字または数字の一般カテゴリに含まれる Unicode 文字である、最初の文字が対象です。

+ +

{{ EmbedLiveSample('capitalize_Punctuation', '100%', '100px') }}

+ +

capitalize (記号)

+ +
<p>Initial String
+  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
+</p>
+<p>text-transform: capitalize
+  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
+</p>
+ +
span {
+  text-transform: capitalize;
+}
+strong { float: right; }
+ +

頭文字の記号が無視されるかを示す例です。このキーワードは、文字または数字の一般カテゴリーに含まれる Unicode 文字である、最初の文字が対象です。

+ +

{{ EmbedLiveSample('capitalize_Symbols', '100%', '100px') }}

+ +

capitalize (オランダ語の二重音字 ij)

+ +
<p>Initial String
+  <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong>
+</p>
+<p>text-transform: capitalize
+  <strong><span lang="nl">The Dutch word: "ijsland" starts with a digraph.</span></strong>
+</p>
+ +
span {
+  text-transform: capitalize;
+}
+strong { float: right; }
+ +

オランダ語の二重音字 ij を1文字として扱わなければならないことを示す例です。

+ +

{{ EmbedLiveSample('capitalize_Dutch_ij_digraph', '100%', '100px') }}

+ +

uppercase (一般的)

+ +
<p>Initial String
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+</p>
+<p>text-transform: uppercase
+  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
+</p>
+ +
span {
+  text-transform: uppercase;
+}
+strong { float: right; }
+ +

テキストを大文字に変換する例です。

+ +

{{ EmbedLiveSample('uppercase_General', '100%', '100px') }}

+ +

uppercase> (ギリシャ語の母音字)

+ +
<p>Initial String
+  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
+</p>
+<p>text-transform: uppercase
+  <strong><span>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong>
+</p>
+ +
span {
+  text-transform: uppercase;
+}
+strong { float: right; }
+ +

離接的接続の eta を除くギリシャ語の母音字はアクセント記号を持たないこと、および二重母音の最初の文字のアクセント記号が 2 文字目の母音字のトレマになることを示す例です。

+ +

{{ EmbedLiveSample('uppercase_Greek_Vowels', '100%', '100px') }}

+ +

lowercase (一般的)

+ +
<p>Initial String
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+</p>
+<p>text-transform: lowercase
+  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
+</p>
+ +
span {
+  text-transform: lowercase;
+}
+strong { float: right; }
+ +

テキストを小文字に変換する例です。

+ +

{{ EmbedLiveSample('lowercase_General', '100%', '100px') }}

+ +

lowercase (ギリシャ文字 Σ)

+ +
<p>Initial String
+  <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong>
+</p>
+<p>text-transform: lowercase
+  <strong><span>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span></strong>
+</p>
+ +
span {
+  text-transform: lowercase;
+}
+strong { float: right; }
+ +

ギリシャ文字のシグマ (Σ) が、状況に応じて一般的な小文字のシグマ (σ) または単語の末尾での表記 (ς) に変換される例です。

+ +

{{ EmbedLiveSample('lowercase_Greek_Σ', '100%', '100px') }}

+ +

lowercase (リヒテンシュタイン語)

+ +
<p>Initial String
+  <strong>Ĩ is a Lithuanian LETTER as is J́</strong>
+</p>
+<p>text-transform: lowercase
+  <strong><span lang="lt">Ĩ is a Lithuanian LETTER as is J́</span></strong>
+</p>
+ +
span {
+  text-transform: lowercase;
+}
+strong { float: right; }
+ +

これはリヒテンシュタインの文字 Ĩ および J́ が小文字に変換されるとドットを保持する様子を示します。

+ +

{{ EmbedLiveSample('lowercase_Lithuanian', '100%', '100px') }}

+ +

full-width (一般)

+ +
<p>Initial String
+  <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong>
+</p>
+<p>text-transform: full-width
+  <strong><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span></strong>
+</p>
+ +
span {
+  text-transform: full-width;
+}
+strong { width: 100%; float: right; }
+ +

一部の文字は半角と全角の 2 種類の表現があり、それらは別々の Unicode コードポイントを持ちます。全角文字は、アジア圏の表意文字と自然な形で混在させるために使用します。

+ +

{{ EmbedLiveSample('full-width_General', '100%', '175px') }}

+ +

full-width (日本語の半角カタカナ)

+ +
<p>Initial String
+  <strong>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</strong>
+</p>
+<p>text-transform: full-width
+  <strong><span>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</span></strong>
+</p>
+ +
span {
+  text-transform: full-width;
+}
+strong { width: 100%; float: right; }
+ +

日本語の半角カタカナは、8ビットの文字コードでカタカナを表現するために使われていました。通常の (全角の) カタカナ文字とは異なり、濁点の付いた文字は、文字本体と濁点の2つのコードポイントで表現されます。 full-width は、これらの文字を全角に変換する際に、1つのコードポイントにまとめます。

+ +

{{ EmbedLiveSample('full-width_Japanese_half-width_katakana', '100%', '175px') }}

+ +

full-size-kana

+ +
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
+<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
+</p>
+ +
p:nth-of-type(2) {
+  text-transform: full-size-kana;
+}
+ +

{{ EmbedLiveSample('full-size-kana', '100%', '175px') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}{{Spec2('CSS3 Text')}}対象の文字を {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}} から、 Unicode の数字又は文字一般のカテゴリーに属するすべての文字に拡張。 capitalize の動作を、最初の区切り文字や記号を無視して単語の先頭の文字に適用するように変更。表意文字とアルファベット文字を自然な形で混在させるための full-width および full-size-kana キーワードを追加。
{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}{{Spec2('CSS2.1')}}対象の文字を {{SpecName('CSS1', '#text-transform', 'text-transform')}} から、2 種類の表記を持つ非ラテン文字に拡張。
{{SpecName('CSS1', '#text-transform', 'text-transform')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/white-space/index.html b/files/ja/web/css/white-space/index.html deleted file mode 100644 index f87e4ccb14..0000000000 --- a/files/ja/web/css/white-space/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -title: white-space -slug: Web/CSS/white-space -tags: - - CSS - - CSS テキスト - - CSS プロパティ - - Reference - - white-space -translation_of: Web/CSS/white-space ---- -
{{CSSRef}}
- -

CSS の white-space プロパティは、要素内の{{Glossary("whitespace", "ホワイトスペース")}}をどのように扱うかを設定します。

- -
{{EmbedInteractiveExample("pages/css/white-space.html")}}
- - - -
-

メモ: 要素の内部で折り返しを行うには、代わりに {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}} を使用してください。

-
- -

構文

- -
/* キーワード値 */
-white-space: normal;
-white-space: nowrap;
-white-space: pre;
-white-space: pre-wrap;
-white-space: pre-line;
-white-space: break-spaces;
-
-/* グローバル値 */
-white-space: inherit;
-white-space: initial;
-white-space: unset;
-
- -

white-space プロパティは、以下の値の一覧から選択した単一のキーワードで指定します。

- -

値

- -
-
normal
-
連続するホワイトスペースはまとめられます。ソース内の改行文字もホワイトスペースとして扱われます。行ボックスを埋めるために、必要なら行を折り返します。
-
nowrap
-
normal と同じくホワイトスペースを詰めますが、行の折り返しは行いません。
-
pre
-
連続するホワイトスペースはそのまま残され、行の折り返しは、ソース内の改行文字と、 {{HTMLElement("br")}} 要素でのみ行います。
-
pre-wrap
-
連続するホワイトスペースはそのまま残されます。行の折り返しは、改行文字や {{HTMLElement("br")}} 要素のあるときか、行ボックスを埋めるのに必要なときに行います。
-
pre-line
-
連続するホワイトスペースは詰められて 1 つになります。行の折り返しは、改行文字や {{HTMLElement("br")}} 要素のあるときか、行ボックスを埋めるのに必要なときに行われます。
-
break-spaces
-
下記の点を除いて、動作は pre-wrap と同じです。 -
    -
  • そのまま残された連続するホワイトスペースは、行末にあるものを含め、空間を占有します。
    • -
  • 残されたそれぞれのホワイトスペースの後で、ホワイトスペースの間を含め、改行する可能性があります。
    • -
  • そのような残された空白は空間を占有し、ぶら下がらず、ボックスの固有の寸法に (min-content size および max-content size に) 影響します。
    • -
-
-
- -

次の表に、white-space 値の動作をまとめます。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
改行空白とタブ文字テキストの折り返し行末の空白
normalまとめるまとめる折り返す除去
nowrapまとめるまとめる折り返さない除去
preそのままそのまま折り返さないそのまま
pre-wrapそのままそのまま折り返すぶら下げ
pre-lineそのまままとめる折り返す除去
break-spacesそのままそのまま折り返す折り返す
- -

形式文法

- -{{CSSSyntax}} - -

例

- -

基本的な例

- -
code {
-  white-space: pre;
-}
- -

<pre> 要素内での改行

- -
pre {
-  word-wrap: break-word;      /* IE 5.5-7 */
-  white-space: pre-wrap;      /* 現行ブラウザー */
-}
- -

操作して確認する

- - - -

ソース

- -
<p>    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
-    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-
-    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
- -

CSS を加えた結果

- -

{{EmbedLiveSample("See_it_in_action_LiveSample", "100%", 500)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Text", "#propdef-white-space", "white-space")}}{{Spec2("CSS3 Text")}}折り返しアルゴリズムの詳細を記述。
{{SpecName("CSS2.1", "text.html#white-space-prop", "white-space")}}{{Spec2("CSS2.1")}}初回定義
- -

{{CSSInfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.white-space")}}

- -

関連情報

- - diff --git a/files/ja/web/css/white-space/index.md b/files/ja/web/css/white-space/index.md new file mode 100644 index 0000000000..f87e4ccb14 --- /dev/null +++ b/files/ja/web/css/white-space/index.md @@ -0,0 +1,246 @@ +--- +title: white-space +slug: Web/CSS/white-space +tags: + - CSS + - CSS テキスト + - CSS プロパティ + - Reference + - white-space +translation_of: Web/CSS/white-space +--- +
{{CSSRef}}
+ +

CSS の white-space プロパティは、要素内の{{Glossary("whitespace", "ホワイトスペース")}}をどのように扱うかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/white-space.html")}}
+ + + +
+

メモ: 要素の内部で折り返しを行うには、代わりに {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}} を使用してください。

+
+ +

構文

+ +
/* キーワード値 */
+white-space: normal;
+white-space: nowrap;
+white-space: pre;
+white-space: pre-wrap;
+white-space: pre-line;
+white-space: break-spaces;
+
+/* グローバル値 */
+white-space: inherit;
+white-space: initial;
+white-space: unset;
+
+ +

white-space プロパティは、以下の値の一覧から選択した単一のキーワードで指定します。

+ +

値

+ +
+
normal
+
連続するホワイトスペースはまとめられます。ソース内の改行文字もホワイトスペースとして扱われます。行ボックスを埋めるために、必要なら行を折り返します。
+
nowrap
+
normal と同じくホワイトスペースを詰めますが、行の折り返しは行いません。
+
pre
+
連続するホワイトスペースはそのまま残され、行の折り返しは、ソース内の改行文字と、 {{HTMLElement("br")}} 要素でのみ行います。
+
pre-wrap
+
連続するホワイトスペースはそのまま残されます。行の折り返しは、改行文字や {{HTMLElement("br")}} 要素のあるときか、行ボックスを埋めるのに必要なときに行います。
+
pre-line
+
連続するホワイトスペースは詰められて 1 つになります。行の折り返しは、改行文字や {{HTMLElement("br")}} 要素のあるときか、行ボックスを埋めるのに必要なときに行われます。
+
break-spaces
+
下記の点を除いて、動作は pre-wrap と同じです。 +
    +
  • そのまま残された連続するホワイトスペースは、行末にあるものを含め、空間を占有します。
    • +
  • 残されたそれぞれのホワイトスペースの後で、ホワイトスペースの間を含め、改行する可能性があります。
    • +
  • そのような残された空白は空間を占有し、ぶら下がらず、ボックスの固有の寸法に (min-content size および max-content size に) 影響します。
    • +
+
+
+ +

次の表に、white-space 値の動作をまとめます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
改行空白とタブ文字テキストの折り返し行末の空白
normalまとめるまとめる折り返す除去
nowrapまとめるまとめる折り返さない除去
preそのままそのまま折り返さないそのまま
pre-wrapそのままそのまま折り返すぶら下げ
pre-lineそのまままとめる折り返す除去
break-spacesそのままそのまま折り返す折り返す
+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

基本的な例

+ +
code {
+  white-space: pre;
+}
+ +

<pre> 要素内での改行

+ +
pre {
+  word-wrap: break-word;      /* IE 5.5-7 */
+  white-space: pre-wrap;      /* 現行ブラウザー */
+}
+ +

操作して確認する

+ + + +

ソース

+ +
<p>    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+ +

CSS を加えた結果

+ +

{{EmbedLiveSample("See_it_in_action_LiveSample", "100%", 500)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Text", "#propdef-white-space", "white-space")}}{{Spec2("CSS3 Text")}}折り返しアルゴリズムの詳細を記述。
{{SpecName("CSS2.1", "text.html#white-space-prop", "white-space")}}{{Spec2("CSS2.1")}}初回定義
+ +

{{CSSInfo}}

+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.white-space")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/word-break/index.html b/files/ja/web/css/word-break/index.html deleted file mode 100644 index a315d8dd4a..0000000000 --- a/files/ja/web/css/word-break/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: word-break -slug: Web/CSS/word-break -tags: - - CSS - - CSS テキスト - - CSS プロパティ - - Reference - - 日本語処理 -translation_of: Web/CSS/word-break ---- -
{{CSSRef}}
- -

word-break は CSS のプロパティで、改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。

- -
{{EmbedInteractiveExample("pages/css/word-break.html")}}
- - - -

構文

- -
/* キーワード値 */
-word-break: normal;
-word-break: break-all;
-word-break: keep-all;
-word-break: break-word; /* 非推奨 */
-
-/* グローバル値 */
-word-break: inherit;
-word-break: initial;
-word-break: unset;
-
- -

word-break プロパティは、下記のリストの中から 1 つを選んで指定します。

- -

値

- -
-
normal
-
既定の改行規則を使用します。
-
break-all
-
CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようにします。 - -
-
keep-all
-
CJK テキストの改行を許可しません。 CJK 以外のテキストについては normal と同じ挙動となります。
-
break-word {{Deprecated_Inline}}
-
{{cssxref("overflow-wrap")}} プロパティの値とは関係なく、 word-break: normal や overflow-wrap: anywhere と同じ効果になります。
-
- -
-

メモ: word-break: break-word および overflow-wrap: break-word ({{cssxref("overflow-wrap")}} を参照) とは対照的に、 word-break: break-all はテキストがコンテナーからちょうどあふれたところで (単語全体を次の行に送れば途中で改行を防ぐことができる場合であっても) 位置で改行を生成します。

-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<p>1. <code>word-break: normal</code></p>
-<p class="normal narrow">This is a long and
- Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
- グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
-
-<p>2. <code>word-break: break-all</code></p>
-<p class="breakAll narrow">This is a long and
- Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
- グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
-
-<p>3. <code>word-break: keep-all</code></p>
-<p class="keepAll narrow">This is a long and
- Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
- グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
-
-<p>4. <code>word-break: break-word</code></p>
-<p class="breakWord narrow">This is a long and
-  Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
- グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
- -

CSS

- -
.narrow {
-  padding: 10px;
-  border: 1px solid;
-  width: 500px;
-  margin: 0 auto;
-  font-size: 20px;
-  line-height: 1.5;
-  letter-spacing: 1px;
-}
-
-.normal {
-  word-break: normal;
-}
-
-.breakAll {
-  word-break: break-all;
-}
-
-.keepAll {
-  word-break: keep-all;
-}
-
-.breakWord {
-  word-break: break-word;
-}
-
- -

{{EmbedLiveSample('Examples', '100%', 600)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Text', '#word-break-property', 'word-break')}}{{Spec2('CSS3 Text')}}初回定義
- -
{{cssinfo}}
- -

ブラウザーの互換性

- -

{{Compat("css.properties.word-break")}}

- -

関連情報

- - diff --git a/files/ja/web/css/word-break/index.md b/files/ja/web/css/word-break/index.md new file mode 100644 index 0000000000..a315d8dd4a --- /dev/null +++ b/files/ja/web/css/word-break/index.md @@ -0,0 +1,146 @@ +--- +title: word-break +slug: Web/CSS/word-break +tags: + - CSS + - CSS テキスト + - CSS プロパティ + - Reference + - 日本語処理 +translation_of: Web/CSS/word-break +--- +
{{CSSRef}}
+ +

word-break は CSS のプロパティで、改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。

+ +
{{EmbedInteractiveExample("pages/css/word-break.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+word-break: normal;
+word-break: break-all;
+word-break: keep-all;
+word-break: break-word; /* 非推奨 */
+
+/* グローバル値 */
+word-break: inherit;
+word-break: initial;
+word-break: unset;
+
+ +

word-break プロパティは、下記のリストの中から 1 つを選んで指定します。

+ +

値

+ +
+
normal
+
既定の改行規則を使用します。
+
break-all
+
CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようにします。 + +
+
keep-all
+
CJK テキストの改行を許可しません。 CJK 以外のテキストについては normal と同じ挙動となります。
+
break-word {{Deprecated_Inline}}
+
{{cssxref("overflow-wrap")}} プロパティの値とは関係なく、 word-break: normal や overflow-wrap: anywhere と同じ効果になります。
+
+ +
+

メモ: word-break: break-word および overflow-wrap: break-word ({{cssxref("overflow-wrap")}} を参照) とは対照的に、 word-break: break-all はテキストがコンテナーからちょうどあふれたところで (単語全体を次の行に送れば途中で改行を防ぐことができる場合であっても) 位置で改行を生成します。

+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<p>1. <code>word-break: normal</code></p>
+<p class="normal narrow">This is a long and
+ Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
+
+<p>2. <code>word-break: break-all</code></p>
+<p class="breakAll narrow">This is a long and
+ Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
+
+<p>3. <code>word-break: keep-all</code></p>
+<p class="keepAll narrow">This is a long and
+ Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
+
+<p>4. <code>word-break: break-word</code></p>
+<p class="breakWord narrow">This is a long and
+  Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
+ +

CSS

+ +
.narrow {
+  padding: 10px;
+  border: 1px solid;
+  width: 500px;
+  margin: 0 auto;
+  font-size: 20px;
+  line-height: 1.5;
+  letter-spacing: 1px;
+}
+
+.normal {
+  word-break: normal;
+}
+
+.breakAll {
+  word-break: break-all;
+}
+
+.keepAll {
+  word-break: keep-all;
+}
+
+.breakWord {
+  word-break: break-word;
+}
+
+ +

{{EmbedLiveSample('Examples', '100%', 600)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Text', '#word-break-property', 'word-break')}}{{Spec2('CSS3 Text')}}初回定義
+ +
{{cssinfo}}
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.word-break")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/word-spacing/index.html b/files/ja/web/css/word-spacing/index.html deleted file mode 100644 index 974320c478..0000000000 --- a/files/ja/web/css/word-spacing/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: word-spacing -slug: Web/CSS/word-spacing -tags: - - CSS - - CSS Text - - CSS テキスト - - CSS プロパティ - - Reference -translation_of: Web/CSS/word-spacing ---- -
{{CSSRef}}
- -

CSS の word-spacing プロパティは、タグや単語の間隔に関する挙動を指定します。

- -
{{EmbedInteractiveExample("pages/css/word-spacing.html")}}
- - - -

構文

- -
/* キーワード値 */
-word-spacing: normal;
-
-/* <length> 値 */
-word-spacing: 3px;
-word-spacing: 0.3em;
-
-/* <percentage> 値 */
-word-spacing: 50%;
-word-spacing: 200%;
-
-/* グローバル値 */
-word-spacing: inherit;
-word-spacing: initial;
-word-spacing: unset;
-
- -

値

- -
-
normal
-
現在のフォントやブラウザ―で定義された普通の単語の間隔です。
-
{{cssxref("length")}}
-
フォントによって定義された単語の間隔に追加する間隔を定義します。
-
{{cssxref("percentage")}}
-
文字の advance width を基準とした追加する間隔の量をパーセントで指定します。
-
- -

例

- -

HTML

- -
<div id="mozdiv1">Here are many words...</div>
-<div id="mozdiv2">...and many more!</div>
- -

CSS

- -
#mozdiv1 {
-  word-spacing: 15px;
-}
-
-#mozdiv2 {
-  word-spacing: 5em;
-}
- -

{{ EmbedLiveSample('Example') }}

- -

アクセシビリティの考慮事項

- -

word-spacing で大きな正の値や負の値を設定すると、スタイルが適用される文が読めなくなります。テキストをとても大きな正の値でスタイル付けすると、単語間が離れすぎて文として表示されなくなります。大きな負の数でスタイル付けすると、それぞれの単語の先頭と末尾が互いに重複して、理解できなくなります。

- -

フォントファミリによって文字の幅が異なるため、読みやすい word-spacing は場面によって検討する必要があります。すべてのフォントファミリで自動的に読みやすさを調整する単一の値はありません。

- - - -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{CSSSyntax}} - -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Text', '#propdef-word-spacing', 'word-spacing')}}{{Spec2('CSS3 Text')}}以前の値を、<spacing-limit> 値で置き換え。この値は、以前と同じ値か、追加された<percentage> 値か、もしくは、最適値・最小値・最大値を表す 3 つまでの値を使って定義します
{{SpecName('CSS2.1', 'text.html#propdef-word-spacing', 'word-spacing')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#word-spacing', 'word-spacing')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.word-spacing")}}

- -

関連情報

- - diff --git a/files/ja/web/css/word-spacing/index.md b/files/ja/web/css/word-spacing/index.md new file mode 100644 index 0000000000..974320c478 --- /dev/null +++ b/files/ja/web/css/word-spacing/index.md @@ -0,0 +1,125 @@ +--- +title: word-spacing +slug: Web/CSS/word-spacing +tags: + - CSS + - CSS Text + - CSS テキスト + - CSS プロパティ + - Reference +translation_of: Web/CSS/word-spacing +--- +
{{CSSRef}}
+ +

CSS の word-spacing プロパティは、タグや単語の間隔に関する挙動を指定します。

+ +
{{EmbedInteractiveExample("pages/css/word-spacing.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+word-spacing: normal;
+
+/* <length> 値 */
+word-spacing: 3px;
+word-spacing: 0.3em;
+
+/* <percentage> 値 */
+word-spacing: 50%;
+word-spacing: 200%;
+
+/* グローバル値 */
+word-spacing: inherit;
+word-spacing: initial;
+word-spacing: unset;
+
+ +

値

+ +
+
normal
+
現在のフォントやブラウザ―で定義された普通の単語の間隔です。
+
{{cssxref("length")}}
+
フォントによって定義された単語の間隔に追加する間隔を定義します。
+
{{cssxref("percentage")}}
+
文字の advance width を基準とした追加する間隔の量をパーセントで指定します。
+
+ +

例

+ +

HTML

+ +
<div id="mozdiv1">Here are many words...</div>
+<div id="mozdiv2">...and many more!</div>
+ +

CSS

+ +
#mozdiv1 {
+  word-spacing: 15px;
+}
+
+#mozdiv2 {
+  word-spacing: 5em;
+}
+ +

{{ EmbedLiveSample('Example') }}

+ +

アクセシビリティの考慮事項

+ +

word-spacing で大きな正の値や負の値を設定すると、スタイルが適用される文が読めなくなります。テキストをとても大きな正の値でスタイル付けすると、単語間が離れすぎて文として表示されなくなります。大きな負の数でスタイル付けすると、それぞれの単語の先頭と末尾が互いに重複して、理解できなくなります。

+ +

フォントファミリによって文字の幅が異なるため、読みやすい word-spacing は場面によって検討する必要があります。すべてのフォントファミリで自動的に読みやすさを調整する単一の値はありません。

+ + + +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{CSSSyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Text', '#propdef-word-spacing', 'word-spacing')}}{{Spec2('CSS3 Text')}}以前の値を、<spacing-limit> 値で置き換え。この値は、以前と同じ値か、追加された<percentage> 値か、もしくは、最適値・最小値・最大値を表す 3 つまでの値を使って定義します
{{SpecName('CSS2.1', 'text.html#propdef-word-spacing', 'word-spacing')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#word-spacing', 'word-spacing')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.word-spacing")}}

+ +

関連情報

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