From 4ace0769da3bc823dd8a3d86211cefa850ce3007 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 5 Oct 2021 01:44:43 +0900 Subject: CSS Text モジュールの文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/08/13 時点の英語版に同期 - Web/CSS/CSS_Text/Wrapping_Text を新規翻訳 --- files/ja/web/css/word-spacing/index.md | 128 +++++++++++++-------------------- 1 file changed, 51 insertions(+), 77 deletions(-) (limited to 'files/ja/web/css/word-spacing') 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 --- -
{{CSSRef}}
- -

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

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/word-spacing.html")}}
+**`word-spacing`** は [CSS](/ja/docs/Web/CSS) のプロパティで、タグや単語の間隔に関する挙動を指定します。 - +{{EmbedInteractiveExample("pages/css/word-spacing.html")}} -

構文

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

値

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

例

+

例

-

HTML

+### HTML -
<div id="mozdiv1">Here are many words...</div>
-<div id="mozdiv2">...and many more!</div>
+```html +
Here are many words...
+
...and many more!
+``` -

CSS

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

{{ EmbedLiveSample('Example') }}

+{{ EmbedLiveSample('Examples') }} -

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

+## アクセシビリティの考慮 -

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

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

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

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

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

+## 形式文法 {{CSSSyntax}} -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("letter-spacing")}} -- cgit v1.2.3-54-g00ecf