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/letter-spacing/index.md | 147 +++++++++++++------------------ 1 file changed, 59 insertions(+), 88 deletions(-) (limited to 'files/ja/web/css/letter-spacing') 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 --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`letter-spacing`** は [CSS](/ja/docs/Web/CSS) のプロパティで、テキストの水平方向の字間のスペースに関する挙動を設定します。この値はテキストを描画する際に文字間の自然な空間に追加されます。 `letter-spacing` が正の値であった場合は、文字と文字の間が開き、 `letter-spacing` が負の値であった場合は、文字と文字が互いに近づきます。 -
{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}
+{{EmbedInteractiveExample("pages/css/letter-spacing.html")}} - +## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 letter-spacing: normal;
 
 /* <length> 値 */
@@ -32,102 +31,74 @@ letter-spacing: .3px;
 letter-spacing: inherit;
 letter-spacing: initial;
 letter-spacing: unset;
-
+``` + +### 値 + +- `normal` + - : 現在のフォントでの通常の字間になります。 `0` の値とは異なり、この値は{{glossary("user agent", "ユーザーエージェント")}}が文字列を両端揃えするために字間を変えることを許可します。 +- {{cssxref("<length>")}} + - : 既定の字間に*加える*字間のスペースを指定します。負の値も指定可能ですが、実装に依存した制限があるかもしれません。ユーザーエージェントは文字列を両端揃えするために、字間スペースをさらに増減させることはありません。 -

値

+## アクセシビリティの考慮 -
-
normal
-
現在のフォントでの通常の字間になります。 0 の値とは異なり、この値は{{glossary("user agent", "ユーザーエージェント")}}が文字列を両端揃えするために字間を変えることを許可します。
-
{{cssxref("<length>")}}
-
既定の字間に加える字間のスペースを指定します。負の値も指定可能ですが、実装に依存した制限があるかもしれません。ユーザーエージェントは文字列を両端揃えするために、字間スペースをさらに増減させることはありません。
-
+正と負のどちらでも、大きすぎる値を `letter-spacing` に指定すると読みづらくなってしまいます。正の値として大きすぎる場合、文字と文字が離れすぎるせいでひとつの単語ではなくバラバラの文字に見えてしまいます。負の値として大きすぎる場合、文字と文字が重なり合うために何が書いてあるのか分からなくなってしまいます。 -

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

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

正と負のどちらでも、大きすぎる値を letter-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) -

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

+## 国際化の考慮 - +書き言葉の中には、字間のスペースを適用してはいけないものがあります。例えば、アラビア文字を使用する言語では、次の例のように、つながった文字が視覚的につながったままであることが求められます。字間スペースを適用すると、テキストが壊れたように見えてしまいます。 -

公式定義

+>

شسيبتنمك

-

{{cssinfo}}

+## 公式定義 -

形式文法

+{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 -

字間の設定

+

字間の設定

-

HTML

+#### 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>
-
+```html +

letter spacing

+

letter spacing

+

letter spacing

+

letter spacing

+

letter spacing

+``` -

CSS

+#### CSS -
.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; }
-
- -

結果

- -

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

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - +``` + +#### 結果 + +{{ EmbedLiveSample('Setting_letter_spacing', 440, 185) }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("font-kerning")}} -- cgit v1.2.3-54-g00ecf