From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/word-spacing/index.html | 127 +++++++++++++++++++++++++++++++ 1 file changed, 127 insertions(+) create mode 100644 files/ja/web/css/word-spacing/index.html (limited to 'files/ja/web/css/word-spacing/index.html') diff --git a/files/ja/web/css/word-spacing/index.html b/files/ja/web/css/word-spacing/index.html new file mode 100644 index 0000000000..f3bf74f567 --- /dev/null +++ b/files/ja/web/css/word-spacing/index.html @@ -0,0 +1,127 @@ +--- +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