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

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

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

構文

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

値

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

例

- -

HTML

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

CSS

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

{{ EmbedLiveSample('Example') }}

- -

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

- -

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

- -

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

- - - -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{CSSSyntax}} - -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

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

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

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

構文

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

値

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

例

+ +

HTML

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

CSS

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

{{ EmbedLiveSample('Example') }}

+ +

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

+ +

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

+ +

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

+ + + +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{CSSSyntax}} + +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

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