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/letter-spacing/index.html | 133 ----------------------------- files/ja/web/css/letter-spacing/index.md | 133 +++++++++++++++++++++++++++++ 2 files changed, 133 insertions(+), 133 deletions(-) delete mode 100644 files/ja/web/css/letter-spacing/index.html create mode 100644 files/ja/web/css/letter-spacing/index.md (limited to 'files/ja/web/css/letter-spacing') diff --git a/files/ja/web/css/letter-spacing/index.html b/files/ja/web/css/letter-spacing/index.html deleted file mode 100644 index f16840257e..0000000000 --- a/files/ja/web/css/letter-spacing/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: letter-spacing -slug: Web/CSS/letter-spacing -tags: - - CSS - - CSS Property - - CSS Text - - Reference - - SVG - - 'recipe:css-property' -translation_of: Web/CSS/letter-spacing ---- -
{{CSSRef}}
- -

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

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

構文

- -
/* キーワード値 */
-letter-spacing: normal;
-
-/* <length> 値 */
-letter-spacing: 0.3em;
-letter-spacing: 3px;
-letter-spacing: .3px;
-
-/* グローバル値 */
-letter-spacing: inherit;
-letter-spacing: initial;
-letter-spacing: unset;
-
- -

値

- -
-
normal
-
現在のフォントでの通常の字間になります。 0 の値とは異なり、この値は{{glossary("user agent", "ユーザーエージェント")}}が文字列を両端揃えするために字間を変えることを許可します。
-
{{cssxref("<length>")}}
-
既定の字間に加える字間のスペースを指定します。負の値も指定可能ですが、実装に依存した制限があるかもしれません。ユーザーエージェントは文字列を両端揃えするために、字間スペースをさらに増減させることはありません。
-
- -

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

- -

正と負のどちらでも、大きすぎる値を letter-spacing に指定すると読みづらくなってしまいます。正の値として大きすぎる場合、文字と文字が離れすぎるせいでひとつの単語ではなくバラバラの文字に見えてしまいます。負の値として大きすぎる場合、文字と文字が重なり合うために何が書いてあるのか分からなくなってしまいます。

- -

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

- - - -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

字間の設定

- -

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>
-
- -

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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/letter-spacing/index.md b/files/ja/web/css/letter-spacing/index.md new file mode 100644 index 0000000000..f16840257e --- /dev/null +++ b/files/ja/web/css/letter-spacing/index.md @@ -0,0 +1,133 @@ +--- +title: letter-spacing +slug: Web/CSS/letter-spacing +tags: + - CSS + - CSS Property + - CSS Text + - Reference + - SVG + - 'recipe:css-property' +translation_of: Web/CSS/letter-spacing +--- +
{{CSSRef}}
+ +

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

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

構文

+ +
/* キーワード値 */
+letter-spacing: normal;
+
+/* <length> 値 */
+letter-spacing: 0.3em;
+letter-spacing: 3px;
+letter-spacing: .3px;
+
+/* グローバル値 */
+letter-spacing: inherit;
+letter-spacing: initial;
+letter-spacing: unset;
+
+ +

値

+ +
+
normal
+
現在のフォントでの通常の字間になります。 0 の値とは異なり、この値は{{glossary("user agent", "ユーザーエージェント")}}が文字列を両端揃えするために字間を変えることを許可します。
+
{{cssxref("<length>")}}
+
既定の字間に加える字間のスペースを指定します。負の値も指定可能ですが、実装に依存した制限があるかもしれません。ユーザーエージェントは文字列を両端揃えするために、字間スペースをさらに増減させることはありません。
+
+ +

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

+ +

正と負のどちらでも、大きすぎる値を letter-spacing に指定すると読みづらくなってしまいます。正の値として大きすぎる場合、文字と文字が離れすぎるせいでひとつの単語ではなくバラバラの文字に見えてしまいます。負の値として大きすぎる場合、文字と文字が重なり合うために何が書いてあるのか分からなくなってしまいます。

+ +

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

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

字間の設定

+ +

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>
+
+ +

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")}}

+ +

関連情報

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