diff options
Diffstat (limited to 'files/ja/web/css')
| -rw-r--r-- | files/ja/web/css/css_text/wrapping_text/index.md | 76 | ||||
| -rw-r--r-- | files/ja/web/css/hanging-punctuation/index.md | 132 | ||||
| -rw-r--r-- | files/ja/web/css/hyphens/index.md | 170 | ||||
| -rw-r--r-- | files/ja/web/css/letter-spacing/index.md | 147 | ||||
| -rw-r--r-- | files/ja/web/css/line-break/index.md | 122 | ||||
| -rw-r--r-- | files/ja/web/css/overflow-wrap/index.md | 158 | ||||
| -rw-r--r-- | files/ja/web/css/tab-size/index.md | 114 | ||||
| -rw-r--r-- | files/ja/web/css/text-align-last/index.md | 116 | ||||
| -rw-r--r-- | files/ja/web/css/text-align/index.md | 254 | ||||
| -rw-r--r-- | files/ja/web/css/text-indent/index.md | 232 | ||||
| -rw-r--r-- | files/ja/web/css/text-justify/index.md | 120 | ||||
| -rw-r--r-- | files/ja/web/css/text-transform/index.md | 491 | ||||
| -rw-r--r-- | files/ja/web/css/white-space/index.md | 328 | ||||
| -rw-r--r-- | files/ja/web/css/word-break/index.md | 140 | ||||
| -rw-r--r-- | files/ja/web/css/word-spacing/index.md | 128 |
15 files changed, 1346 insertions, 1382 deletions
diff --git a/files/ja/web/css/css_text/wrapping_text/index.md b/files/ja/web/css/css_text/wrapping_text/index.md new file mode 100644 index 0000000000..6eb219f74a --- /dev/null +++ b/files/ja/web/css/css_text/wrapping_text/index.md @@ -0,0 +1,76 @@ +--- +title: テキストの分割と折り返し +slug: Web/CSS/CSS_Text/Wrapping_Text +tags: + - CSS + - CSS テキスト + - Guide + - overflow + - overflow-wrap + - word-break +translation_of: Web/CSS/CSS_Text/Wrapping_Text +--- +{{CSSRef}} + +このガイドは CSS で管理することができるテキストのはみ出しの様々な方法を説明します。 + +## テキストのはみ出しとは + +CSS では、非常に長い単語などの切れない文字列がある場合、既定ではインライン方向に小さすぎるコンテナからはみ出します。下の例で、この現象を見ることができます。長い単語が、ボックスの境界を越えて伸びています。 + +{{EmbedGHLiveSample("css-examples/css-text/inline-overflow.html", '100%', 420)}} + +CSS はこのようにあふれて表示させますが、これは他の方法をとるとデータロスが発生するためです。CSS のデータロスとは、コンテンツの一部が消えてしまうことを意味します。そのため、{{cssxref("overflow")}}の初期値は `visible` であり、あふれたテキストを見ることができます。一般的には、あふれた部分はが汚くても見えた方が良いものです。`overflow` が `hidden` に設定されている場合のように、物が消えたり、トリミングされたりすると、サイトをプレビューしたときに気づかないかもしれません。汚くてもオーバーフローは、少なくとも簡単に見つけることができ、最悪、訪問者は多少奇妙に見えたとしてもコンテンツを見て読むことができます。 + +次の例では、 `overflow` が `hidden` に設定されている場合に何が起こるかを見てみましょう。 + +{{EmbedGHLiveSample("css-examples/css-text/inline-overflow-hidden.html", '100%', 420)}} + +## min-content の寸法を探る + +コンテンツを溢れずに含むことができるボックスの最小の寸法を探るには、そのボックスの {{cssxref("width")}} または {{cssxref("inline-size")}} プロパティに {{cssxref("min-content")}} を設定してください。 + +{{EmbedGHLiveSample("css-examples/css-text/min-content.html", '100%', 420)}} + +そのため、 `min-content` を使用すると、ボックスがあふれてしまう可能性があります。もし、ボックスがコンテンツに必要な最小の寸法まで成長し、それ以上大きくならないようにすることが可能であれば、このキーワードを使用することで、その寸法を得ることができます。 + +## 長い単語の分割 + +ボックスのサイズを固定する必要がある場合や、長い単語がはみ出さないようにしたい場合は、{{cssxref("overflow-wrap")}} プロパティが役立ちます。このプロパティは、単語が長すぎて 1 行に収まらない場合、その単語を分割します。 + +{{EmbedGHLiveSample("css-examples/css-text/overflow-wrap.html", '100%', 660)}} + +> **Note:** `overflow-wrap` プロパティは、標準外のプロパティの `word-wrap` と同じように動作します。 `word-wrap` プロパティは、現在ブラウザーでは標準プロパティの別名として扱われています。 + +別のプロパティとして、{{cssxref("word-break")}} を試すことができます。このプロパティは、あふれた時点で単語を改行します。単語を改行することで分割せずに表示できる場合でも分割されます。 + +次の例では、同じ文字列で 2 つのプロパティの違いを比較してみましょう。 + +{{EmbedGHLiveSample("css-examples/css-text/word-break.html", '100%', 700)}} + +これは、文字列に十分なスペースがある場合に、大きなギャップが現れないようにしたい場合に便利です。また、他の要素があって、その直後に改行させたくない場合にも便利です。 + +以下の例には、チェックボックスとラベルがあります。例えば、ラベルがボックスに対して長すぎる場合には、ラベルを改行したいとします。しかし、チェックボックスの直後では改行してほしくありません。 + +{{EmbedGHLiveSample("css-examples/css-text/word-break-checkbox.html", '100%', 660)}} + +## ハイフンの追加 + +単語が改行されるときにハイフンを追加するには、CSS の {{cssxref("hyphens")}} プロパティを使用します。`auto` の値を使用すると、ブラウザーは自由に選択したルールに従って、適切なハイフネーション位置で自動的に単語を区切ります。プロセスをある程度制御するには、値を `manual` にして、ハードまたはソフトブレイク文字を文字列に挿入します。ハードブレイク (`‐`) は、その必要がない場合でも、常に改行します。ソフトブレイク (``) は、改行が必要な場合にのみ改行します。 + +{{EmbedGHLiveSample("css-examples/css-text/hyphens.html", '100%', 660)}} + +## \<wbr> 要素 + +長い文字列を区切りたい場所がわかっている場合は、HTMLの {{HTMLElement("wbr")}} 要素を挿入することも可能です。これは、ページ上に長い URL を表示する場合などに便利です。このプロパティを追加することで、文字列を読みやすい場所で改行することができます。 + +以下の例では、{{HTMLElement("wbr")}} の位置でテキストが改行されています。 + +{{EmbedGHLiveSample("css-examples/css-text/wbr.html", '100%', 460)}} + +## 関連情報 +- HTML の {{HTMLElement("wbr")}} 要素 +- CSS の {{cssxref("word-break")}} プロパティ +- CSS の {{cssxref("overflow-wrap")}} プロパティ +- CSS の {{cssxref("hyphens")}} プロパティ +- [Overflow and Data Loss in CSS](https://www.smashingmagazine.com/2019/09/overflow-data-loss-css/) diff --git a/files/ja/web/css/hanging-punctuation/index.md b/files/ja/web/css/hanging-punctuation/index.md index 858ebb6b1c..5a23b7c2bc 100644 --- a/files/ja/web/css/hanging-punctuation/index.md +++ b/files/ja/web/css/hanging-punctuation/index.md @@ -4,7 +4,7 @@ slug: Web/CSS/hanging-punctuation tags: - CSS - CSS Property - - CSS Text + - CSS テキスト - CSS テキスト - CSS プロパティ - Experimental @@ -12,11 +12,12 @@ tags: - リファレンス translation_of: Web/CSS/hanging-punctuation --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>hanging-punctuation</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、区切り記号をテキストの行頭や行末にぶら下げるべきかどうかを指定します。ぶら下げられる区切り記号は行ボックスの外側に配置されれることがあります。</span></p> +**`hanging-punctuation`** は [CSS](/ja/docs/Web/CSS) のプロパティで、区切り記号をテキストの行頭や行末にぶら下げるべきかどうかを指定します。ぶら下げられる区切り記号は行ボックスの外側に配置されれることがあります。 -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ hanging-punctuation: none; hanging-punctuation: first; hanging-punctuation: last; @@ -37,86 +38,75 @@ hanging-punctuation: first allow-end last; /* グローバル値 */ hanging-punctuation: inherit; hanging-punctuation: initial; +hanging-punctuation: revert; hanging-punctuation: unset; -</pre> +``` + +## 構文 + +`hanging-punctuation` プロパティは 1 つ、2 つ、3 つの値で指定することができます。 + +- **値 1 つ**の構文は、下記の値リストのキーワード値のいずれか 1 つを使用します。 +- **値 2 つ**の構文は、次のうち 1 つを使用します。 -<p>{{CSSInfo}}</p> + - `first` と併せて、`last`, `allow-end`, `force-end` のいずれか + - `last` と併せて、`first`, `allow-end`, `force-end` のいずれか -<h2 id="Syntax" name="Syntax">構文</h2> +- **値 3 つ**の構文は、次のうち 1 つを使用します。 -<p><code>hanging-punctuation</code> プロパティは 1 つ、2 つ、 3 つの値で指定することができます。</p> + - `first`, `allow-end`, `last` + - `first`, `force-end`, `last` -<ul> - <li><strong>値1つ</strong>の構文は、下記の値リストのキーワード値のいずれか 1 つを使用します。</li> - <li><strong>値2つ</strong>の構文は、次のうち 1 つを使用します。 - <ul> - <li><code>first</code> と併せて、<code>last</code>, <code>allow-end</code>, <code>force-end</code> のいずれか</li> - <li><code>last</code> と併せて、<code>first</code>, <code>allow-end</code>, <code>force-end</code> のいずれか</li> - </ul> - </li> - <li><strong>値3つ</strong>の構文は、次のうち 1 つを使用します。 - <ul> - <li><code>first</code>, <code>allow-end</code>, <code>last</code></li> - <li><code>first</code>, <code>force-end</code>, <code>last</code></li> - </ul> - </li> -</ul> +### 値 -<h3 id="Values" name="Values">値</h3> +- `none` + - : 文字のぶら下げを行いません。 +- `first` + - : 要素の最初の書式設定された行頭にある、開き括弧または引用符をぶら下げます。 +- `last` + - : 要素の最後の書式設定された行末にある、閉じ括弧または引用符をぶら下げます。 +- `force-end` + - : 行末の句読点をぶら下げます。 +- `allow-end` + - : 句読点をぶら下げないと行末が揃わない場合に、句読点をぶら下げます。 -<dl> - <dt><code>none</code></dt> - <dd>文字のぶら下げを行いません。</dd> - <dt><code>first</code></dt> - <dd>要素の最初の書式設定された行頭にある、開き括弧または引用符をぶら下げます。</dd> - <dt><code>last</code></dt> - <dd>要素の最後の書式設定された行末にある、閉じ括弧または引用符をぶら下げます。</dd> - <dt><code>force-end</code></dt> - <dd>行末の句読点をぶら下げます。</dd> - <dt><code>allow-end</code></dt> - <dd>句読点をぶら下げないと行末が揃わない場合に、句読点をぶら下げます。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{cssinfo}} -{{CSSSyntax}} +## 形式文法 -<h2 id="Example" name="Example">例</h2> +{{csssyntax}} -<h3 id="HTML">HTML</h3> +## 例 -<pre class="brush: html notranslate" style="white-space: pre-wrap;"><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></pre> +<h3 id="Setting_opening_and_closing_quotes_to_hang">開始と終了の引用符をぶら下げるよう設定</h3> -<h3 id="CSS">CSS</h3> +#### HTML -<pre class="brush: css notranslate">p { +```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 + +```css +p { hanging-punctuation: first last; margin: .5rem; -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Text", "#hanging-punctuation-property", "hanging-punctuation")}}</td> - <td>{{Spec2("CSS3 Text")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.hanging-punctuation")}}</p> +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_opening_and_closing_quotes_to_hang")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +- [CSS Tricks: Hanging punctuation](https://css-tricks.com/almanac/properties/h/hanging-punctuation/) diff --git a/files/ja/web/css/hyphens/index.md b/files/ja/web/css/hyphens/index.md index 09965ce859..e3fde062ea 100644 --- a/files/ja/web/css/hyphens/index.md +++ b/files/ja/web/css/hyphens/index.md @@ -3,30 +3,29 @@ title: hyphens slug: Web/CSS/hyphens tags: - CSS - - CSS Property - - CSS テキスト - CSS プロパティ - - CSS 文字列 + - CSS テキスト - Reference + - recipe:css-property +browser-compat: css.properties.hyphens translation_of: Web/CSS/hyphens --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>hyphens</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、文字列を複数行にわたって折り返す際に、単語のハイフネーションを行う方法を指定します。</span>ハイフネーションをまったく行わなかったり、手動で指定された位置で文字列のハイフネーションを行ったり、ブラウザーに適切な位置にハイフンを挿入させたりすることができます。</p> +**`hyphens`** は [CSS](/ja/docs/Web/CSS) のプロパティで、文字列を複数行にわたって折り返す際に、単語のハイフネーションを行う方法を指定します。ハイフネーションをまったく行わなかったり、手動で指定された位置で文字列のハイフネーションを行ったり、ブラウザーに適切な位置にハイフンを挿入させたりすることができます。 -<div>{{EmbedInteractiveExample("pages/css/hyphens.html")}}</div> +{{EmbedInteractiveExample("pages/css/hyphens.html")}} -<div class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +> **Note:** 上記のデモでは、 "An extraordinarily long English word!" に非表示の `­` の文字が含まれており、 `An extra­ordinarily long English word!` のようになっています。この文字は `hyphens: manual;` が指定された場合にハイフンを挿入することができる位置を示しています。 -<p>ハイフネーションの規則は言語に依存します。 HTML では言語は <code><a href="/ja/docs/Web/HTML/Global_attributes/lang">lang</a></code> 属性で特定され、ブラウザーはこの属性が存在し、適切なハイフネーション辞書が利用できる場合にのみハイフネーションを行います。 XML では、 <code><a href="/ja/docs/Web/SVG/Attribute/xml:lang">xml:lang</a></code> 属性を使用する必要があります。</p> +ハイフネーションの規則は言語に依存します。 HTML では言語は [`lang`](/ja/docs/Web/HTML/Global_attributes/lang) 属性で特定され、ブラウザーはこの属性が存在し、適切なハイフネーション辞書が利用できる場合にのみハイフネーションを行います。 XML では、[`xml:lang`](/ja/docs/Web/SVG/Attribute/xml:lang) 属性を使用する必要があります。 -<div class="note"> -<p><strong>注:</strong> どのようにハイフネーションを行うかの規則は仕様書で明確に定義されていないため、厳密なハイフネーションの方式はブラウザーにより異なります。</p> -</div> +> **Note:** どのようにハイフネーションを行うかの規則は仕様書で明確に定義されていないため、厳密なハイフネーションの方式はブラウザーにより異なります。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ hyphens: none; hyphens: manual; hyphens: auto; @@ -34,64 +33,65 @@ hyphens: auto; /* グローバル値 */ hyphens: inherit; hyphens: initial; +hyphens: revert; hyphens: unset; -</pre> +``` -<p><code>hyphens</code> プロパティは、以下に挙げたキーワード値のうちの一つで指定します。</p> +`hyphens` プロパティは、以下に挙げたキーワード値のうちの一つで指定します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>none</code></dt> - <dd>単語内で分割が提案されている文字の位置であっても、改行で単語を分割しません。行はホワイトスペースの位置のみで折り返します。</dd> - <dt><code>manual</code></dt> - <dd>単語内で分割が提案されている文字の位置でのみ、行の折り返しで単語を分割します。詳しくは{{anch("Suggesting line break opportunities", "改行候補位置の提案")}}を参照してください。</dd> - <dt><code>auto</code></dt> - <dd>ブラウザーは自身が選択した規則に従って、ハイフネーションを行うのに適切な位置で自動的に単語を分割します。しかし、改行候補位置（{{anch("Suggesting line break opportunities", "改行候補位置の提案")}}を参照）があれば、自動的な改行位置の選択を上書きします。</dd> -</dl> +- `none` + - : 単語内で分割が提案されている文字の位置であっても、改行で単語を分割しません。行はホワイトスペースの位置のみで折り返します。 +- `manual` + - : 単語内で分割が提案されている文字の位置でのみ、行の折り返しで単語を分割します。詳しくは{{anch("改行候補位置の提案")}}を参照してください。 +- `auto` + - : ブラウザーは自身が選択した規則に従って、ハイフネーションを行うのに適切な位置で自動的に単語を分割します。しかし、改行候補位置 ({{anch("改行候補位置の提案")}}を参照) があれば、自動的な改行位置の選択を上書きします。 -<div class="note"> -<p><strong>メモ:</strong> <code>auto</code> を設定したときの動作は、正しくタグ付けされた言語に依存して、適切なハイフネーション規則が選択されます。選択した言語で自動的なハイフネーションが適用されるようにすることを保証するために、 HTML の <code>lang</code> 属性を必ず指定してください。</p> -</div> +> **Note:** `auto` を設定したときの動作は、正しくタグ付けされた言語に依存して、適切なハイフネーション規則が選択されます。選択した言語で自動的なハイフネーションが適用されるようにすることを保証するために、 HTML の `lang` 属性を必ず指定してください。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 改行候補位置の提案 -{{csssyntax}} +文字列中で改行が可能な位置を手動で指定するために使用できる Unicode 文字は 2 つあります。 -<h2 id="Suggesting_line_break_opportunities" name="Suggesting_line_break_opportunities">改行候補位置の提案</h2> +- U+2010 (HYPHEN) + - : 「ハード」ハイフン文字は、目に見える改行候補位置を示します。実際はその位置で改行されない場合でも、ハイフンが表示されます。 +- U+00AD (SHY) + - : 不可視の「ソフト」ハイフン ("**s**oft" **hy**phen) です。この文字は表示されませんが、ブラウザーが必要に応じて単語を分割できる位置を示します。 HTML では、 `­` を使用してソフトハイフンを挿入することができます。 -<p>文字列中で改行が可能な位置を手動で指定するために使用できる Unicode 文字は2つあります。</p> +> **Note:** HTML の [`<wbr>`](/ja/docs/Web/HTML/Element/wbr) 要素によって改行が行われた場合、ハイフンは挿入されません。 -<dl> - <dt>U+2010 (HYPHEN)</dt> - <dd>「ハード」ハイフン文字は、目に見える改行候補位置を示します。実際はその位置で改行されない場合でも、ハイフンが表示されます。</dd> - <dt>U+00AD (SHY)</dt> - <dd>不可視の「ソフト」ハイフン ("<strong>s</strong>oft" <strong>hy</strong>phen) です。この文字は表示されませんが、ブラウザーが必要に応じて単語を分割できる位置を示します。 HTML では、 <code>&shy;</code> を使用してソフトハイフンを挿入することができます。</dd> -</dl> +## 公式定義 + +{{cssinfo}} -<div class="blockIndicator note"> -<p>HTML の {{htmlelement("wbr")}} 要素によって改行が行われた場合、ハイフンは挿入されません。</p> -</div> +## 形式文法 -<h2 id="Example" name="Example">例</h2> +{{csssyntax}} -<p>以下の例では3つのクラスを使用し、それぞれの <code>hyphens</code> プロパティの設定を示します。</p> +## 例 -<h3 id="HTML">HTML</h3> +<h3 id="Specifying_text_hyphenation">テキストのハイフネーションの指定</h3> -<pre class="brush: html notranslate"><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> -</pre> +以下の例では 3 つのクラスを使用し、それぞれの `hyphens` プロパティの設定を示します。 -<h3 id="CSS">CSS</h3> +#### HTML -<pre class="brush: css notranslate">dd { +```html +<dl> + <dt><code>none</code>: no hyphen; overflow if needed</dt> + <dd lang="en" class="none">An extreme­ly long English word</dd> + <dt><code>manual</code>: hyphen only at &hyphen; or &shy; (if needed)</dt> + <dd lang="en" class="manual">An extreme­ly long English word</dd> + <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt> + <dd lang="en" class="auto">An extreme­ly long English word</dd> +</dl> +``` + +#### CSS + +```css +dd { width: 55px; border: 1px solid black; } @@ -110,45 +110,23 @@ dd.auto { -ms-hyphens: auto; hyphens: auto; } -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<figure> -<p>{{EmbedLiveSample("Example", "100%", 490)}}</p> -</figure> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}</td> - <td>{{Spec2("CSS3 Text")}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("css.properties.hyphens")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{Cssxref("content")}}</li> - <li>{{cssxref("overflow-wrap")}} (旧 <code>word-wrap</code>)</li> - <li>{{cssxref("word-break")}}</li> -</ul> +``` + +#### 例 + +{{EmbedLiveSample("Specifying_text_hyphenation", "100%", 490)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Cssxref("content")}} +- {{cssxref("overflow-wrap")}} (formerly `word-wrap`) +- {{cssxref("word-break")}} +- [テキストの分割と折り返しのガイド](/ja/docs/Web/CSS/CSS_Text/Wrapping_Text) diff --git a/files/ja/web/css/letter-spacing/index.md b/files/ja/web/css/letter-spacing/index.md index f16840257e..f354a9fcba 100644 --- a/files/ja/web/css/letter-spacing/index.md +++ b/files/ja/web/css/letter-spacing/index.md @@ -4,23 +4,22 @@ slug: Web/CSS/letter-spacing tags: - CSS - CSS Property - - CSS Text + - CSS テキスト - Reference - SVG - - 'recipe:css-property' -translation_of: Web/CSS/letter-spacing + - recipe:css-property +browser-compat: css.properties.letter-spacing --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>letter-spacing</code></strong> は<a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、テキストの水平方向の字間のスペースに関する挙動を設定します。この値はテキストを描画する際に文字間の自然な空間に追加されます。 <code>letter-spacing</code> が正の値であった場合は、文字と文字の間が開き、 <code>letter-spacing</code> が負の値であった場合は、文字と文字が互いに近づきます。</p> +**`letter-spacing`** は [CSS](/ja/docs/Web/CSS) のプロパティで、テキストの水平方向の字間のスペースに関する挙動を設定します。この値はテキストを描画する際に文字間の自然な空間に追加されます。 `letter-spacing` が正の値であった場合は、文字と文字の間が開き、 `letter-spacing` が負の値であった場合は、文字と文字が互いに近づきます。 -<div>{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}</div> +{{EmbedInteractiveExample("pages/css/letter-spacing.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ letter-spacing: normal; /* <length> 値 */ @@ -32,102 +31,74 @@ letter-spacing: .3px; letter-spacing: inherit; letter-spacing: initial; letter-spacing: unset; -</pre> +``` + +### 値 + +- `normal` + - : 現在のフォントでの通常の字間になります。 `0` の値とは異なり、この値は{{glossary("user agent", "ユーザーエージェント")}}が文字列を両端揃えするために字間を変えることを許可します。 +- {{cssxref("<length>")}} + - : 既定の字間に*加える*字間のスペースを指定します。負の値も指定可能ですが、実装に依存した制限があるかもしれません。ユーザーエージェントは文字列を両端揃えするために、字間スペースをさらに増減させることはありません。 -<h3 id="Values" name="Values">値</h3> +## アクセシビリティの考慮 -<dl> - <dt><code>normal</code></dt> - <dd>現在のフォントでの通常の字間になります。 <code>0</code> の値とは異なり、この値は{{glossary("user agent", "ユーザーエージェント")}}が文字列を両端揃えするために字間を変えることを許可します。</dd> - <dt>{{cssxref("<length>")}}</dt> - <dd>既定の字間に<em>加える</em>字間のスペースを指定します。負の値も指定可能ですが、実装に依存した制限があるかもしれません。ユーザーエージェントは文字列を両端揃えするために、字間スペースをさらに増減させることはありません。</dd> -</dl> +正と負のどちらでも、大きすぎる値を `letter-spacing` に指定すると読みづらくなってしまいます。正の値として大きすぎる場合、文字と文字が離れすぎるせいでひとつの単語ではなくバラバラの文字に見えてしまいます。負の値として大きすぎる場合、文字と文字が重なり合うために何が書いてあるのか分からなくなってしまいます。 -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティへの配慮</h2> +フォントの文字幅は種類ごとに異なるため、読みやすい letter-spacing もそれぞれ異なります。すべてのフォントで読みやすさを提供してくれる単一の設定値というものはありません。 -<p>正と負のどちらでも、大きすぎる値を <code>letter-spacing</code> に指定すると読みづらくなってしまいます。正の値として大きすぎる場合、文字と文字が離れすぎるせいでひとつの単語ではなくバラバラの文字に見えてしまいます。負の値として大きすぎる場合、文字と文字が重なり合うために何が書いてあるのか分からなくなってしまいます。</p> +- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) -<p>フォントの文字幅は種類ごとに異なるため、読みやすい letter-spacing もそれぞれ異なります。すべてのフォントで読みやすさを提供してくれる単一の設定値というものはありません。</p> +## 国際化の考慮 -<ul> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li> -</ul> +書き言葉の中には、字間のスペースを適用してはいけないものがあります。例えば、アラビア文字を使用する言語では、次の例のように、つながった文字が視覚的につながったままであることが求められます。字間スペースを適用すると、テキストが壊れたように見えてしまいます。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +> <p lang="ar" dir="rtl">شسيبتنمك</p> -<p>{{cssinfo}}</p> +## 公式定義 -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_letter_spacing" name="Setting_letter_spacing">字間の設定</h3> +<h3 id="Setting_letter_spacing">字間の設定</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><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> -</pre> +```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> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">.normal { letter-spacing: normal; } +```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; } -</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{ EmbedLiveSample('Setting_letter_spacing', 440, 185) }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>SVG での初回定義</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.letter-spacing")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("font-kerning")}}</li> -</ul> +``` + +#### 結果 + +{{ EmbedLiveSample('Setting_letter_spacing', 440, 185) }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("font-kerning")}} diff --git a/files/ja/web/css/line-break/index.md b/files/ja/web/css/line-break/index.md index 99fff450bd..187246d727 100644 --- a/files/ja/web/css/line-break/index.md +++ b/files/ja/web/css/line-break/index.md @@ -5,21 +5,23 @@ tags: - Asian - CSS - CSS Property - - CSS Text + - CSS テキスト - NeedsExample - Reference - i18n - l10n - - 'recipe:css-property' + - recipe:css-property - 日本語処理 - 禁則処理 +browser-compat: css.properties.line-break translation_of: Web/CSS/line-break --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>line-break</code></strong> は CSS のプロパティで、中国語、日本語、韓国語 (CJK) のテキストにおいて、句読点や記号を用いた場合の改行規則を設定します。</p> +**`line-break`** は CSS のプロパティで、中国語、日本語、韓国語 (CJK) のテキストにおいて、句読点や記号を用いた場合の改行規則 (禁則処理) を設定します。 -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ line-break: auto; line-break: loose; line-break: normal; @@ -29,86 +31,72 @@ line-break: anywhere; /* グローバル値 */ line-break: inherit; line-break: initial; +line-break: revert; line-break: unset; -</pre> +``` -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>auto</code></dt> - <dd>既定の改行規則を使用してテキストを改行します。</dd> - <dt><code>loose</code></dt> - <dd>最も制限の少ない改行規則を使用してテキストを改行します。一般的に、新聞などの短い行に使用されます。</dd> - <dt><code>normal</code></dt> - <dd>最も一般的な改行規則を使用してテキストを改行します。</dd> - <dt><code>strict</code></dt> - <dd>最も厳格な改行規則を使用してテキストを改行します。</dd> - <dt><code>anywhere</code></dt> - <dd> - <p>句読点や温存された空白、単語の途中も含め、すべての文字の間で折り返しできるようにし、 GL, WJ, ZWJ の文字クラスや、 {{cssxref("word-break")}} プロパティでもたらされる折り返しの禁止を一切無視します。どの折り返しの機会も優先されることはありません。ハイフネーションは適用されません。</p> - </dd> -</dl> +- `auto` + - : 既定の改行規則を使用してテキストを改行します。 +- `loose` + - : 最も制限の少ない改行規則を使用してテキストを改行します。一般的に、新聞などの短い行に使用されます。 +- `normal` + - : 最も一般的な改行規則を使用してテキストを改行します。 +- `strict` + - : 最も厳格な改行規則を使用してテキストを改行します。 +- `anywhere` + - : 句読点や温存された空白、単語の途中も含め、すべての文字の間で折り返しできるようにし、 GL, WJ, ZWJ の文字クラスや、 {{cssxref("word-break")}} プロパティでもたらされる折り返しの禁止を一切無視します。どの折り返しの機会も優先されることはありません。ハイフネーションは適用されません。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_text_wrapping" name="Setting_text_wrapping">テキストの折り返しの設定</h3> +<h3 id="Setting_text_wrapping">テキストの折り返しの設定</h3> -<p>"々", "ぁ", "。" の前で折り返しが行われるかどうかを確認してください。</p> +"々", "ぁ", "。" の前で折り返しが行われるかどうかを確認してください。 -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><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> -</pre> +```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> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">.wrapbox { width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; } +```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; } -</pre> - -<h4 id="Result">Result</h4> - -<p>{{ EmbedLiveSample('Setting_text_wrapping', 200, 400) }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text', '#line-break-property', 'line-break')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.line-break")}}</p> +``` + +#### 結果 + +{{ EmbedLiveSample('Setting_text_wrapping', 200, 400) }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +- [CSS and International text](https://www.w3.org/International/articles/css3-text/) diff --git a/files/ja/web/css/overflow-wrap/index.md b/files/ja/web/css/overflow-wrap/index.md index 3d7387d243..9c76cd9af0 100644 --- a/files/ja/web/css/overflow-wrap/index.md +++ b/files/ja/web/css/overflow-wrap/index.md @@ -6,25 +6,24 @@ tags: - CSS テキスト - CSS プロパティ - Reference + - recipe:css-property +browser-compat: css.properties.overflow-wrap translation_of: Web/CSS/overflow-wrap --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><code><strong>overflow-wrap</strong></code> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、インライン要素に対して、テキストが行ボックスをあふれないように、ブラウザーが不可分の文字列の途中で改行を入れるかどうかの設定を適用します。</p> +**`overflow-wrap`** は [CSS](/ja/docs/Web/CSS) のプロパティで、インライン要素に対して、テキストが行ボックスをあふれないように、ブラウザーが分割できない文字列の途中で改行を入れるかどうかの設定を適用します。 -<div>{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}</div> +{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +> **Note:** {{cssxref("word-break")}} とは対照的に、 `overflow-wrap` は単語全体があふれずに行内に配置できない場合にのみ、改行を生成します。 -<div class="note"> -<p><strong>メモ:</strong> {{cssxref("word-break")}} とは対照的に、 <code>overflow-wrap</code> は単語全体があふれずに行内に配置できない場合にのみ、改行を生成します。</p> -</div> +このプロパティはもともと、標準外かつ接頭辞のない `word-wrap` と呼ばれる Microsoft 拡張であり、多くのブラウザーはこの名前で実装していました。 `overflow-wrap` に改名されたため、 `word-wrap` は別名になりました。 -<p>このプロパティはもともと、標準外かつ接頭辞のない <code>word-wrap</code> と呼ばれる Microsoft 拡張であり、多くのブラウザーはこの名前で実装していました。 <code>overflow-wrap</code> に改名されたため、 <code>word-wrap</code> は別名になりました。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css">/* キーワード値 */ +```css +/* キーワード値 */ overflow-wrap: normal; overflow-wrap: break-word; overflow-wrap: anywhere; @@ -32,58 +31,65 @@ overflow-wrap: anywhere; /* グローバル値 */ overflow-wrap: inherit; overflow-wrap: initial; +overflow-wrap: revert; overflow-wrap: unset; -</pre> +``` + +`overflow-wrap` プロパティは、以下のうちの一つのキーワードで指定します。 -<p><code>overflow-wrap</code> プロパティは、下記の値一覧中の一つのキーワードで指定します。</p> +### 値 -<h3 id="Values" name="Values">値</h3> +- `normal` + - : 通常の単語の分割位置 (2 つの単語の間の空白など) でのみ改行することを示します。 +- `anywhere` + - : あふれることを避けるために、行内にその他の分割可能な位置がない場合、その他の分割できない文字列 — 長い単語や URL — が任意の場所で分割されることがあります。分割位置にハイフン文字は挿入されません。コンテンツの最小固有寸法を計算する時には、単語分割によって導入された折り返し可能位置が考慮されます。 +- `break-word` + - : `anywhere` の値と同様に、行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割されますが、コンテンツの最小固有寸法を計算する時に、単語分割によって導入された折り返し可能位置が考慮されません。 -<dl> - <dt><code>normal</code></dt> - <dd>通常の単語の分割位置 (2つの単語の間の空白など) でのみ改行することを示します。</dd> - <dt><code>anywhere</code></dt> - <dd>あふれることを避けるために、行内にその他の分割可能な位置がない場合、その他の分割できない文字列 — 長い単語や URL — が任意の場所で分割されることがあります。分割位置にハイフン文字は挿入されません。コンテンツの最小固有寸法を計算する時には、単語分割によって導入された折り返し可能位置が考慮されます。</dd> - <dt><code>break-word</code></dt> - <dd><code>anywhere</code> の値と同様に、行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割されますが、コンテンツの最小固有寸法を計算する時に、単語分割によって導入された折り返し可能位置が考慮されません。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> - -<p>この例は、長い単語が分割されるときの <code>overflow-wrap</code>, <code>word-break</code>, and <code>hyphens</code> の結果を比較するものです。</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: 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> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">p { +## 例 + +<h3 id="Comparing_overflow-wrap_word-break_and_hyphens">overflow-wrap, word-break, hyphens の比較</h3> + +この例は、長い単語が分割されるときの `overflow-wrap`, `word-break`, `hyphens` の結果を比較するものです。 + +#### HTML + +```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 + +```css +p { width: 13em; margin: 2px; background: gold; @@ -104,41 +110,23 @@ overflow-wrap: unset; .hyphens { hyphens: auto; } -</pre> - -<h3 id="Result" name="Result">結果</h3> +``` -<p>{{ EmbedLiveSample('Example', '100%', 260) }}</p> +#### 例 -<h2 id="Specifications" name="Specifications">仕様書</h2> +{{ EmbedLiveSample('Comparing_overflow-wrap_word-break_and_hyphens', '100%', 260) }} -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Text', '#propdef-overflow-wrap', 'overflow-wrap') }}</td> - <td>{{ Spec2('CSS3 Text') }}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +## 仕様書 -<p>{{cssinfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.overflow-wrap")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref("word-break")}}</li> - <li>{{cssxref("hyphens")}}</li> - <li>{{cssxref("text-overflow")}}</li> -</ul> +- {{cssxref("word-break")}} +- {{cssxref("hyphens")}} +- {{cssxref("text-overflow")}} +- [テキストの分割と折り返しのガイド](/ja/docs/Web/CSS/CSS_Text/Wrapping_Text) diff --git a/files/ja/web/css/tab-size/index.md b/files/ja/web/css/tab-size/index.md index ca89ae5ed3..31c387cac8 100644 --- a/files/ja/web/css/tab-size/index.md +++ b/files/ja/web/css/tab-size/index.md @@ -3,94 +3,106 @@ title: tab-size slug: Web/CSS/tab-size tags: - CSS - - CSS Property - - CSS テキスト - CSS プロパティ - - Experimental + - CSS テキスト - Reference + - recipe:css-property +browser-compat: css.properties.tab-size translation_of: Web/CSS/tab-size --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +{{CSSRef}} + +CSS の **`tab-size`** プロパティは、タブ文字 (U+0009) の表示幅の指定に用います。 -<p>CSS の <strong><code>tab-size</code></strong> プロパティは、タブ文字 (<code>U+0009</code>) の表示幅の指定に用います。</p> +## 構文 -<pre class="brush:css">/* <integer> 値 */ +```css +/* <integer> 値 */ tab-size: 4; tab-size: 0; -/* <length> 値 */ +/* <length> 値 */ tab-size: 10px; tab-size: 2em; /* グローバル値 */ tab-size: inherit; tab-size: initial; +tab-size: revert; tab-size: unset; -</pre> +``` -<p>{{CSSInfo}}</p> +### 値 -<h2 id="Syntax" name="Syntax">構文</h2> +- {{CSSxRef("<integer>")}} + - : タブの幅として使用される空白文字（U+0020）の幅の倍数です。正の数でなければなりません。 +- {{CSSxRef("<length>")}} + - : タブの幅です。正の数でなければなりません。 -<h3 id="Values" name="Values">値</h3> +## 公式定義 -<dl> - <dt>{{CSSxRef("<integer>")}}</dt> - <dd>タブの空白文字の文字数です。正の数でなければなりません。</dd> - <dt>{{CSSxRef("<length>")}}</dt> - <dd>タブの幅です。正の数でなければなりません。</dd> -</dl> +{{CSSInfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式文法 -{{csssyntax}} +{{CSSSyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<pre class="brush: css">pre { +### 文字数による展開 + +```css +pre { tab-size: 4; /* スペース 4 つ分となります */ } -</pre> +``` + +### タブの折り畳み -<pre class="brush: css">pre { +```css +pre { tab-size: 0; /* インデント除去 */ } -</pre> +``` + +<h3 id="Comparing_to_the_default_size">既定の大きさの比較</h3> -<pre class="brush: css">pre { - tab-size: 2; /* タブの幅をスペース 2 個分に設定 */ +この例では、既定のタブの大きさとカスタムのタブの大きさを比較しています。タブがつぶれないように、 {{cssxref("white-space")}} を `pre` に設定していることに注意してください。 + +#### HTML + +```html +<p>no tab</p> +<p>	default tab size of 8 characters wide</p> +<p class="custom">	custom tab size of 3 characters wide</p> +<p> 3 spaces, equivalent to the custom tab size</p> +``` + +#### CSS + +```css +p { + white-space: pre; } -</pre> -<h2 id="Specifications" name="Specifications">仕様書</h2> +.custom { + tab-size: 3; + -moz-tab-size: 3; +} +``` -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text', '#tab-size-property', 'tab-size')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +#### 結果 -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +{{EmbedLiveSample('Comparing_to_the_default_size')}} +## 仕様書 +{{Specifications}} -<p>{{Compat("css.properties.tab-size")}}</p> +## ブラウザーの互換性 -<p> </p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li><a class="external" href="https://lists.w3.org/Archives/Public/www-style/2008Dec/0009.html"><cite>Controlling size of a tab character (U+0009)</cite></a> - Anne van Kesteren 氏 (Opera) からの CSSWG へのメール</li> -</ul> +- [Controlling size of a tab character (U+0009)](https://lists.w3.org/Archives/Public/www-style/2008Dec/0009.html) - Anne van Kesteren 氏 (Opera) からの CSSWG へのメール diff --git a/files/ja/web/css/text-align-last/index.md b/files/ja/web/css/text-align-last/index.md index 09b63d62dd..96c69c2777 100644 --- a/files/ja/web/css/text-align-last/index.md +++ b/files/ja/web/css/text-align-last/index.md @@ -3,23 +3,24 @@ title: text-align-last slug: Web/CSS/text-align-last tags: - CSS - - CSS Property + - CSS プロパティ - CSS テキスト - Experimental - Reference + - recipe:css-property +browser-compat: css.properties.text-align-last translation_of: Web/CSS/text-align-last --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>CSS の <strong><code>text-align-last</code></strong> プロパティは、ブロックの最後の行、あるいは強制的な改行の直前の行をどのように配置するかを設定します。</p> +**`text-align-last`** は CSS のプロパティで、ブロックの最後の行、あるいは強制的な改行の直前の行をどのように配置するかを設定します。 -<div>{{EmbedInteractiveExample("pages/css/text-align-last.html")}}</div> +{{EmbedInteractiveExample("pages/css/text-align-last.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ text-align-last: auto; text-align-last: start; text-align-last: end; @@ -31,74 +32,65 @@ text-align-last: justify; /* グローバル値 */ text-align-last: inherit; text-align-last: initial; +text-align-last: revert; text-align-last: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>{{cssxref("text-align")}} の値と同じ方向に配置されます。ただし {{cssxref("text-align")}} が <code>justify</code> である場合は、<code>text-align-last</code> に <code>start</code> を設定した場合と同じ効果になります。</dd> - <dt><code>start</code></dt> - <dd>文章の記述方向が左から右であれば <code>left</code>、右から左であれば <code>right</code> と同じです。</dd> - <dt><code>end</code></dt> - <dd>文章の記述方向が左から右であれば <code>right</code>、右から左であれば <code>left</code> と同じです。</dd> - <dt><code>left</code></dt> - <dd>インライン要素は行ボックスの左端に配置されます。</dd> - <dt><code>right</code></dt> - <dd>インライン要素は行ボックスの右端に配置されます。</dd> - <dt><code>center</code></dt> - <dd>インラインコンテンツは行ボックスの中央に配置されます。</dd> - <dt><code>justify</code></dt> - <dd>テキストは行末揃えになります。テキストは段落の左端から右端までに配置されるでしょう。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +``` + +### 値 + +- `auto` + - : {{cssxref("text-align")}} の値と同じ方向に配置されます。ただし {{cssxref("text-align")}} が `justify` である場合は、`text-align-last` に `start` を設定した場合と同じ効果になります。 +- `start` + - : 書字方向が左書きであれば `left`、右書きであれば `right` と同じです。 +- `end` + - : 書字方向が左書きであれば `right`、右書きであれば `left` と同じです。 +- `left` + - : インラインコンテンツが行ボックスの左端に配置されます。 +- `right` + - : インラインコンテンツが行ボックスの右端に配置されます。 +- `center` + - : インラインコンテンツが行ボックスの中央に配置されます。 +- `justify` + - : テキストは両端揃えになります。テキストは段落の左端から右端までに配置されます。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +<h3 id="Justifying_the_last_line">最後の行を中央揃えにする</h3> + +```html hidden +<p>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> +``` -<div class="hidden"> -<pre class="brush: html"><p>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> -</pre> -</div> +#### CSS -<pre class="brush: css">p { +```css +p { font-size: 1.4em; text-align: justify; text-align-last: center; -}</pre> +} +``` -<p>{{EmbedLiveSample('Example','560')}}</p> +#### 結果s -<h2 id="Specifications" name="Specifications">仕様書</h2> +{{EmbedLiveSample('Justifying_the_last_line','560')}} -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text', '#text-align-last-property', 'text-align-last')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +## 仕様書 -<div>{{cssinfo}}</div> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.text-align-last")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref("text-align")}}</li> -</ul> +- {{cssxref("text-align")}} diff --git a/files/ja/web/css/text-align/index.md b/files/ja/web/css/text-align/index.md index 40f11c6cfa..51e7e5336a 100644 --- a/files/ja/web/css/text-align/index.md +++ b/files/ja/web/css/text-align/index.md @@ -3,30 +3,30 @@ title: text-align slug: Web/CSS/text-align tags: - CSS - - CSS Property - - CSS Text + - CSS プロパティ + - CSS テキスト - Reference - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.text-align translation_of: Web/CSS/text-align --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>text-align</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、ブロック要素または表セルボックスの水平方向の配置を設定します。つまり、 {{cssxref("vertical-align")}} のように、ただし水平方向に動作します。</p> +**`text-align`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ブロック要素または表セルボックスの水平方向の配置を設定します。つまり、 {{cssxref("vertical-align")}} のように、ただし水平方向に動作します。 -<div>{{EmbedInteractiveExample("pages/css/text-align.html")}}</div> +{{EmbedInteractiveExample("pages/css/text-align.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ +text-align: start; +text-align: end; 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; /* 表の列における文字ベースの配置 */ @@ -40,190 +40,140 @@ text-align: -webkit-center; /* グローバル値 */ text-align: inherit; text-align: initial; +text-align: revert; text-align: unset; -</pre> - -<p><code>text-align</code> プロパティは、以下の方法のうちの一つで指定されます。</p> - -<ul> - <li>キーワード値 <code><a href="#start">start</a></code>, <code><a href="#end">end</a></code>, <code><a href="#left">left</a></code>, <code><a href="#right">right</a></code>, <code><a href="#center">center</a></code>, <code><a href="#justify">justify</a></code>, <code><a href="#justify-all">justify-all</a></code>, <code><a href="#match-parent">match-parent</a></code> の使用。</li> - <li><code><a href="#string"><string></a></code> 値のみを使用、この場合は他の値の既定値が <code><a href="#right">right</a></code> になります。</li> - <li>キーワード値または <code><a href="#string"><string></a></code> 値の使用。</li> -</ul> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt id="start"><code>start</code> {{experimental_inline}}</dt> - <dd>書字方向が左から右であれば <code>left</code> と、右から左であれば <code>right</code> と同じです。</dd> - <dt id="end"><code>end</code> {{experimental_inline}}</dt> - <dd>書字方向が左から右であれば <code>right</code> と、右から左であれば <code>left</code> と同じです。</dd> - <dt id="left"><code>left</code></dt> - <dd>インラインコンテンツは行ボックスの左辺に寄せられます。</dd> - <dt id="right"><code>right</code></dt> - <dd>インラインコンテンツは行ボックスの右辺に寄せられます。</dd> - <dt id="center"><code>center</code></dt> - <dd>インラインコンテンツは行ボックス内で中央寄せされます。</dd> - <dt id="justify"><code>justify</code></dt> - <dd>インラインコンテンツは両端揃えされます。テキストは最終行を除いて、その左右の端が行ボックスの左右の端に揃うように間隔が空けられます。</dd> - <dt id="justify-all"><code>justify-all</code> {{experimental_inline}}</dt> - <dd><code>justify</code> と同じですが、最終行も強制的に両端揃えされます。</dd> - <dt id="match-parent"><code>match-parent</code> {{experimental_inline}}</dt> - <dd><code>inherit</code> に似ていますが、 <code>start</code> と <code>end</code> 値が親要素の {{cssxref("direction")}} に従って計算され、適切な <code>left</code> か <code>right</code> 値に置き換えられます。</dd> - <dt id="string">{{cssxref("<string>")}} {{experimental_inline}}</dt> - <dd>表のセルに適用された場合、セルのコンテンツが揃えられる位置揃え文字を指定します。</dd> -</dl> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> - -<p>両端揃えによって単語間の空白が不規則になると、失読症のような認知問題を抱えた人にとって問題になることがあります。</p> - -<ul> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html">Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{CSSInfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +``` + +`text-align` プロパティは、以下の方法のうちの一つで指定されます。 + + - キーワード値 `start`, `end`, `left`, `right`, `center`, `justify`, `justify-all`, `match-parent` のいずれかを使用。 + - `<string>` 値のみを使用、この場合は他の値の既定値が `right` になります。 + - キーワード値または [`<string>`](#string) 値の使用。 + +### 値 + +- `start` + - : 書字方向が左書きであれば `left`、右書きであれば `right` と同じです。 +- `end` + - : 書字方向が左書きであれば `right`、右書きであれば `left` と同じです。 +- `left` + - : インラインコンテンツは行ボックスの左辺に寄せられます。 +- `right` + - : インラインコンテンツは行ボックスの右辺に寄せられます。 +- `center` + - : インラインコンテンツは行ボックス内で中央寄せされます。 +- `justify` + - : インラインコンテンツは両端揃えされます。テキストは最終行を除いて、その左右の端が行ボックスの左右の端に揃うように間隔が空けられます。 +- `justify-all` {{experimental_inline}} + - : `justify` と同じですが、最終行も強制的に両端揃えされます。 +- `match-parent` + - : `inherit` に似ていますが、 `start` と `end` 値が親要素の {{cssxref("direction")}} に従って計算され、適切な `left` か `right` 値に置き換えられます。 +- {{cssxref("<string>")}} {{experimental_inline}} + - : 表のセルに適用された場合、セルのコンテンツが揃えられる位置揃え文字を指定します。 + +## アクセシビリティの考慮 + +両端揃えによって単語間の空白が不規則になると、失読症のような認知問題を抱えた人にとって問題になることがあります。 + +- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## Examples -<h3 id="Left_alignment" name="Left_alignment">左揃え</h3> +<h3 id="Start_alignment">先頭へ配置</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><p class="example"> +```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></pre> +</p> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css; highlight:[2] notranslate">.example { - text-align: left; +```css +.example { + text-align: start; border: solid; -}</pre> +} +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Left_alignment","100%","100%")}}</p> +{{EmbedLiveSample("Start_alignment","100%","100%")}} -<h3 id="Centered_text" name="Centered_text">中央揃え</h3> +<h3 id="Centered_text">中央揃え</h3> -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><p class="example"> +```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></pre> +</p> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css; highlight:[2] notranslate">.example { +```css +.example { text-align: center; border: solid; -}</pre> +} +``` -<h4 id="Result_2" name="Result_2">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Centered_text","100%","100%")}}</p> +{{EmbedLiveSample("Centered_text","100%","100%")}} -<h3 id="Justify" name="Justify">両端揃え</h3> +<h3 id="Justify">両端揃え</h3> -<h4 id="HTML_3">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><p class="example"> +```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></pre> +</p> +``` -<h4 id="CSS_3">CSS</h4> +#### CSS -<pre class="brush: css; highlight:[2] notranslate">.example { +```css +.example { text-align: justify; border: solid; -}</pre> +} +``` -<h4 id="Result_3" name="Result_3">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Justify","100%","100%")}}</p> +{{EmbedLiveSample("Justify","100%","100%")}} -<h3 id="Notes" name="Notes">注</h3> +## 仕様書 -<p>インラインコンテンツを中央揃えせずにブロック自体を中央揃えする標準互換の方法は、次のように、 left 及び right {{cssxref("margin")}} を <code>auto</code> に設定することです。</p> +{{Specifications}} -<pre class="brush: css notranslate">.something { - margin: auto; -} -</pre> +## ブラウザーの互換性 -<pre class="brush: css notranslate">.something { - margin: 0 auto; -} -</pre> +{{Compat}} -<pre class="brush: css notranslate">.something { - margin-left: auto; - margin-right: auto; -} -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Logical Properties', '#text-align', 'text-align')}}</td> - <td>{{Spec2('CSS Logical Properties')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS4 Text', '#alignment', 'text-align')}}</td> - <td>{{Spec2('CSS4 Text')}}</td> - <td><code><string></code> 値を追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td><code>start</code> と <code>end</code>、<code>match-parent</code> キーワードを追加。名前のなかった初期値を（まさにそれである）<code>start</code> に変更。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#text-align', 'text-align')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.text-align")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{Cssxref("margin","margin: auto")}}, {{Cssxref("margin-left","margin-left: auto")}}, {{Cssxref("vertical-align")}}</li> -</ul> +## 関連情報 + +- {{Cssxref("margin","margin: auto")}}, {{Cssxref("margin-left","margin-left: auto")}}, {{Cssxref("vertical-align")}} diff --git a/files/ja/web/css/text-indent/index.md b/files/ja/web/css/text-indent/index.md index 8deb5c87e4..95e5a0fa47 100644 --- a/files/ja/web/css/text-indent/index.md +++ b/files/ja/web/css/text-indent/index.md @@ -3,29 +3,32 @@ title: text-indent slug: Web/CSS/text-indent tags: - CSS - - CSS テキスト - CSS プロパティ - - Reference + - CSS テキスト + - 字下げ - レイアウト + - Reference + - recipe:css-property + - text-indent +browser-compat: css.properties.text-indent translation_of: Web/CSS/text-indent --- -<div>{{CSSRef}}</div> - -<p>CSS の <strong><code>text-indent</code></strong> プロパティは、ブロック内のテキストの行の前に置く空白 (字下げ) の幅を設定します。</p> +{{CSSRef}} -<div>{{EmbedInteractiveExample("pages/css/text-indent.html")}}</div> +**`text-indent`** は CSS のプロパティで、ブロック内のテキストの行の前に置く空白 (字下げ) の幅を設定します。 -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +{{EmbedInteractiveExample("pages/css/text-indent.html")}} -<p>包含ブロック要素のコンテンツボックスの左端 (右書きの場合は右端) に、水平に空白が挿入されます。</p> +包含ブロック要素のコンテンツボックスの左端 (右書きの場合は右端) に、水平に空白が挿入されます。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css">/* <length> 値 */ +```css +/* <length> 値 */ text-indent: 3mm; text-indent: 40px; -/* <percentage> 値 +/* <percentage> 値 包含ブロックの幅に対する割合 */ text-indent: 15%; @@ -37,99 +40,156 @@ text-indent: 5em hanging each-line; /* Global values */ text-indent: inherit; text-indent: initial; +text-indent: revert; text-indent: unset; -</pre> +``` -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt>{{cssxref("<length>")}}</dt> - <dd>{{cssxref("<length>")}} を絶対値として字下げが指定されます。負の値も許可されます。利用できる単位は {{cssxref("<length>")}} をご覧ください。</dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>包含ブロックの幅の {{cssxref("<percentage>")}} 分だけ字下げされます。</dd> - <dt><code>each-line</code> {{experimental_inline}}</dt> - <dd><strong>強制的な改行</strong>の後の各行も、ブロックコンテナーの先頭行と同様に字下げします。ただし<strong>自動折り返し</strong>の次の行はインデントしません。</dd> - <dt><code>hanging</code> {{experimental_inline}}</dt> - <dd>インデントされる行が逆になります。つまり、先頭行<strong>以外の</strong>すべての行を字下げします。</dd> -</dl> +- {{cssxref("<length>")}} + - : {{cssxref("<length>")}} を絶対値として字下げが指定されます。負の値も許可されます。利用できる単位は {{cssxref("<length>")}} をご覧ください。 +- {{cssxref("<percentage>")}} + - : 包含ブロックの幅の {{cssxref("<percentage>")}} 分だけ字下げされます。 +- `each-line` {{experimental_inline}} + - : *強制的な改行*の後の各行も、ブロックコンテナーの先頭行と同様に字下げします。ただし*自動折り返し*の次の行は字下げしません。 +- `hanging` {{experimental_inline}} + - : インデントされる行が逆になります。つまり、先頭行*以外の*すべての行を字下げします。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Simple_indent" name="Simple_indent">単純なインデントの例</h2> +## 例 -<h3 id="HTML">HTML</h3> +<h2 id="Simple_indent">単純なインデントの例</h2> -<pre class="brush: 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> -</pre> +#### HTML -<h3 id="CSS">CSS</h3> +```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> +``` -<pre class="brush: css">p { +#### CSS + +```css +p { text-indent: 5em; background: powderblue; -}</pre> +} +``` + +#### 結果 + +{{ EmbedLiveSample('Simple_indent','100%','100%') }} + +<h3 id="Skipping_indentation_on_the_first_paragraph">最初の段落の字下げをスキップ</h3> + +段落の字下げがある場合の一般的な組版では、最初の段落の字下げを省略します。_The Chicago Manual of Style_ によると、「中間見出しに続くテキストの最初の行は、完全に左端から始めてもよいし、通常の段落の字下げで字下げしてもよい」とされています。 + +最初の段落とそれ以降の段落を別扱いにするには、次の例のように[隣接兄弟結合子](/ja/docs/Web/CSS/Adjacent_sibling_combinator)を使います。 + +#### HTML + +```html +<h2>Lorem ipsum</h2> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu +venenatis quam. Vivamus euismod eleifend metus vitae pharetra. In vel tempor metus. +Donec dapibus feugiat euismod. Vivamus interdum tellus dolor. Vivamus blandit eros +et imperdiet auctor. Mauris sapien nunc, condimentum a efficitur non, elementum ac +sapien. Cras consequat turpis non augue ullamcorper, sit amet porttitor dui +interdum.</p> + +<p>Sed laoreet luctus erat at rutrum. Proin velit metus, luctus in sapien in, +tincidunt mattis ex. Praesent venenatis orci at sagittis eleifend. Nulla facilisi. +In feugiat vehicula magna iaculis vehicula. Nulla suscipit tempor odio a semper. +Donec vitae dapibus ipsum. Donec libero purus, convallis eu efficitur id, pulvinar +elementum diam. Maecenas mollis blandit placerat. Ut gravida pellentesque nunc, in +eleifend ante convallis sit amet.</p> -<p>{{ EmbedLiveSample('Simple_indent','100%','100%') }}</p> +<h2>Donec ullamcorper elit nisl</h2> -<h2 id="Percentage_indent_example" name="Percentage_indent_example">パーセント表記のインデントの例</h2> +<p>Donec ullamcorper elit nisl, sagittis bibendum massa gravida in. Fusce +tempor in ante gravida iaculis. Integer posuere tempor metus. Vestibulum lacinia, +nunc et dictum viverra, urna massa aliquam tellus, id mollis sem velit vestibulum +nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames +ac turpis egestas. Donec vulputate leo ut iaculis ultrices. Cras egestas rhoncus +lorem. Nunc blandit tempus lectus, rutrum hendrerit orci eleifend id. Ut at quam +velit.</p> -<h3 id="HTML_2">HTML</h3> +<p>Aenean rutrum tempor ligula, at luctus ligula auctor vestibulum. Sed +sollicitudin velit in leo fringilla sollicitudin. Proin eu gravida arcu. Nam +iaculis malesuada massa, eget aliquet turpis sagittis sed. Sed mollis tellus ac +dui ullamcorper, nec lobortis diam pellentesque. Quisque dapibus accumsan libero, +sed euismod ipsum ullamcorper sed.</p> +``` -<pre class="brush: 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></pre> +#### CSS -<h3 id="CSS_2">CSS</h3> +```css +p { + text-align: justify; + margin: 1em 0 0 0; +} +p + p { + text-indent: 2em; + margin: 0; +} +``` -<pre class="brush: css">p { +#### 結果 + +{{ EmbedLiveSample('Skipping_indentation_on_the_first_paragraph','','500px') }} + +<h3 id="Percentage_indent">パーセント値の字下げ</h3> + +#### HTML + +```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 + +```css +p { text-indent: 30%; background: plum; -}</pre> - -<p>{{ EmbedLiveSample('Percentage_indent_example','100%','100%') }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text', '#text-indent-property', 'text-indent')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td><code>hanging</code> と <code>each-line</code> キーワードを追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}</td> - <td>{{Spec2('CSS3 Transitions')}}</td> - <td><code>text-indent</code> がアニメーション可能に。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td><code>display: inline-block</code> と無名ブロックボックスの場合の動作が明確に定義されるようになりました。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#text-indent', 'text-indent')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.text-indent")}}</p> +} +``` + +#### 結果 + +{{ EmbedLiveSample('Percentage_indent','100%','100%') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS を使用した HTML のスタイル付け](/ja/docs/Learn/CSS) +- 関連する CSS プロパティ: + + - [`text-justify`](/ja/docs/Web/CSS/text-justify) + - [`text-orientation`](/ja/docs/Web/CSS/text-orientation) + - [`text-overflow`](/ja/docs/Web/CSS/text-overflow) + - [`text-rendering`](/ja/docs/Web/CSS/text-rendering) + - [`text-transform`](/ja/docs/Web/CSS/text-transform) + +- [CSS テキスト装飾](/ja/docs/Web/CSS/CSS_Text_Decoration) CSS モジュール +- [CSS テキスト](/ja/docs/Web/CSS/CSS_Text) モジュール diff --git a/files/ja/web/css/text-justify/index.md b/files/ja/web/css/text-justify/index.md index 0c7a270d9f..13781819fe 100644 --- a/files/ja/web/css/text-justify/index.md +++ b/files/ja/web/css/text-justify/index.md @@ -3,59 +3,69 @@ title: text-justify slug: Web/CSS/text-justify tags: - CSS - - CSS テキスト - CSS プロパティ + - CSS テキスト - Reference + - recipe:css-property - text-justify +browser-compat: css.properties.text-justify translation_of: Web/CSS/text-justify --- -<div>{{CSSRef}}</div> +{{CSSRef}} + +**`text-justify`** は CSS のプロパティで、要素に {{cssxref("text-align")}}`: justify;` が設定された時にテキストに適用される両端揃えの種類を設定します。 -<p>CSS の <strong><code>text-justify</code></strong> プロパティは、要素に {{cssxref("text-align")}}<code>: justify;</code> が設定された時にテキストに適用される両端揃えの種類を設定します。</p> +## 構文 -<pre class="brush: css no-line-numbers">text-justify: none; +```css +text-justify: none; text-justify: auto; text-justify: inter-word; text-justify: inter-character; text-justify: distribute; /* 非推奨の値 */ -</pre> -<div>{{cssinfo}}</div> +/* Global values */ +text-justify: inherit; +text-justify: initial; +text-justify: revert; +text-justify: unset; +``` -<h2 id="Syntax" name="Syntax">構文</h2> +### 値 -<p><code>text-justify</code> プロパティは、以下の値のリストのうち一つのキーワードで指定します。</p> +- `none` + - : テキストの両端揃えは行われません。これは {{cssxref("text-align")}} をまったく設定しない場合と同様の効果を持ちますが、何らかの理由で両端揃えを有効または無効にする必要があるときに便利です。 +- `auto` + - : ブラウザーは性能と品質の釣り合いに基づいて、テキストの言語 (例えば英語か、日本語か、中国語かなど) に最も適切なものは何かも加味して、現在の状況のために最適な種類の揃え方を選択します。これは `text-justify` をまったく設定しない場合に使われる既定の揃え方です。 +- `inter-word` + - : 単語間に間隔を挿入する (事実上 {{cssxref("word-spacing")}} を変化させる) ことでテキストを揃えるもので、これは英語や韓国語のように、空白で単語を区切る言語に最も適しています。 +- `inter-character` + - : 文字間に間隔を挿入する (事実上 {{cssxref("letter-spacing")}} を変化させる) ことでテキストを揃えるもので、これは日本語のような言語に最も適しています。 +- `distribute` {{deprecated_inline}} + - : `inter-character` と同じ動作を見せます。この値は後方互換性のためのものです。 -<h3 id="Values" name="Values">値</h3> +## 公式定義 -<dl> - <dt><code>none</code></dt> - <dd>テキストの両端揃えは行われません。これは {{cssxref("text-align")}} をまったく設定しない場合と同様の効果を持ちますが、何らかの理由で両端揃えを有効または無効にする必要があるときに便利です。</dd> - <dt><code>auto</code></dt> - <dd>ブラウザーは性能と品質の釣り合いに基づいて、テキストの言語 (例えば英語か、日本語か、中国語かなど) に最も適切なものは何かも加味して、現在の状況のために最適な種類の揃え方を選択します。これは <code>text-justify</code> をまったく設定しない場合に使われる既定の揃え方です。</dd> - <dt><code>inter-word</code></dt> - <dd>単語間に間隔を挿入する (事実上 {{cssxref("word-spacing")}} を変化させる) ことでテキストを揃えるもので、これは英語や韓国語のように、空白で単語を区切る言語に最も適しています。</dd> - <dt><code>inter-character</code></dt> - <dd>文字間に間隔を挿入する (事実上 {{cssxref("letter-spacing")}} を変化させる) ことでテキストを揃えるもので、これは日本語のような言語に最も適しています。</dd> - <dt><code>distribute</code> {{deprecated_inline}}</dt> - <dd><code>inter-character</code> と同じ動作を見せます。この値は後方互換性のためのものです。</dd> -</dl> +{{CSSInfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式文法 -{{CSSSyntax}} +{{csssyntax}} <h2 id="Examples" name="Examples">例</h2> -<div class="hidden"> -<pre class="brush: html"><p class="none"><code>text-justify: none</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> -<p class="auto"><code>text-justify: auto</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> -<p class="dist"><code>text-justify: distribute</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> -<p class="word"><code>text-justify: inter-word</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> -<p class="char"><code>text-justify: inter-character</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p></pre> -</div> +### text-justify の様々な値のデモ -<pre class="brush: css">p { +```html hidden +<p class="none"><code>text-justify: none</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> +<p class="auto"><code>text-justify: auto</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> +<p class="dist"><code>text-justify: distribute</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> +<p class="word"><code>text-justify: inter-word</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> +<p class="char"><code>text-justify: inter-character</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> +``` + +```css +p { font-size: 1.5em; border: 1px solid black; padding: 10px; @@ -82,35 +92,19 @@ text-justify: distribute; /* 非推奨の値 */ .char { text-justify: inter-character; -}</pre> - -<div>{{EmbedLiveSample("Examples","100%",400)}}</div> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<div>{{Compat("css.properties.text-justify")}}</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("text-align")}}</li> -</ul> +} +``` + +{{EmbedLiveSample("Examples","100%",400)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("text-align")}} diff --git a/files/ja/web/css/text-transform/index.md b/files/ja/web/css/text-transform/index.md index ed7b49fb81..805e6c2cee 100644 --- a/files/ja/web/css/text-transform/index.md +++ b/files/ja/web/css/text-transform/index.md @@ -3,52 +3,38 @@ title: text-transform slug: Web/CSS/text-transform tags: - CSS - - CSS Property - - Layout + - CSS プロパティ + - CSS テキスト + - レイアウト - Reference - - Text - - 'recipe:css-property' + - recipe:css-property - 日本語処理 +browser-compat: css.properties.text-transform translation_of: Web/CSS/text-transform --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>CSS の <strong><code>text-transform</code></strong> プロパティは、要素のテキストを大文字表記する方法を指定します。テキストをすべて大文字にしたり、すべて小文字にしたり、各単語の先頭を大文字にしたりすることを指定します。フリガナの読みやすさを向上するのにも役立ちます。</p> +**`text-transform`** は CSS のプロパティで、要素のテキストを大文字表記する方法を指定します。テキストをすべて大文字にしたり、すべて小文字にしたり、各単語の先頭を大文字にしたりすることを指定します。フリガナの読みやすさを向上するのにも役立ちます。 -<div>{{EmbedInteractiveExample("pages/css/text-transform.html")}}</div> +{{EmbedInteractiveExample("pages/css/text-transform.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +`text-transform` プロパティは、以下のように言語固有の大文字小文字の扱いを考慮します。 -<p><code>text-transform</code> プロパティは、以下のように言語固有の大文字・小文字の扱いを考慮します。</p> +- トルコ語 (`tr`)、アゼルバイジャン語 (`az`)、クリミア・タタール語 (`crh`)、ヴォルガ・タタール語 (`tt`)、バシキール語 (`ba`) などのチュルク語族にはドットの有無が異なる 2 種類の `i` があり、大文字・小文字のペアも `i`/`İ` と `ı`/`I` の 2 組があります。 +- ドイツ語 (`de`) では、`ß` の大文字が `SS` になります。 +- オランダ語 (`nl`) では二重音字 `ij` が、単語の最初の文字のみ大文字にする `text-transform: capitalize` を指定しても `IJ` になります。 +- ギリシャ語 (`el`) では離接的接続のエータ (`ή`/`Ή`) を除き、単語全体が大文字であるときに母音のアクセント記号がなくなります (`ά`/`Α`)。また、1 文字目にアクセント記号がある二重母音はアクセント記号がなくなり、2 文字目の母音にトレマがつきます (`άι`/`ΑΪ`)。 +- ギリシャ語 (`el`) で、小文字のシグマは `σ` と `ς` の 2 種類あります。`ς` は、単語の末尾にあるシグマに限り使用します。大文字のシグマ (`Σ`) に `text-transform: lowercase` を適用すると、ブラウザーは状況に応じて正しい小文字を選択しなければなりません。 +- アイルランド語 (`ga`) では、頭文字が大文字化されていても特定の接頭辞文字が小文字のままになります。例えば `text-transform: uppercase` は `ar aon tslí` を、予想される `AR AON TSLÍ ` ではなく `AR AON tSLÍ` にします (Firefox に限る)。大文字化によりハイフンが削除される場合もあり、`an t-uisce` は `AN tUISCE ` になります (また、`text-transform: lowercase` ではハイフンが適切に再挿入されます)。 -<ul> - <li> - <p>トルコ語 (<code>tr</code>)、アゼルバイジャン語 (<code>az</code>)、クリミア・タタール語 (<code>crh</code>)、ヴォルガ・タタール語 (<code>tt</code>)、バシキール語 (<code>ba</code>) などのチュルク語族にはドットの有無が異なる 2 種類の <code>i</code> があり、大文字・小文字のペアも <code>i</code>/<code>İ</code> と <code>ı</code>/<code>I</code> の 2 組があります。</p> - </li> - <li> - <p>ドイツ語 (<code>de</code>) では、<code>ß</code> の大文字が <code>SS</code> になります。</p> - </li> - <li> - <p>オランダ語 (<code>nl</code>) では二重音字 <code>ij</code> が、単語の最初の文字のみ大文字にする <code>text-transform: capitalize</code> を指定しても <code>IJ</code> になります。</p> - </li> - <li> - <p>ギリシャ語 (<code>el</code>) では離接的接続のエータ (<code>ή</code>/<code>Ή</code>) を除き、単語全体が大文字であるときに母音のアクセント記号がなくなります (<code>ά</code>/<code>Α</code>)。また、1 文字目にアクセント記号がある二重母音はアクセント記号がなくなり、2 文字目の母音にトレマがつきます (<code>άι</code>/<code>ΑΪ</code>)。</p> - </li> - <li> - <p>ギリシャ語 (<code>el</code>) で、小文字のシグマは <code>σ</code> と <code>ς</code> の 2 種類あります。<code>ς</code> は、単語の末尾にあるシグマに限り使用します。大文字のシグマ (<code>Σ</code>) に <code>text-transform: lowercase</code> を適用すると、ブラウザーは状況に応じて正しい小文字を選択しなければなりません。</p> - </li> - <li>アイルランド語 (<code>ga</code>) では、頭文字が大文字化されていても特定の接頭辞文字が小文字のままになります。例えば <code>text-transform: uppercase</code> は <code>ar aon tslí</code> を、予想される <code>AR AON TSLÍ </code> ではなく <code>AR AON tSLÍ</code> にします (Firefox に限る)。大文字化によりハイフンが削除される場合もあり、<code>an t-uisce</code> は <code>AN tUISCE </code> になります (また、<code>text-transform: lowercase</code> ではハイフンが適切に再挿入されます)。</li> -</ul> +言語は HTML の [`lang`](/ja/docs/Web/HTML/Global_attributes/lang) 属性や XML の [`xml:lang`](/ja/docs/Web/SVG/Attribute/xml:lang) 属性で定義します。 -<p>言語は HTML の <code><a href="/ja/docs/Web/HTML/Global_attributes/lang">lang</a></code> 属性や XML の <code><a href="/ja/docs/Web/SVG/Attribute/xml:lang">xml:lang</a></code> 属性で定義します。</p> +> **Note:** これらの特定のケースはブラウザーにより異なりますので、[ブラウザーの互換性一覧表](#browser_compatibility)を確認してください。 -<div class="note"> -<p><strong>注:</strong> これらの特定のケースはブラウザーにより異なりますので、<a href="#Browser_compatibility">ブラウザーの互換性</a>を確認してください。</p> -</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ text-transform: none; text-transform: capitalize; text-transform: uppercase; @@ -59,313 +45,334 @@ text-transform: full-size-kana; /* グローバル値 */ text-transform: inherit; text-transform: initial; +text-transform: revert; text-transform: unset; -</pre> +``` + +- `capitalize` + + - : それぞれの単語の最初の*文字*を強制的に大文字に変換させるキーワードです。ほかの文字は変更しません。すなわち、要素のテキストで記載した元の表記を維持します。文字とは、文字または数字の一般カテゴリーの一部である任意の Unicode 文字です {{experimental_inline}}。単語の先頭にある句読点や記号は無視されます。 -<dl> - <dt><code>capitalize</code></dt> - <dd> - <p>それぞれの単語の最初の<em>文字</em>を強制的に大文字に変換させるキーワードです。ほかの文字は変更しません。すなわち、要素のテキストで記載した元の表記を維持します。文字とは、文字または数字の一般カテゴリーの一部である任意の Unicode 文字です {{experimental_inline}}。単語の先頭にある句読点や記号は無視されます。</p> + > **Note:** `capitalize` が言語固有の先頭文字を大文字にする慣習 (英語で冠詞を除外するなど) に従うと期待するべきではありません。 - <div class="note"><code>capitalize</code> が言語固有の先頭文字を大文字にする慣習 (英語で冠詞を除外するなど) に従うと期待するべきではありません。</div> + > **Note:** `capitalize` キーワードは CSS 1 および CSS 2.1 で定義されていたものでした。この結果、最初の文字を計算する方法は、ブラウザーによって異なっていました (Firefox は `-` および `_` を文字として捉えていましたが、他はそうではありませんでした。 Webkit 及び Gecko は `ⓐ` のような文字から作られた記号を、誤って文字として認識していました。 Internet Explorer 9 は最も CSS 2 の定義に近かったのですが、いくつかおかしいものがありました)。正しいふるまいを詳細に定義したので、 CSS Text Level 3 ではこれを一掃しました。ブラウザーの互換性表の `capitalize` の行は、それぞれのエンジンがこの詳細に定義された振る舞いに対応し始めたバージョンを記載しています。 - <div class="note"><code>capitalize</code> キーワードは CSS 1 及び CSS 2.1 で定義されていたものでした。この結果、最初の文字を計算する方法は、ブラウザーによって異なっていました (Firefox は <code>-</code> および <code>_</code> を文字として捉えていましたが、他はそうではありませんでした。 Webkit 及び Gecko は <code>ⓐ</code> のような文字から作られた記号を、誤って文字として認識していました。 Internet Explorer 9 は最も CSS 2 の定義に近かったのですが、いくつかおかしいものがありました)。正しいふるまいを詳細に定義したので、 CSS Text Level 3 ではこれを一掃しました。ブラウザーの互換性表の <code>capitalize</code> の行は、それぞれのエンジンがこの詳細に定義された振る舞いに対応し始めたバージョンを記載しています。</div> - </dd> - <dt><code>uppercase</code></dt> - <dd>すべての文字を大文字に変換させるキーワードです。</dd> - <dt><code>lowercase</code></dt> - <dd>すべての文字を小文字に変換させるキーワードです。</dd> - <dt><code>none</code></dt> - <dd>すべての文字を変換させないキーワードです。</dd> - <dt><code>full-width</code></dt> - <dd>一般的な東アジアの文字 (中国語や日本語など) において、強制的に文字 — 主に記号やラテン文字 — を正方形の枠内に (全角で) 表記して、揃えて表示するキーワードです。</dd> - <dt><code>full-size-kana</code></dt> - <dd>このキーワードは一般に {{htmlelement("ruby")}} によるフリガナで使用され、すべての小文字の仮名文字を同等の大文字の仮名文字に変換することで、ルビで使われるフォントの大きさによる読みやすさの問題を解消します。</dd> -</dl> +- `uppercase` + - : すべての文字を大文字に変換させるキーワードです。 +- `lowercase` + - : すべての文字を小文字に変換させるキーワードです。 +- `none` + - : すべての文字を変換させないキーワードです。 +- `full-width` + - : 一般的な東アジアの文字 (中国語や日本語など) において、強制的に文字 — 主に記号やラテン文字 — を正方形の枠内に (全角で) 表記して、揃えて表示するキーワードです。 +- `full-size-kana` + - : このキーワードは一般に {{htmlelement("ruby")}} によるフリガナで使用され、すべての小文字の仮名文字を同等の大文字の仮名文字に変換することで、ルビで使われるフォントの大きさによる読みやすさの問題を解消します。 -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> +## アクセシビリティの考慮 -<p>テキストの長い区間に <code>text-transform</code> の値を <code>uppercase</code> で設定すると、失読症のような認知障碍を持つ人にとって読むのが難しくなることがあります。</p> +テキストの長い区間に `text-transform` の値を `uppercase` で設定すると、失読症のような認知障碍を持つ人にとって読むのが難しくなることがあります。 -<ul> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> - <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation" rel="noopener">W3C Understanding WCAG 2.1</a></li> -</ul> +- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [W3C Understanding WCAG 2.1](https://www.w3.org/TR/WCAG21/#visual-presentation) -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="none" name="none"><code>none</code></h3> +### `none` -<pre class="brush: html notranslate"><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> -</pre> +```html +<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> +``` -<pre class="brush: css notranslate">span { +```css +span { text-transform: none; } -strong { float: right; }</pre> +strong { float: right; } +``` -<p>文字を変換しない例です。</p> +文字を変換しない例です。 -<p>{{ EmbedLiveSample('none', '100%', '100px') }}</p> +{{ EmbedLiveSample('none', '100%', '100px') }} -<h3 id="capitalize_General" name="capitalize_General">capitalize (一般的)</h3> +<h3 id="capitalize_General">capitalize (一般的)</h3> -<pre class="brush: html notranslate"><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></pre> +```html +<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> +``` -<pre class="brush: css notranslate">span { +```css +span { text-transform: capitalize; } -strong { float: right; }</pre> +strong { float: right; } +``` -<p>頭文字を大文字にする例です。</p> +頭文字を大文字にする例です。 -<p>{{ EmbedLiveSample('capitalize_General', '100%', '100px') }}</p> +{{ EmbedLiveSample('capitalize_General', '100%', '100px') }} -<h3 id="capitalize_Punctuation" name="capitalize_Punctuation">capitalize (句読点)</h3> +<h3 id="capitalize_Punctuation">capitalize (句読点)</h3> -<pre class="brush: html notranslate"><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></pre> +```html +<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> +``` -<pre class="brush: css notranslate">span { +```css +span { text-transform: capitalize; } -strong { float: right; }</pre> +strong { float: right; } +``` -<p>単語の前の区切り記号が無視される様子を示す例です。このキーワードは、文字または数字の一般カテゴリに含まれる Unicode 文字である、最初の文字が対象です。</p> +単語の前の区切り記号が無視される様子を示す例です。このキーワードは、文字または数字の一般カテゴリに含まれる Unicode 文字である、最初の文字が対象です。 -<p>{{ EmbedLiveSample('capitalize_Punctuation', '100%', '100px') }}</p> +{{ EmbedLiveSample('capitalize_Punctuation', '100%', '100px') }} -<h3 id="capitalize_Symbols" name="capitalize_Symbols">capitalize (記号)</h3> +<h3 id="capitalize_Symbols">capitalize (記号)</h3> -<pre class="brush: html notranslate"><p>Initial String - <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong> -</p> -<p>text-transform: capitalize - <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong> -</p></pre> +```html +<p>Initial String + <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong> +</p> +<p>text-transform: capitalize + <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong> +</p> +``` -<pre class="brush: css notranslate">span { +```css +span { text-transform: capitalize; } -strong { float: right; }</pre> +strong { float: right; } +``` -<p>頭文字の記号が無視されるかを示す例です。このキーワードは、文字または数字の一般カテゴリーに含まれる Unicode 文字である、最初の文字が対象です。</p> +頭文字の記号が無視されるかを示す例です。このキーワードは、文字または数字の一般カテゴリーに含まれる Unicode 文字である、最初の文字が対象です。 -<p>{{ EmbedLiveSample('capitalize_Symbols', '100%', '100px') }}</p> +{{ EmbedLiveSample('capitalize_Symbols', '100%', '100px') }} -<h3 id="capitalize_Dutch_ij_digraph" name="capitalize_Dutch_ij_digraph">capitalize (オランダ語の二重音字 ij)</h3> +<h3 id="capitalize_Dutch_ij_digraph">capitalize (オランダ語の二重音字 ij)</h3> -<pre class="brush: html notranslate"><p>Initial String - <strong lang="nl">The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</strong> -</p> -<p>text-transform: capitalize - <strong><span lang="nl">The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</span></strong> -</p></pre> +```html +<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> +``` -<pre class="brush: css notranslate">span { +```css +span { text-transform: capitalize; } -strong { float: right; }</pre> +strong { float: right; } +``` -<p>オランダ語の二重音字 <em>ij</em> を1文字として扱わなければならないことを示す例です。</p> +オランダ語の二重音字 _ij_ を 1 文字として扱わなければならないことを示す例です。 -<p>{{ EmbedLiveSample('capitalize_Dutch_ij_digraph', '100%', '100px') }}</p> +{{ EmbedLiveSample('capitalize_Dutch_ij_digraph', '100%', '100px') }} -<h3 id="uppercase_General" name="uppercase_General">uppercase (一般的)</h3> +<h3 id="uppercase_General">uppercase (一般的)</h3> -<pre class="brush: html notranslate"><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></pre> +```html +<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> +``` -<pre class="brush: css notranslate">span { +```css +span { text-transform: uppercase; } -strong { float: right; }</pre> +strong { float: right; } +``` -<p>テキストを大文字に変換する例です。</p> +テキストを大文字に変換する例です。 -<p>{{ EmbedLiveSample('uppercase_General', '100%', '100px') }}</p> +{{ EmbedLiveSample('uppercase_General', '100%', '100px') }} -<h3 id="uppercase_Greek_Vowels" name="uppercase_Greek_Vowels">uppercase> (ギリシャ語の母音字)</h3> +<h3 id="uppercase_Greek_Vowels">uppercase (ギリシャ語の母音字)</h3> -<pre class="brush: html notranslate"><p>Initial String - <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong> -</p> -<p>text-transform: uppercase - <strong><span>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong> -</p></pre> +```html +<p>Initial String + <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong> +</p> +<p>text-transform: uppercase + <strong><span lang="el">Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong> +</p> +``` -<pre class="brush: css notranslate">span { +```css +span { text-transform: uppercase; } -strong { float: right; }</pre> +strong { float: right; } +``` -<p>離接的接続の <em>eta</em> を除くギリシャ語の母音字はアクセント記号を持たないこと、および二重母音の最初の文字のアクセント記号が 2 文字目の母音字のトレマになることを示す例です。</p> +離接的接続の _eta_ を除くギリシャ語の母音字はアクセント記号を持たないこと、および二重母音の最初の文字のアクセント記号が 2 文字目の母音字のトレマになることを示す例です。 -<p>{{ EmbedLiveSample('uppercase_Greek_Vowels', '100%', '100px') }}</p> +{{ EmbedLiveSample('uppercase_Greek_Vowels', '100%', '100px') }} -<h3 id="lowercase_General" name="lowercase_General">lowercase (一般的)</h3> +<h3 id="lowercase_General">lowercase (一般的)</h3> -<pre class="brush: html notranslate"><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></pre> +```html +<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> +``` -<pre class="brush: css notranslate">span { +```css +span { text-transform: lowercase; } -strong { float: right; }</pre> +strong { float: right; } +``` -<p>テキストを小文字に変換する例です。</p> +テキストを小文字に変換する例です。 -<p>{{ EmbedLiveSample('lowercase_General', '100%', '100px') }}</p> +{{ EmbedLiveSample('lowercase_General', '100%', '100px') }} -<h3 id="lowercase_Greek_Σ" name="lowercase_Greek_Σ">lowercase (ギリシャ文字 Σ)</h3> +<h3 id="lowercase_Greek_Σ">lowercase (ギリシャ文字 Σ)</h3> -<pre class="brush: html notranslate"><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></pre> +```html +<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> +``` -<pre class="brush: css notranslate">span { +```css +span { text-transform: lowercase; } -strong { float: right; }</pre> +strong { float: right; } +``` -<p>ギリシャ文字のシグマ (<code>Σ</code>) が、状況に応じて一般的な小文字のシグマ (<code>σ</code>) または単語の末尾での表記 (<code>ς</code>) に変換される例です。</p> +ギリシャ文字のシグマ (`Σ`) が、状況に応じて一般的な小文字のシグマ (`σ`) または単語の末尾での表記 (`ς`) に変換される例です。 -<p>{{ EmbedLiveSample('lowercase_Greek_Σ', '100%', '100px') }}</p> +{{ EmbedLiveSample('lowercase_Greek_Σ', '100%', '100px') }} -<h3 id="lowercase_Lithuanian" name="lowercase_Lithuanian">lowercase (リヒテンシュタイン語)</h3> +<h3 id="lowercase_Lithuanian">lowercase (リヒテンシュタイン語)</h3> -<pre class="brush: html notranslate"><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></pre> +```html +<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> +``` -<pre class="brush: css notranslate">span { +```css +span { text-transform: lowercase; } -strong { float: right; }</pre> +strong { float: right; } +``` -<p>これはリヒテンシュタインの文字 <code>Ĩ</code> および <code>J́</code> が小文字に変換されるとドットを保持する様子を示します。</p> +これはリヒテンシュタインの文字 `Ĩ` および `J́` が小文字に変換されるとドットを保持する様子を示します。 -<p>{{ EmbedLiveSample('lowercase_Lithuanian', '100%', '100px') }}</p> +{{ EmbedLiveSample('lowercase_Lithuanian', '100%', '100px') }} -<h3 id="full-width_General" name="full-width_General">full-width (一般)</h3> +<h3 id="full-width_General">full-width (一般)</h3> -<pre class="brush: html notranslate"><p>Initial String - <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong> -</p> -<p>text-transform: full-width - <strong><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span></strong> -</p></pre> +```html +<p>Initial String + <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong> +</p> +<p>text-transform: full-width + <strong><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span></strong> +</p> +``` -<pre class="brush: css notranslate">span { +```css +span { text-transform: full-width; } -strong { width: 100%; float: right; }</pre> +strong { width: 100%; float: right; } +``` -<p>一部の文字は半角と全角の 2 種類の表現があり、それらは別々の Unicode コードポイントを持ちます。全角文字は、アジア圏の表意文字と自然な形で混在させるために使用します。</p> +一部の文字は半角と全角の 2 種類の表現があり、それらは別々の Unicode コードポイントを持ちます。全角文字は、アジア圏の表意文字と自然な形で混在させるために使用します。 -<p>{{ EmbedLiveSample('full-width_General', '100%', '175px') }}</p> +{{ EmbedLiveSample('full-width_General', '100%', '175px') }} -<h3 id="full-width_Japanese_half-width_katakana" name="full-width_Japanese_half-width_katakana">full-width (日本語の半角カタカナ)</h3> +<h3 id="full-width_Japanese_half-width_katakana">full-width (日本語の半角カタカナ)</h3> -<pre class="brush: html notranslate"><p>Initial String - <strong>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</strong> -</p> -<p>text-transform: full-width - <strong><span>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</span></strong> -</p></pre> +```html +<p>Initial String + <strong>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</strong> +</p> +<p>text-transform: full-width + <strong><span>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</span></strong> +</p> +``` -<pre class="brush: css notranslate">span { +```css +span { text-transform: full-width; } -strong { width: 100%; float: right; }</pre> +strong { width: 100%; float: right; } +``` -<p>日本語の半角カタカナは、8ビットの文字コードでカタカナを表現するために使われていました。通常の (全角の) カタカナ文字とは異なり、濁点の付いた文字は、文字本体と濁点の2つのコードポイントで表現されます。 <code>full-width</code> は、これらの文字を全角に変換する際に、1つのコードポイントにまとめます。</p> +日本語の半角カタカナは、8 ビットの文字コードでカタカナを表現するために使われていました。通常の (全角の) カタカナ文字とは異なり、濁点の付いた文字は、文字本体と濁点の 2 つのコードポイントで表現されます。 `full-width` は、これらの文字を全角に変換する際に、1 つのコードポイントにまとめます。 -<p>{{ EmbedLiveSample('full-width_Japanese_half-width_katakana', '100%', '175px') }}</p> +{{ EmbedLiveSample('full-width_Japanese_half-width_katakana', '100%', '175px') }} <h3 id="full-size-kana">full-size-kana</h3> -<pre class="brush: html notranslate"><p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p> -<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p> -</p></pre> +```html +<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p> +<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p> +</p> +``` -<pre class="brush: css notranslate">p:nth-of-type(2) { +```css +p:nth-of-type(2) { text-transform: full-size-kana; -}</pre> - -<p>{{ EmbedLiveSample('full-size-kana', '100%', '175px') }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td>対象の文字を {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}} から、 Unicode の数字又は文字一般のカテゴリーに属するすべての文字に拡張。 <code>capitalize</code> の動作を、最初の区切り文字や記号を無視して単語の先頭の文字に適用するように変更。表意文字とアルファベット文字を自然な形で混在させるための <code>full-width</code> および <code>full-size-kana</code> キーワードを追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>対象の文字を {{SpecName('CSS1', '#text-transform', 'text-transform')}} から、2 種類の表記を持つ非ラテン文字に拡張。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#text-transform', 'text-transform')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.text-transform")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("font-variant")}}</li> -</ul> +} +``` + +{{ EmbedLiveSample('full-size-kana', '100%', '175px') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("font-variant")}} diff --git a/files/ja/web/css/white-space/index.md b/files/ja/web/css/white-space/index.md index f87e4ccb14..095ad06c5c 100644 --- a/files/ja/web/css/white-space/index.md +++ b/files/ja/web/css/white-space/index.md @@ -3,27 +3,31 @@ title: white-space slug: Web/CSS/white-space tags: - CSS - - CSS テキスト - CSS プロパティ + - CSS テキスト - Reference + - recipe:css-property - white-space +browser-compat: css.properties.white-space translation_of: Web/CSS/white-space --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>CSS の <strong><code>white-space</code></strong> プロパティは、要素内の{{Glossary("whitespace", "ホワイトスペース")}}をどのように扱うかを設定します。</p> +**`white-space`** は CSS のプロパティで、要素内の{{Glossary("whitespace", "ホワイトスペース")}}をどのように扱うかを設定します。 -<div>{{EmbedInteractiveExample("pages/css/white-space.html")}}</div> +{{EmbedInteractiveExample("pages/css/white-space.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +このプロパティは 2 つのことを指定します。 -<div class="note"> -<p><strong>メモ:</strong> <em>要素の内部で</em>折り返しを行うには、代わりに {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}} を使用してください。</p> -</div> +- ホワイトスペースを折り畳むかどうか、およびその方法。 +- 行を自動折り返しの場面で折り返すことができるかどうか。 + +> **Note:** *要素の内部で*折り返しを行うには、代わりに {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}} を使用してください。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ white-space: normal; white-space: nowrap; white-space: pre; @@ -34,136 +38,161 @@ white-space: break-spaces; /* グローバル値 */ white-space: inherit; white-space: initial; +white-space: revert; white-space: unset; -</pre> - -<p><code>white-space</code> プロパティは、以下の値の一覧から選択した単一のキーワードで指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>normal</code></dt> - <dd>連続するホワイトスペースはまとめられます。ソース内の改行文字もホワイトスペースとして扱われます。行ボックスを埋めるために、必要なら行を折り返します。</dd> - <dt><code>nowrap</code></dt> - <dd><code>normal</code> と同じくホワイトスペースを詰めますが、行の折り返しは行いません。</dd> - <dt><code>pre</code></dt> - <dd>連続するホワイトスペースはそのまま残され、行の折り返しは、ソース内の改行文字と、 {{HTMLElement("br")}} 要素でのみ行います。</dd> - <dt><code>pre-wrap</code></dt> - <dd>連続するホワイトスペースはそのまま残されます。行の折り返しは、改行文字や {{HTMLElement("br")}} 要素のあるときか、行ボックスを埋めるのに必要なときに行います。</dd> - <dt><code>pre-line</code></dt> - <dd>連続するホワイトスペースは詰められて 1 つになります。行の折り返しは、改行文字や {{HTMLElement("br")}} 要素のあるときか、行ボックスを埋めるのに必要なときに行われます。</dd> - <dt><code>break-spaces</code></dt> - <dd>下記の点を除いて、動作は <code>pre-wrap</code> と同じです。 - <ul> - <li>そのまま残された連続するホワイトスペースは、行末にあるものを含め、空間を占有します。</li> - <li>残されたそれぞれのホワイトスペースの後で、ホワイトスペースの間を含め、改行する可能性があります。</li> - <li>そのような残された空白は空間を占有し、ぶら下がらず、ボックスの固有の寸法に (min-content size および max-content size に) 影響します。</li> - </ul> - </dd> -</dl> - -<p>次の表に、<code>white-space</code> 値の動作をまとめます。</p> +``` + +`white-space` プロパティは、以下の値の一覧から選択した単一のキーワードで指定します。 + +### 値 + +- `normal` + - : 連続するホワイトスペースがまとめられます。ソース内の改行文字もホワイトスペースとして扱われます。行ボックスを埋めるために、必要なら行を折り返します。 +- `nowrap` + - : `normal` と同じくホワイトスペースを詰めますが、行の折り返しは行いません。 +- `pre` + - : 連続するホワイトスペースはそのまま残され、行の折り返しは、ソース内の改行文字と、 {{HTMLElement("br")}} 要素でのみ行います。 +- `pre-wrap` + - : 連続するホワイトスペースはそのまま残されます。行の折り返しは、改行文字や {{HTMLElement("br")}} 要素のあるときか、行ボックスを埋めるのに必要なときに行います。 +- `pre-line` + - : 連続するホワイトスペースは詰められて 1 つになります。行の折り返しは、改行文字や {{HTMLElement("br")}} 要素のあるときか、行ボックスを埋めるのに必要なときに行われます。 +- `break-spaces` + + - : 下記の点を除いて、動作は `pre-wrap` と同じです。 + + - そのまま残された連続するホワイトスペースは、行末にあるものを含め、空間を占有します。 + - 残されたそれぞれのホワイトスペースの後で、ホワイトスペースの間を含め、改行する可能性があります。 + - そのような残された空白は空間を占有し、ぶら下がらず、ボックスの内在の寸法 (min-content および max-content の大きさ) に影響します。 + +次の表に、`white-space` 値の動作をまとめます。 <table class="standard-table"> - <thead> - <tr> - <th></th> - <th>改行</th> - <th>空白とタブ文字</th> - <th>テキストの折り返し</th> - <th>行末の空白</th> - </tr> - </thead> - <tbody> - <tr> - <th><code>normal</code></th> - <td>まとめる</td> - <td>まとめる</td> - <td>折り返す</td> - <td>除去</td> - </tr> - <tr> - <th><code>nowrap</code></th> - <td>まとめる</td> - <td>まとめる</td> - <td>折り返さない</td> - <td>除去</td> - </tr> - <tr> - <th><code>pre</code></th> - <td>そのまま</td> - <td>そのまま</td> - <td>折り返さない</td> - <td>そのまま</td> - </tr> - <tr> - <th><code>pre-wrap</code></th> - <td>そのまま</td> - <td>そのまま</td> - <td>折り返す</td> - <td>ぶら下げ</td> - </tr> - <tr> - <th><code>pre-line</code></th> - <td>そのまま</td> - <td>まとめる</td> - <td>折り返す</td> - <td>除去</td> - </tr> - <tr> - <th><code>break-spaces</code></th> - <td>そのまま</td> - <td>そのまま</td> - <td>折り返す</td> - <td>折り返す</td> - </tr> - </tbody> + <thead> + <tr> + <th></th> + <th>改行</th> + <th>空白とタブ文字</th> + <th>テキストの折り返し</th> + <th>行末の空白</th> + <th>行末のその他の空白区切り</th> + </tr> + </thead> + <tbody> + <tr> + <th><code>normal</code></th> + <td>まとめる</td> + <td>まとめる</td> + <td>折り返す</td> + <td>除去</td> + <td>ぶら下げる</td> + </tr> + <tr> + <th><code>nowrap</code></th> + <td>まとめる</td> + <td>まとめる</td> + <td>折り返さない</td> + <td>除去</td> + <td>ぶら下げる</td> + </tr> + <tr> + <th><code>pre</code></th> + <td>そのまま</td> + <td>そのまま</td> + <td>折り返さない</td> + <td>そのまま</td> + <td>折り返さない</td> + </tr> + <tr> + <th><code>pre-wrap</code></th> + <td>そのまま</td> + <td>そのまま</td> + <td>折り返す</td> + <td>ぶら下げる</td> + <td>ぶら下げる</td> + </tr> + <tr> + <th><code>pre-line</code></th> + <td>そのまま</td> + <td>まとめる</td> + <td>折り返す</td> + <td>除去</td> + <td>ぶら下げる</td> + </tr> + <tr> + <th><code>break-spaces</code></th> + <td>そのまま</td> + <td>そのまま</td> + <td>折り返す</td> + <td>折り返す</td> + <td>折り返す</td> + </tr> + </tbody> </table> -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +> **Note:** **空白**と**その他の空白区切り**には違いがあります。以下のように定義されています。 +> +> - 空白 +> - : 空白 (U+0020)、タブ (U+0009)、区切り文字 (改行など)。 +> - その他の空白区切り +> - : Unicode で定義されているその他の区切り文字で、空白として定義されているもの意外。 +> +> ホワイトスペースが*ぶら下げる*とある場合、内在サイズを計算するときにボックスの大きさに影響することがあります。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{CSSSyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Basic_example" name="Basic_example">基本的な例</h3> +### 基本的な例 -<pre class="brush: css">code { +```css +code { white-space: pre; -}</pre> +} +``` -<h3 id="Line_breaks_inside_pre_elements" name="Line_breaks_inside_pre_elements"><pre> 要素内での改行</h3> +### \<pre> 要素内での改行 -<pre class="brush: css">pre { - word-wrap: break-word; /* IE 5.5-7 */ - white-space: pre-wrap; /* 現行ブラウザー */ -}</pre> +```css +pre { + white-space: pre-wrap; +} +``` -<h2 id="See_it_in_action" name="See_it_in_action">操作して確認する</h2> +<h3 id="In_action">操作</h3> -<div class="hidden" id="See_it_in_action_LiveSample"> -<pre class="brush: html"><div id="css-code" class="box"> +#### HTML + +```html hidden +<div id="css-code" class="box"> p { white-space: - <select> - <option>normal</option> - <option>nowrap</option> - <option>pre</option> - <option>pre-wrap</option> - <option>pre-line</option> - <option>break-spaces</option> - </select> } -</div> -<div id="results" class="box"> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + <select> + <option>normal</option> + <option>nowrap</option> + <option>pre</option> + <option>pre-wrap</option> + <option>pre-line</option> + <option>break-spaces</option> + </select> } +</div> +<div id="results" class="box"> + <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> -</div></pre> + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> +</div> +``` -<pre class="brush: css">.box { +```css hidden +.box { width: 300px; padding: 16px; border-radius: 10px; @@ -185,62 +214,33 @@ white-space: unset; height: 400px; white-space: normal; font-size: 14px; -}</pre> +} +``` -<pre class="brush: js">var select = document.querySelector("#css-code select"); +```js hidden +var select = document.querySelector("#css-code select"); var results = document.querySelector("#results p"); select.addEventListener("change", function(e) { results.setAttribute("style", "white-space: "+e.target.value); -})</pre> -</div> - -<h3 id="Source" name="Source">ソース</h3> - -<pre class="brush: html"><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> -</pre> +```html +<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> +``` -<h3 id="CSS_Result" name="CSS_Result">CSS を加えた結果</h3> +#### 結果 -<p>{{EmbedLiveSample("See_it_in_action_LiveSample", "100%", 500)}}</p> +{{EmbedLiveSample("In_action", "100%", 500)}} -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Text", "#propdef-white-space", "white-space")}}</td> - <td>{{Spec2("CSS3 Text")}}</td> - <td>折り返しアルゴリズムの詳細を記述。</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "text.html#white-space-prop", "white-space")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +## 仕様書 -<p>{{CSSInfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.white-space")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li><em>内部での</em>折り返しを定義するプロパティ: {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}}</li> -</ul> +- *内部での*折り返しを定義するプロパティ: {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}} diff --git a/files/ja/web/css/word-break/index.md b/files/ja/web/css/word-break/index.md index a315d8dd4a..2dd56cc203 100644 --- a/files/ja/web/css/word-break/index.md +++ b/files/ja/web/css/word-break/index.md @@ -3,23 +3,25 @@ title: word-break slug: Web/CSS/word-break tags: - CSS - - CSS テキスト - CSS プロパティ - Reference + - break-word + - recipe:css-property + - word-break - 日本語処理 +browser-compat: css.properties.word-break translation_of: Web/CSS/word-break --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>word-break</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。</p> +**`word-break`** は [CSS](/ja/docs/Web/CSS) のプロパティで、改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。 -<div>{{EmbedInteractiveExample("pages/css/word-break.html")}}</div> +{{EmbedInteractiveExample("pages/css/word-break.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ word-break: normal; word-break: break-all; word-break: keep-all; @@ -28,64 +30,63 @@ word-break: break-word; /* 非推奨 */ /* グローバル値 */ word-break: inherit; word-break: initial; +word-break: revert; word-break: unset; -</pre> - -<p><code>word-break</code> プロパティは、下記のリストの中から 1 つを選んで指定します。</p> - -<h3 class="brush:css" id="Values" name="Values">値</h3> - -<dl> - <dt><code>normal</code></dt> - <dd>既定の改行規則を使用します。</dd> - <dt><code>break-all</code></dt> - <dd>CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようにします。 - <div class="hidden">翻訳メモ:<br> - 英語版: 「Chinese/Japanese/Korean」 (3つ)<br> - 日本語: 「中国語、台湾語、日本語、韓国語」 (4つ)<br> - という翻訳が以前から続いているので、それに従うことにしました。</div> - </dd> - <dt><code>keep-all</code></dt> - <dd>CJK テキストの改行を許可しません。 CJK 以外のテキストについては <code>normal</code> と同じ挙動となります。</dd> - <dt><code>break-word</code> {{Deprecated_Inline}}</dt> - <dd>{{cssxref("overflow-wrap")}} プロパティの値とは関係なく、 <code>word-break: normal</code> や <code>overflow-wrap: anywhere</code> と同じ効果になります。</dd> -</dl> - -<div class="note"> -<p><strong>メモ:</strong> <code>word-break: break-word</code> および <code>overflow-wrap: break-word</code> ({{cssxref("overflow-wrap")}} を参照) とは対照的に、 <code>word-break: break-all</code> はテキストがコンテナーからちょうどあふれたところで (単語全体を次の行に送れば途中で改行を防ぐことができる場合であっても) 位置で改行を生成します。</p> -</div> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +``` + +`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` と同じ効果になります。 + +> **Note:** `word-break: break-word` および `overflow-wrap: break-word` ({{cssxref("overflow-wrap")}} を参照) とは対照的に、 `word-break: break-all` はテキストがコンテナーからちょうどあふれたところで (単語全体を次の行に送れば途中で改行を防ぐことができる場合であっても) 位置で改行を生成します。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><p>1. <code>word-break: normal</code></p> -<p class="normal narrow">This is a long and +```html +<p>1. <code>word-break: normal</code></p> +<p class="normal narrow">This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu - グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> + グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> -<p>2. <code>word-break: break-all</code></p> -<p class="breakAll narrow">This is a long and +<p>2. <code>word-break: break-all</code></p> +<p class="breakAll narrow">This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu - グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> + グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> -<p>3. <code>word-break: keep-all</code></p> -<p class="keepAll narrow">This is a long and +<p>3. <code>word-break: keep-all</code></p> +<p class="keepAll narrow">This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu - グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> + グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> -<p>4. <code>word-break: break-word</code></p> -<p class="breakWord narrow">This is a long and +<p>4. <code>word-break: break-word</code></p> +<p class="breakWord narrow">This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu - グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p></pre> + グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">.narrow { +```css +.narrow { padding: 10px; border: 1px solid; width: 500px; @@ -110,37 +111,20 @@ word-break: unset; .breakWord { word-break: break-word; } -</pre> - -<p>{{EmbedLiveSample('Examples', '100%', 600)}}</p> +``` -<h2 id="Specifications" name="Specifications">仕様書</h2> +{{EmbedLiveSample('Examples', '100%', 600)}} -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text', '#word-break-property', 'word-break')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +## 仕様書 -<div>{{cssinfo}}</div> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.word-break")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref("overflow-wrap")}}</li> -</ul> +- {{cssxref("overflow-wrap")}} +- {{cssxref("hyphens")}} +- [テキストの分割と折り返しのガイド](/ja/docs/Web/CSS/CSS_Text/Wrapping_Text) diff --git a/files/ja/web/css/word-spacing/index.md b/files/ja/web/css/word-spacing/index.md index 974320c478..4c9d0ddafd 100644 --- a/files/ja/web/css/word-spacing/index.md +++ b/files/ja/web/css/word-spacing/index.md @@ -3,123 +3,97 @@ title: word-spacing slug: Web/CSS/word-spacing tags: - CSS - - CSS Text - - CSS テキスト - CSS プロパティ + - CSS テキスト - Reference + - recipe:css-property +browser-compat: css.properties.word-spacing translation_of: Web/CSS/word-spacing --- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>word-spacing</code></strong> プロパティは、タグや単語の間隔に関する挙動を指定します。</p> +{{CSSRef}} -<div>{{EmbedInteractiveExample("pages/css/word-spacing.html")}}</div> +**`word-spacing`** は [CSS](/ja/docs/Web/CSS) のプロパティで、タグや単語の間隔に関する挙動を指定します。 -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +{{EmbedInteractiveExample("pages/css/word-spacing.html")}} -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ word-spacing: normal; -/* <length> 値 */ +/* <length> 値 */ word-spacing: 3px; word-spacing: 0.3em; -/* <percentage> 値 */ +/* <percentage> 値 */ word-spacing: 50%; word-spacing: 200%; /* グローバル値 */ word-spacing: inherit; word-spacing: initial; +word-spacing: revert; word-spacing: unset; -</pre> +``` -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>normal</code></dt> - <dd>現在のフォントやブラウザ―で定義された普通の単語の間隔です。</dd> - <dt>{{cssxref("length")}}</dt> - <dd>フォントによって定義された単語の間隔に追加する間隔を定義します。</dd> - <dt>{{cssxref("percentage")}}</dt> - <dd>文字の advance width を基準とした追加する間隔の量をパーセントで指定します。</dd> -</dl> +- `normal` + - : 現在のフォントやブラウザ―で定義された普通の単語の間隔です。 +- {{cssxref("length")}} + - : フォントによって定義された単語の間隔に追加する間隔を定義します。 +- {{cssxref("percentage")}} + - : 文字の advance width を基準とした追加する間隔の量をパーセント値で指定します。 -<h2 id="Example" name="Example">例</h2> +<h2 id="Examples">例</h2> -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html notranslate"><div id="mozdiv1">Here are many words...</div> -<div id="mozdiv2">...and many more!</div></pre> +```html +<div id="mozdiv1">Here are many words...</div> +<div id="mozdiv2">...and many more!</div> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css notranslate">#mozdiv1 { +```css +#mozdiv1 { word-spacing: 15px; } #mozdiv2 { word-spacing: 5em; -} </pre> +} +``` -<p>{{ EmbedLiveSample('Example') }}</p> +{{ EmbedLiveSample('Examples') }} -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> +## アクセシビリティの考慮 -<p><code>word-spacing</code> で大きな正の値や負の値を設定すると、スタイルが適用される文が読めなくなります。テキストをとても大きな正の値でスタイル付けすると、単語間が離れすぎて文として表示されなくなります。大きな負の数でスタイル付けすると、それぞれの単語の先頭と末尾が互いに重複して、理解できなくなります。</p> +`word-spacing` で大きな正の値や負の値を設定すると、スタイルが適用される文が読めなくなります。テキストをとても大きな正の値でスタイル付けすると、単語間が離れすぎて文として表示されなくなります。大きな負の数でスタイル付けすると、それぞれの単語の先頭と末尾が互いに重複して、理解できなくなります。 -<p>フォントファミリによって文字の幅が異なるため、読みやすい <code>word-spacing</code> は場面によって検討する必要があります。すべてのフォントファミリで自動的に読みやすさを調整する単一の値はありません。</p> +フォントファミリーによって文字の幅が異なるため、読みやすい `word-spacing` は場面によって検討する必要があります。すべてのフォントファミリーで自動的に読みやすさを調整する単一の値はありません。 -<ul> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li> -</ul> +- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{CSSSyntax}} -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text', '#propdef-word-spacing', 'word-spacing')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td>以前の値を、<code><spacing-limit></code> 値で置き換え。この値は、以前と同じ値か、追加された<code><percentage></code> 値か、もしくは、最適値・最小値・最大値を表す 3 つまでの値を使って定義します</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'text.html#propdef-word-spacing', 'word-spacing')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#word-spacing', 'word-spacing')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.word-spacing")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("letter-spacing")}}</li> -</ul> +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("letter-spacing")}} |