diff options
21 files changed, 1662 insertions, 2235 deletions
diff --git a/files/ja/web/css/font-family/index.md b/files/ja/web/css/font-family/index.md index 00399f5b81..40b4b8c371 100644 --- a/files/ja/web/css/font-family/index.md +++ b/files/ja/web/css/font-family/index.md @@ -5,7 +5,7 @@ tags: - CSS - CSS フォント - CSS プロパティ - - Reference + - リファレンス - recipe:css-property browser-compat: css.properties.font-family translation_of: Web/CSS/font-family @@ -240,4 +240,4 @@ font-family: Gill Sans Extrabold, sans-serif; - {{cssxref("font-style")}} - {{cssxref("font-weight")}} -- [基本的なテキストとフォントのスタイル付け](/ja/docs/Learn/CSS/Styling_text/Fundamentals) +- [基本的なテキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals) diff --git a/files/ja/web/css/font-feature-settings/index.md b/files/ja/web/css/font-feature-settings/index.md index 58982e86dd..718c038a7d 100644 --- a/files/ja/web/css/font-feature-settings/index.md +++ b/files/ja/web/css/font-feature-settings/index.md @@ -6,19 +6,20 @@ tags: - CSS フォント - CSS プロパティ - リファレンス + - recipe:css-property +browser-compat: css.properties.font-feature-settings translation_of: Web/CSS/font-feature-settings --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>CSS の <strong><code>font-feature-settings</code></strong> プロパティは、 OpenType フォントの拡張タイポグラフィの特性を制御します。</p> +**`font-feature-settings`** は CSS のプロパティで、 OpenType フォントの拡張書体の特性を制御します。 -<div>{{EmbedInteractiveExample("pages/css/font-feature-settings.html")}}</div> +{{EmbedInteractiveExample("pages/css/font-feature-settings.html")}} -<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* 既定の設定を使用する */ +```css +/* 既定の設定を使用する */ font-feature-settings: normal; /* OpenType の特性タグの値を設定する */ @@ -30,88 +31,84 @@ font-feature-settings: "smcp", "swsh" 2; /* グローバル値 */ font-feature-settings: inherit; font-feature-settings: initial; -font-feature-settings: unset;</pre> +font-feature-settings: revert; +font-feature-settings: unset; +``` + +可能な限り、ウェブの作者は代わりに {{cssxref("font-variant")}} 一括指定プロパティ、または関連する個別指定プロパティである {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}} プロパティを使うべきです。 + +これらは `font-feature-settings` よりも、もっと効率的で、予想でき、理解できる結果をもたらし、 `font-feature-settings` は、 OpenType フォント特性を有効またはアクセスするための他の方法が存在しない特殊なケースを処理するように設計された低レベルの機能です。特に、スモールキャップの表現に `font-feature-settings` を使うべきではありません。 -<div class="note"><strong>メモ:</strong> 可能な限り、ウェブの作者は代わりに {{cssxref("font-variant")}} 一括指定プロパティ、又は関連する個別指定プロパティである {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}} プロパティを使うべきです。<br> -<br> -これらは <code>font-feature-settings</code> よりも、もっと効率的で、予想でき、理解できる結果をもたらし、 <code>font-feature-settings</code> は、 OpenType フォント特性を有効またはアクセスするための他の方法が存在しない特殊なケースを処理するように設計された低レベルの機能です。特に、スモールキャップの表現に <code>font-feature-settings</code> を使うべきではありません。</div> +### 値 -<h3 id="Values" name="Values">値</h3> +- `normal` + - : テキストは既定の設定で配置されます。 +- `<feature-tag-value>` + - : テキストの描画時、 OpenType の特性タグ値のリストがテキストレイアウトエンジンに渡され、フォントの機能を有効化または無効化します。タグは常に 4 文字の ASCII 文字の {{cssxref("<string>")}} です。文字数がこれより少ないか多い場合、もしくはコードポイント U+20 - U+7E の範囲外の文字を含む場合、プロパティ全体が無効になります。<br> + 値は正の整数です。キーワード `on` と `off` はそれぞれ `1` と `0` の別名です。値が設定されていなければ、既定値は `1` です。 論理値ではない OpenType 特性 (例: [stylistic alternates](https://www.microsoft.com/typography/otspec/features_pt.htm#salt)) では、この値は選ばれる特定の字形を意味します。論理値の特性はオンとオフを切り替えます。 -<dl> - <dt><code>normal</code></dt> - <dd>テキストは既定の設定で配置されます。</dd> - <dt><code><feature-tag-value></code></dt> - <dd>テキストの描画時、 OpenType の特性タグ値のリストがテキストレイアウトエンジンに渡され、フォントの機能を有効化または無効化します。タグは常に 4 文字の ASCII 文字の {{cssxref("<string>")}} です。文字数がこれより少ないか多い場合、もしくはコードポイント U+20 - U+7E の範囲外の文字を含む場合、プロパティ全体が無効になります。<br> - 値は正の整数です。キーワード <code>on</code> と <code>off</code> はそれぞれ <code>1</code> と <code>0</code> の別名です。値が設定されていなければ、既定値は <code>1</code> です。 非真偽値の OpenType 特性 (例: <a href="http://www.microsoft.com/typography/otspec/features_pt.htm#salt">stylistic alternates</a>) では、この値は選ばれる特定のグリフを意味します。真偽値の特性はオンとオフを切り替えます。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{cssinfo}} + +## 形式定義 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 + +### 様々なフォント特性を有効にする -<pre class="brush:css">/* use small-cap alternate glyphs */ +```css +/* スモールキャップ代替字形 */ .smallcaps { font-feature-settings: "smcp" on; } -/* convert both upper and lowercase to small caps (affects punctuation also) */ +/* 大文字と小文字の両方をスモールキャップに変換 (記号も) */ .allsmallcaps { font-feature-settings: "c2sc", "smcp"; } -/* use zeros with a slash through them to differentiate from "O" */ +/* スラッシュのついたゼロを使用して "O" と区別する */ .nicezero { font-feature-settings: "zero"; } -/* enable historical forms */ +/* 歴史的な書体を有効に */ .hist { font-feature-settings: "hist"; } -/* disable common ligatures, usually on by default */ +/* よくある合字を無効にする (既定ではオン) */ .noligs { font-feature-settings: "liga" 0; } -/* enable tabular (monospaced) figures */ +/* 表内の数字を有効にする (等幅) */ td.tabular { font-feature-settings: "tnum"; } -/* enable automatic fractions */ +/* 自動的に分数化する */ .fractions { font-feature-settings: "frac"; } -/* use the second available swash character */ +/* 利用可能な2番目のスウォッシュ文字を使用 */ .swash { font-feature-settings: "swsh" 2; } -/* enable stylistic set 7 */ +/* スタイリッシュセット 7 を有効にする */ .fancystyle { font-family: Gabriola; /* available on Windows 7, and on Mac OS */ font-feature-settings: "ss07"; } -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="仕様書">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.font-feature-settings")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="http://www.microsoft.com/typography/otspec/featurelist.htm">OpenType Feature Tags</a> list</li> - <li><a href="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx">Using the whole font</a> (The -moz syntax is the old one. On Gecko, use the -ms syntax but with -moz).</li> -</ul> +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("@font-face/font-display", "font-display")}} +- {{cssxref("@font-face/font-family", "font-family")}} +- {{cssxref("@font-face/font-stretch", "font-stretch")}} +- {{cssxref("@font-face/font-style", "font-style")}} +- {{cssxref("@font-face/font-weight", "font-weight")}} +- {{cssxref("@font-face/font-variant", "font-variant")}} +- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} +- {{cssxref("@font-face/src", "src")}} +- {{cssxref("@font-face/unicode-range", "unicode-range")}} +- [OpenType 特性タグ](https://docs.microsoft.com/typography/opentype/spec/featurelist)のリスト diff --git a/files/ja/web/css/font-kerning/index.md b/files/ja/web/css/font-kerning/index.md index 7d61cd8165..28f7c9a06a 100644 --- a/files/ja/web/css/font-kerning/index.md +++ b/files/ja/web/css/font-kerning/index.md @@ -5,14 +5,26 @@ tags: - CSS - CSS フォント - CSS プロパティ - - Reference + - リファレンス + - recipe:css-property +browser-compat: css.properties.font-kerning translation_of: Web/CSS/font-kerning --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>font-kerning</code></strong> CSS プロパティはフォントに存在するカーニング情報の使用方法を制御します。</p> +**`font-kerning`** CSS プロパティはフォントに存在するカーニング情報の使用を制御します。 -<pre class="brush:css no-line-numbers">/* キーワード値 */ +{{EmbedInteractiveExample("pages/css/font-kerning.html")}} + +*カーニング*は、文字の間隔をどれだけ取るかを定義します。_well-kerned_ フォントでは、この機能は文字間を他と比較してより整った読みやすい間隔にします。 + +例えば、下の画像では、左の例ではカーニングが使われていませんが、右の例ではカーニングが使われています。 + + + +## 構文 + +```css font-kerning: auto; font-kerning: normal; font-kerning: none; @@ -20,45 +32,43 @@ font-kerning: none; /* グローバル値 */ font-kerning: inherit; font-kerning: initial; +font-kerning: revert; font-kerning: unset; -</pre> +``` -<p><em>カーニング</em>は、文字間にどれだけ間隔を置くかを制御します。カーニング情報はフォントに含まれており、かつフォントが <em>well-kerned</em> であれば、この機能によりどのような文字でも文字同士の間隔をほぼ同一にできます。</p> +### 値 -<p><img alt="Example of font-kerning" src="https://mdn.mozillademos.org/files/8455/font-kerning.png" style="display: block; height: 84px; margin: auto; width: 180px;"></p> +- `auto` + - : このキーワードは、カーニングを使用するかをブラウザーに任せます。フォントサイズが小さい場合はカーニングが不自然になることがあるため、ブラウザーは無効化するでしょう。これは既定値です。 +- `normal` + - : このキーワードは、カーニングを適用するよう要求します。 +- `none` + - : このキーワードは、ブラウザーがフォントのカーニング情報を使用しないようにします。 -<p>{{cssinfo}}</p> +## 公式定義 -<h2 id="Syntax" name="Syntax">構文</h2> +{{cssinfo}} -<p><code>font-kerning</code> プロパティは以下のキーワード内の一つを指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>このキーワードは、カーニングを使用するかをブラウザーに任せます。フォントサイズが小さい場合はカーニングが不自然になることがあるため、ブラウザーは無効化するでしょう。これは既定値です。</dd> - <dt><code>normal</code></dt> - <dd>このキーワードは、カーニングを適用するよう要求します。</dd> - <dt><code>none</code></dt> - <dd>このキーワードは、ブラウザーがフォントのカーニング情報を使用しないようにします。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式定義 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +<h3 id="Enabling_and_disabling_kerning">カーニングの有無</h3> -<h3 id="HTML">HTML</h3> +#### HTML -<pre class="brush: html"><div id="kern"></div> -<div id="nokern"></div> -<textarea id="input">AV T. ij</textarea></pre> +```html +<div id="kern"></div> +<div id="nokern"></div> +<textarea id="input">AV T. ij</textarea> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush: css">div { +```css +div { font-size: 2rem; font-family: serif; } @@ -69,13 +79,15 @@ font-kerning: unset; #kern { font-kerning: normal; -}</pre> +} +``` -<h3 id="JavaScript">JavaScript</h3> +#### JavaScript -<pre class="brush: js">var input = document.getElementById('input'), - kern = document.getElementById('kern'), - nokern = document.getElementById('nokern'); +```js +let input = document.getElementById('input'); +let kern = document.getElementById('kern'); +let nokern = document.getElementById('nokern'); input.addEventListener('keyup', function() { kern.textContent = input.value; /* Update content */ @@ -84,35 +96,18 @@ input.addEventListener('keyup', function() { kern.textContent = input.value; /* Initialize content */ nokern.textContent = input.value; -</pre> - -<p>{{ EmbedLiveSample('Example') }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Fonts', '#propdef-font-kerning', 'font-kerning')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.font-kerning")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("font-variant")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-synthesis")}}, {{cssxref("letter-spacing")}}</li> -</ul> +``` + +{{ EmbedLiveSample('Enabling_and_disabling_kerning') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("font-variant")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-synthesis")}}, {{cssxref("letter-spacing")}} diff --git a/files/ja/web/css/font-language-override/index.md b/files/ja/web/css/font-language-override/index.md index f4ef1885c8..de79c3b9c2 100644 --- a/files/ja/web/css/font-language-override/index.md +++ b/files/ja/web/css/font-language-override/index.md @@ -3,105 +3,92 @@ title: font-language-override slug: Web/CSS/font-language-override tags: - CSS - - CSS Fonts - - CSS Property - - Reference + - CSS フォント + - CSS プロパティ + - リファレンス - font-language-override - l10n - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.font-language-override translation_of: Web/CSS/font-language-override --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>font-language-override</code></strong> は CSS のプロパティで、書体で言語に固有の字形の使用を制御します。</p> +**`font-language-override`** は CSS のプロパティで、書体で言語に固有の字形の使用を制御します。 -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ font-language-override: normal; -/* <string> 値 */ +/* <string> 値 */ font-language-override: "ENG"; /* 英語の字形 */ font-language-override: "TRK"; /* トルコ語の字形 */ /* グローバル値 */ font-language-override: initial; font-language-override: inherit; +font-language-override: revert; font-language-override: unset; -</pre> +``` -<p>既定では、 HTML の <code>lang</code> 属性がブラウザーにその言語に特化してデザインされた字形を表示することを指示します。例えば、多くのフォントが合字 <code>fi</code> に特別な文字を持っており、 "i" の点を "f" に統合しています。しかし、言語がトルコ語に設定された場合、その書体では統合した字形を使用しません。トルコ語では "i" に、点が付いたもの (<code>i</code>) と点が付かないもの (<code>ı</code>) の二つの種類があり、この合字を使用すると点が付いた "i" を点がない "ı" に誤った変換をしてしまいます。</p> +既定では、 HTML の `lang` 属性がブラウザーにその言語に特化してデザインされた字形を表示することを指示します。例えば、多くのフォントが合字 `fi` に特別な文字を持っており、 "i" の点を "f" に統合しています。しかし、言語がトルコ語に設定された場合、その書体では統合した字形を使用しません。トルコ語では "i" に、点が付いたもの (`i`) と点が付かないもの (`ı`) の二つの種類があり、この合字を使用すると点が付いた "i" を点がない "ı" に誤った変換をしてしまいます。 -<p><code>font-language-override</code> プロパティで、その書体における特定の言語の動作を上書きすることができます。これは例えば、使用している書体でその言語に対して正しい対応が行われていないときに便利です。例えば、ある書体がアゼルバイジャン語の正しい規則を持っていない場合、同様の規則に従うトルコ語の字形を強制的に使用することができます。</p> +`font-language-override` プロパティで、その書体における特定の言語の動作を上書きすることができます。これは例えば、使用している書体でその言語に対して正しい対応が行われていないときに便利です。例えば、ある書体がアゼルバイジャン語の正しい規則を持っていない場合、同様の規則に従うトルコ語の字形を強制的に使用することができます。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p><code>font-language-override</code> プロパティは、キーワード <code>normal</code> または一つの <code><string></code> として指定します。</p> +`font-language-override` プロパティは、キーワード `normal` または一つの `<string>` として指定します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>normal</code></dt> - <dd><code>lang</code> 属性で指定された言語で適切なフォントの字形を使用するよう、ブラウザーに指示します。</dd> - <dt>{{cssxref("string")}}</dt> - <dd>文字列で指定された言語で適切なフォントの字形を使用するよう、ブラウザーに指示します。値は <a href="http://www.microsoft.com/typography/otspec/languagetags.htm">OpenType language system</a> にある言語タグと一致している必要があります。例えば、 "ENG" は英語で、 "KOR" は韓国語です。</dd> -</dl> +- `normal` + - : `lang` 属性で指定された言語で適切なフォントの字形を使用するよう、ブラウザーに指示します。 +- {{cssxref("string")}} + - : 文字列で指定された言語で適切なフォントの字形を使用するよう、ブラウザーに指示します。値は [OpenType language system](https://www.microsoft.com/typography/otspec/languagetags.htm) にある言語タグと一致している必要があります。例えば、 "ENG" は英語で、 "KOR" は韓国語です。 -<h2 id="公式定義">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式定義 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 -<h3 id="Using_Danish_glyphs" name="Using_Danish_glyphs">デンマーク語の文字の使用Using Danish glyphs</h3> +<h3 id="Using_Danish_glyphs">デンマーク語の文字の使用</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><p class="para1">Default language setting.</p> -<p class="para2">This is a string with the <code>font-language-override</code> set to <code>Danish.</code></p> -</pre> +```html +<p class="para1">Default language setting.</p> +<p class="para2">This is a string with the <code>font-language-override</code> set to Danish.</p> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">p.para1 { +```css +p.para1 { font-language-override: normal; } p.para2 { font-language-override: "DAN"; -}</pre> +} +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{ EmbedLiveSample('Using_Danish_glyphs', '600', '', '', 'Web/CSS/font-language-override') }}</p> +{{ EmbedLiveSample('Using_Danish_glyphs', '600', '', '', 'Web/CSS/font-language-override') }} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Fonts', '#propdef-font-language-override', 'font-language-override')}}</td> - <td>{{Spec2('CSS4 Fonts')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.font-language-override")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref("font-variant")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-kerning")}}</li> -</ul> +- {{cssxref("font-variant")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-kerning")}} diff --git a/files/ja/web/css/font-optical-sizing/index.md b/files/ja/web/css/font-optical-sizing/index.md index 8893a42e18..d47271d488 100644 --- a/files/ja/web/css/font-optical-sizing/index.md +++ b/files/ja/web/css/font-optical-sizing/index.md @@ -5,53 +5,67 @@ tags: - CSS - CSS フォント - CSS プロパティ - - Reference + - NeedsExample + - リファレンス + - recipe:css-property +browser-compat: css.properties.font-optical-sizing translation_of: Web/CSS/font-optical-sizing --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>font-optical-sizing</code></strong> プロパティは、テキストの描画をそれぞれの大きさでの表示に最適化して表示するかどうかを設定します。これは光学的サイズバリエーション軸があるフォントのみで動作します。</p> +**`font-optical-sizing`** は [CSS](/ja/docs/Web/CSS) のプロパティで、テキストの描画をそれぞれの大きさでの表示に最適化して表示するかどうかを設定します。 -<p>例えば、小さいテキストは太い角と大きなセリフで描かれる傾向があるのに対し、大きなテキストは太い角と細い角の間のコントラストがもっと微妙に描画される傾向があります。</p> +{{EmbedInteractiveExample("pages/css/font-optical-sizing.html")}} -<div class="note"> -<p><strong>メモ</strong>: 光学的サイズバリエーション軸は、 {{cssxref("font-variation-settings")}} の <code>opsz</code> で表現されます。</p> -</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ font-optical-sizing: none; font-optical-sizing: auto; /* default */ /* グローバル値 */ font-optical-sizing: inherit; font-optical-sizing: initial; +font-optical-sizing: revert; font-optical-sizing: unset; -</pre> +``` + +### 値 + +- none + - : ブラウザーは表示の最適化のために書体の形を変更しません。 +- auto + - : ブラウザーは表示の最適化のために書体の形を変更します。 + +## 解説 -<h3 id="Values" name="Values">値</h3> +オプティカルサイズは、光学的サイズ変化軸を持つフォントに対して既定で有効になります。オプティカルサイズ変化軸は {{cssxref("font-variation-settings")}} の `opsz` で表されます。 -<dl> - <dt>none</dt> - <dd>ブラウザーは表示の最適化のために書体の形を変更しません。</dd> - <dt>auto</dt> - <dd>ブラウザーは表示の最適化のために書体の形を変更します。</dd> -</dl> +オプティカルサイジングを使用した場合、小さな文字サイズは太いストロークと大きなセリフで表現されることが多く、逆に大きな文字サイズは太いストロークと細いストロークのコントラストが強くなり、より繊細に表現されることが多くなります。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 -<pre class="brush: html"><p class="optical-sizing">This paragraph is optically sized. - This is the default across browsers.</p> +### オプティカルサイズの変更を無効化 -<p class="no-optical-sizing">This paragraph is not optically sized. - You should see a difference in supporting browsers.</p></pre> +```html +<p class="optical-sizing">This paragraph is optically sized. + This is the default across browsers.</p> -<pre class="brush: css">@font-face { +<p class="no-optical-sizing">This paragraph is not optically sized. + You should see a difference in supporting browsers.</p> +``` + +```css +@font-face { src: url('AmstelvarAlpha-VF.ttf'); font-family:'Amstelvar'; font-style: normal; @@ -64,33 +78,21 @@ p { .no-optical-sizing { font-optical-sizing: none; -}</pre> - -<div class="note"> -<p><strong>メモ</strong>: 上記で参照されているフォント — 光学的サイズを含みライセンスフリーであるもの — はテストに適しています。 <a href="https://github.com/TypeNetwork/Amstelvar/releases">GitHub からダウンロード</a>できます。</p> -</div> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Fonts', '#font-optical-sizing-def', 'font-optical-sizing')}}</td> - <td>{{Spec2('CSS4 Fonts')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.font-optical-sizing")}}</p> +} +``` + +> **Note:** 上記で参照されているフォント — 光学的サイズを含みライセンスフリーであるもの — がテストに適しています。 [GitHub からダウンロード](https://github.com/TypeNetwork/Amstelvar/releases)できます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("font-size")}} +- {{cssxref("font-size-adjust")}} +- [基本的なテキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals) diff --git a/files/ja/web/css/font-size-adjust/index.md b/files/ja/web/css/font-size-adjust/index.md index bc36ec5ced..ae6556f754 100644 --- a/files/ja/web/css/font-size-adjust/index.md +++ b/files/ja/web/css/font-size-adjust/index.md @@ -3,75 +3,97 @@ title: font-size-adjust slug: Web/CSS/font-size-adjust tags: - CSS - - CSS Fonts - - CSS Property - - Reference - - 'recipe:css-property' + - CSS フォント + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.font-size-adjust translation_of: Web/CSS/font-size-adjust --- -<p><strong><code>font-size-adjust</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 (大文字の大きさを定義する) 現在のフォントサイズに相対的な小文字の大きさを設定します。</p> +**`font-size-adjust`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 (大文字の大きさを定義する) 現在のフォントサイズに相対的な小文字の大きさを設定します。 -<pre class="brush:css no-line-numbers notranslate">/* 指定されたフォントサイズを使用 */ +```css +/* 指定されたフォントサイズを使用 */ font-size-adjust: none; /* 小文字のフォントサイズを、指定された フォントサイズの半分にする */ font-size-adjust: 0.5; +/* 2 つの値 - Level 5 仕様書で追加 */ +font-size-adjust: ex-height 0.5; + /* グローバル値 */ font-size-adjust: inherit; font-size-adjust: initial; +font-size-adjust: revert; font-size-adjust: unset; -</pre> +``` -<p>このプロパティが便利なのは、特に小さなサイズのフォントの読みやすさは、大文字の高さではなく小文字の高さで決まるからです。最初に選択した {{Cssxref("font-family")}} が利用できず、その代替フォントのアスペクト比 (小文字の大きさとフォントの大きさの比率) が著しく異なる場合、読みやすさが問題になることがあります。</p> +このプロパティが便利なのは、特に小さなサイズのフォントの読みやすさは、大文字の高さではなく小文字の高さで決まるからです。最初に選択した {{Cssxref("font-family")}} が利用できず、その代替フォントのアスペクト比 (小文字の大きさとフォントの大きさの比率) が著しく異なる場合、読みやすさが問題になることがあります。 -<p>このプロパティの使い方は、 <code>font-size-adjust</code> に対応していないブラウザーと互換性を持たせるため、 {{ Cssxref("font-size") }} プロパティに掛け合わせる数値として指定します。つまり、このプロパティ指定された値は、ふつう最初に選択されたフォントのアスペクト比になります。例えば、次のように指定されたスタイルシートでは、</p> +このプロパティの使い方は、 `font-size-adjust` に対応していないブラウザーと互換性を持たせるため、 {{ Cssxref("font-size") }} プロパティに掛け合わせる数値として指定します。つまり、このプロパティ指定された値は、ふつう最初に選択されたフォントのアスペクト比になります。例えば、次のように指定されたスタイルシートでは、 -<pre class="brush: css notranslate">font-size: 14px; +```css +font-size: 14px; font-size-adjust: 0.5; -</pre> +``` + +実際のところ、フォントの小文字が `7px` の高さ (0.5 x 14px) を持つべきであると指定しています。これは、 `font-size-adjust` に対応していないブラウザーでは `14px` のフォントが使用されている場合でも、妥当な結果が得られます。 + +## 構文 -<p>実際のところ、フォントの小文字が <code>7px</code> の高さ (0.5 x 14px) を持つべきであると指定しています。これは、 <code>font-size-adjust</code> に対応していないブラウザーでは <code>14px</code> のフォントが使用されている場合でも、妥当な結果が得られます。</p> +### 値 -<h2 id="Syntax" name="Syntax">構文</h2> +- `none` + - : {{ Cssxref("font-size") }} プロパティだけを基準にフォントサイズを選びます。 +- ex-height | cap-height | ch-width | ic-width | ic-height -<h3 id="Values" name="Values">値</h3> + - : 正規化の対象となるフォントメトリックを指定します。既定値は `ex-height` です。次のいずれかです。 -<dl> - <dt><code>none</code></dt> - <dd>{{ Cssxref("font-size") }} プロパティだけを基準にフォントサイズを選びます。</dd> - <dt>{{cssxref("<number>")}}</dt> - <dd> - <p>{{ Cssxref("font-size") }} に掛け合わせて小文字の高さ (そのフォントの文字 x の高さ) になるような値を指定し、フォントサイズを選びます。</p> + - `ex-height` + - : x-height をフォントサイズで割った値を使って、フォントのアスペクト値を正規化します。 + - `cap-height` + - : フォントの cap-height を正規化し、cap-height をフォントサイズで使用します。 + - `ch-width` + - : "0" (ZERO, U+0030) の送り幅をフォントサイズで割った値を使って、フォントの横方向の狭ピッチを正規化します。 + - `ic-width` + - : "水" (CJK water ideograph, U+6C34) の送り幅をフォントサイズで割って、フォントの水平方向のワイドピッチを正規化します。 + - `ic-height` + - : フォントの垂直方向のワイドピッチを、"水" (CJK water ideograph, U+6C34) のアドバンスハイトをフォントサイズで割った値で正規化します。 - <p>指定した数値は、通常は最初に選んだ {{ Cssxref("font-family") }} のアスペクト比 (文字 x の高さとフォントサイズの比率) にしてください。こうすれば、最初に選んだフォントが利用可能なら、ブラウザーが <code>font-size-adjust</code> に対応しているかどうかに関わらず、どのブラウザーでも同じサイズで表示されます。</p> +- {{cssxref("<number>")}} - <p><code>0</code> は高さが 0 のテキスト (非表示テキスト) になります。</p> - </dd> -</dl> + - : {{ Cssxref("font-size") }} に掛け合わせて小文字の高さ (そのフォントの文字 x の高さ) になるような値を指定し、フォントサイズを選びます。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> + 指定した数値は、通常は最初に選んだ {{ Cssxref("font-family") }} のアスペクト比 (文字 x の高さとフォントサイズの比率) にしてください。こうすれば、最初に選んだフォントが利用可能なら、ブラウザーが `font-size-adjust` に対応しているかどうかに関わらず、どのブラウザーでも同じサイズで表示されます。 -<p>{{cssinfo}}</p> + `0` は高さが 0 のテキスト (非表示テキスト) になります。 -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 公式定義 + +{{cssinfo}} + +## 形式定義 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Adjusting_lower-case_letter_sizes" name="Adjusting_lower-case_letter_sizes">小文字の大きさの調整</h3> +<h3 id="Adjusting_lower-case_letter_sizes">小文字の大きさの調整</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><p class="times">This text uses the Times font (10px), which is hard to read in small sizes.</p> -<p class="verdana">This text uses the Verdana font (10px), which has relatively large lowercase letters.</p> -<p class="adjtimes">This is the 10px Times, but now adjusted to the same aspect ratio as the Verdana.</p></pre> +```html +<p class="times">This text uses the Times font (10px), which is hard to read in small sizes.</p> +<p class="verdana">This text uses the Verdana font (10px), which has relatively large lowercase letters.</p> +<p class="adjtimes">This is the 10px Times, but now adjusted to the same aspect ratio as the Verdana.</p> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">.times { +```css +.times { font-family: Times, serif; font-size: 10px; } @@ -83,40 +105,27 @@ font-size-adjust: 0.5; .adjtimes { font-family: Times, serif; - font-size-adjust: 0.58; + font-size-adjust: ex-height 0.58; font-size: 10px; } -</pre> +``` + +#### 結果 -<h4 id="Results" name="Results">結果</h4> +{{ EmbedLiveSample('Adjusting_lower-case_letter_sizes', 500, 200) }} -<p>{{ EmbedLiveSample('Adjusting_lower-case_letter_sizes', 500, 200) }}</p> +## 仕様書 -<h2 id="Specifications" name="Specifications">仕様書</h2> +{{Specifications}} -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Fonts', '#propdef-font-size-adjust', 'font-size-adjust') }}</td> - <td>{{ Spec2('CSS3 Fonts') }}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +## ブラウザーの互換性 -<div class="note"> -<p><code>font-size-adjust</code> は最初に CSS 2 で定義されましたが、 CSS 2.1 で削除されました。 CSS 3 で新たに定義し直されました。</p> -</div> +{{Compat}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +{{CSSRef}} -<p>{{Compat("css.properties.font-size-adjust")}}</p> +## 関連情報 -<div>{{CSSRef}}</div> +- {{cssxref("font-size")}} +- {{cssxref("font-weight")}} +- [基本的なテキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals) diff --git a/files/ja/web/css/font-size/index.md b/files/ja/web/css/font-size/index.md index 634f106168..caf3a83def 100644 --- a/files/ja/web/css/font-size/index.md +++ b/files/ja/web/css/font-size/index.md @@ -3,23 +3,22 @@ title: font-size slug: Web/CSS/font-size tags: - CSS - - CSS Fonts - - CSS Property - - Reference - - 'recipe:css-property' + - CSS フォント + - CSS プロパティ + - リファレンス + - recipe:css-property translation_of: Web/CSS/font-size --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>font-size</code></strong> プロパティはフォントの大きさを定義します。フォントの大きさを変更すると、フォントの大きさに相対的な {{cssxref("<length>")}} の単位例えば <code>em</code>, <code>ex</code>, なども更新されます。</span></p> +**`font-size`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フォントの大きさを定義します。フォントの大きさを変更すると、フォントの大きさに相対的な {{cssxref("<length>")}} の単位例えば `em`, `ex`, なども更新されます。 -<div>{{EmbedInteractiveExample("pages/css/font-size.html")}}</div> +{{EmbedInteractiveExample("pages/css/font-size.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* <absolute-size> 値 */ +```css +/* <absolute-size> 値 */ font-size: xx-small; font-size: x-small; font-size: small; @@ -29,140 +28,156 @@ font-size: x-large; font-size: xx-large; font-size: xxx-large; -/* <relative-size> 値 */ +/* <relative-size> 値 */ font-size: smaller; font-size: larger; -/* <length> 値 */ +/* <length> 値 */ font-size: 12px; font-size: 0.8em; -/* <percentage> 値 */ +/* <percentage> 値 */ font-size: 80%; /* グローバル値 */ font-size: inherit; font-size: initial; +font-size: revert; font-size: unset; -</pre> - -<p><code>font-size</code> プロパティは、以下の何れかの方法で指定します。</p> - -<ul> - <li><a href="#absolute-size">絶対的サイズ</a>のキーワードまたは<a href="#relative-size">相対的サイズ</a>のキーワードのうちの一つ</li> - <li><code><length></code> または親要素のフォントサイズからの相対的な <code><percentage></code></li> -</ul> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt id="absolute-size"><code>xx-small</code>, <code>x-small</code>, <code>small</code>, <code>medium</code>, <code>large</code>, <code>x-large</code>, <code>xx-large</code>, <code>xxx-large</code></dt> - <dd>ユーザーの既定のフォントサイズ (つまり <code>medium</code>) を基準とした絶対的なサイズのキーワードです。</dd> - <dt id="relative-size"><code>larger</code>, <code>smaller</code></dt> - <dd>相対的なサイズのキーワードです。フォントは親要素のフォントサイズから相対的に、上記の絶対的サイズのキーワードで使われている倍率におよそ沿う形で拡大または縮小されます。</dd> - <dt id="<length>">{{cssxref("<length>")}}</dt> - <dd> - <p>正の {{cssxref("<length>")}} の値。 (<code>em</code> や <code>ex</code> などの) フォント相対単位のほとんどは、親要素のフォントサイズに対する相対値です。</p> - - <p>(<code>rem</code> などの) ルートを基準としたフォント相対単位では、フォントサイズは {{HTMLElement("html")}} (ルート) 要素で使われているフォントのサイズからの相対値です。</p> - </dd> - <dt id="<percentage>">{{cssxref("<percentage>")}}</dt> - <dd> - <p>正の {{cssxref("<percentage>")}} 値で、親要素のフォントサイズからの相対値です。</p> - </dd> -</dl> - -<div class="note"> -<p><strong>注:</strong> アクセシビリティを最大化するために、一般的に最適なのは、ユーザーの既定のフォントサイズからの相対値を使用することです。</p> -</div> +``` + +`font-size` プロパティは、以下の何れかの方法で指定します。 + +- 絶対的サイズまたは相対的サイズのキーワードのうちの一つ +- `<length>` または親要素のフォントサイズからの相対的な `<percentage>` + +### 値 + +- `xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`, `xxx-large` + - : 絶対的なサイズのキーワードで、ユーザーの既定のフォントサイズ (つまり `medium`) を基準とします。 +- `larger`, `smaller` + - : 相対的なサイズのキーワードです。フォントは親要素のフォントサイズから相対的に、上記の絶対的サイズのキーワードで使われている倍率におよそ沿う形で拡大または縮小されます。 +- {{cssxref("<length>")}} + + - : 正の {{cssxref("<length>")}} の値。 (`em` や `ex` などの) フォント相対単位のほとんどは、親要素のフォントサイズに対する相対値です。 -<h2 id="Description" name="Description">解説</h2> + (`rem` などの) ルートを基準としたフォント相対単位では、フォントサイズは {{HTMLElement("html")}} (ルート) 要素で使われているフォントのサイズからの相対値です。 -<p>フォントサイズの定義にはいくつかの方法があり、キーワードと数値 (ピクセルや em の場合) が使われます。個々のウェブページで必要とされるものにあわせて、最適な方法を選んでください。</p> +- {{cssxref("<percentage>")}} + - : 正の {{cssxref("<percentage>")}} 値で、親要素のフォントサイズからの相対値です。 -<h3 id="Keywords" name="Keywords">キーワード</h3> +> **Note:** アクセシビリティを最大化するために、一般的に最適なのは、ユーザーの既定のフォントサイズからの相対値を使用することです。 -<p>キーワードはウェブのフォントサイズを決める良い方法です。 {{HTMLElement("body")}} 要素のフォントサイズをキーワードで定義すると、ページのどこであってもフォントサイズを相対的に調整することができ、したがってページ全体のフォントサイズの拡大縮小が容易にできます。</p> +## 解説 -<h3 id="Pixels" name="Pixels">ピクセル</h3> +フォントサイズの定義にはいくつかの方法があり、キーワードと数値 (ピクセルや em の場合) が使われます。個々のウェブページで必要とされるものにあわせて、最適な方法を選んでください。 -<p>ピクセル値 (<code>px</code>) でフォントサイズを設定することは、ピクセル制度が必要な場合に適しています。ピクセル値は静的です。これは OS にもブラウザーにも依存しない方法であり、ブラウザーに文字を指定した高さのピクセルの数値で描画することを厳密に指示します。ブラウザーによって、同じ効果を得るのに異なるアルゴリズムが使われている可能性があるため、結果は多少異なるかもしれません。</p> +### キーワード -<p>フォントサイズの指定を組み合わせることもできます。例えば親要素のフォントサイズを <code>16px</code> 、子要素を <code>larger</code> とした場合、子要素のフォントサイズは親要素の <code>16px</code> より大きくレンダリングされます。</p> +キーワードはウェブのフォントサイズを決める良い方法です。 {{HTMLElement("body")}} 要素のフォントサイズをキーワードで定義すると、ページのどこであってもフォントサイズを相対的に調整することができ、したがってページ全体のフォントサイズの拡大縮小が容易にできます。 -<div class="note"><strong>注:</strong> フォントサイズを <code>px</code> で定義すると、ブラウザーによってはユーザーがフォントサイズを変更することができないため、<em><a href="https://ja.wikipedia.org/wiki/%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3">アクセシブル</a></em>ではありません。例えば、弱視の人は、ウェブデザイナーが選んだサイズより大きなフォントにしたがるかもしれません。こうした配慮のあるデザインをしたい場合は、フォントサイズにピクセルを使わないようにしてください。</div> +### ピクセル -<h3 id="Ems" name="Ems">em</h3> +ピクセル値 (`px`) でフォントサイズを設定することは、ピクセル精度が必要な場合に適しています。ピクセル値は静的です。これは OS にもブラウザーにも依存しない方法であり、ブラウザーに文字を指定した高さのピクセルの数値で描画することを厳密に指示します。ブラウザーによって、同じ効果を得るのに異なるアルゴリズムが使われている可能性があるため、結果は多少異なるかもしれません。 -<p>フォントサイズを設定するもうひとつの方法は <code>em</code> 値を使うものです。 <code>em</code> 値の大きさは動的です。<code>font-size</code> プロパティを定義すると、 <code>em</code> はその <code>em</code> が用いられている要素のフォントサイズと一致します。ページ内でまだフォントサイズをセットしていなければ、ブラウザーの既定値、たいてい 16px が使われます。したがって、既定では 1em = 16px であり、2em = 32px です。もし body 要素で <code>font-size</code> を 20px にセットすれば、1em = 20px で 2em = 40px です。本質的には、値の 2 が現在の em の大きさの乗数であることに注意してください。</p> +フォントサイズの指定を組み合わせることもできます。例えば親要素のフォントサイズを `16px` 、子要素を `larger` とした場合、子要素のフォントサイズは親要素の `16px` より大きくレンダリングされます。 -<p>必要なピクセル値に相当する em は、次の式で計算することができます。</p> +> **Note:** フォントサイズを `px` で定義すると、ブラウザーによってはユーザーがフォントサイズを変更することができないため、[_アクセシブル_](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3)ではありません。例えば、弱視の人は、ウェブデザイナーが選んだサイズより大きなフォントにしたがるかもしれません。こうした配慮のあるデザインをしたい場合は、フォントサイズにピクセルを使わないようにしてください。 -<pre class="brush: plain notranslate">em = 要素に設定したい pixel 値 / 親要素のピクセル単位でのフォントサイズ</pre> +<h3 id="Ems">em</h3> -<p>例えば、 body のフォントサイズが 1em にセットされているものとすると、ブラウザー標準の 1em = 16px です。使いたいフォントサイズが 12px なら、 0.75em を指定します (12/16 = 0.75 だからです)。同様に、使いたいフォントサイズが 10px なら、 0.625em を指定します (10/16 = 0.625)。22px なら 1.375em です (22/16)。</p> +`em` の値を使用すると、動的または計算されたフォントサイズが作成されます (歴史的には、`em` の単位は、ある書体の大文字の "M" の幅に由来していました)。この数値は、それが使われている要素の `font-size` プロパティの乗数として機能します。この例を見てください。 -<p>em は読者が選んだフォントに自動的に再調整されるため、CSS ではとても便利な単位です。</p> +```css +p { + font-size: 2em; +} +``` + +この場合、`<p>` 要素のフォントサイズは、`<p>` 要素で継承されている `font-size` の計算値の 2 倍になります。 すなわち、`1em` の `font-size` は、それが使われている要素の `font-size` の計算値に等しくなります。 + +`font-size` が `<p>` の何れかの祖先に設定されていない場合、`1em` はブラウザーの既定の `font-size` と等しくなり、大抵は `16px' です。したがって、既定では `1em` が `16px` と同等であり、`2em` は `32px` と同等です。もし `font-size` が 20px と `<body>` 要素に設定されていれば、`1em` は `<p>` 要素において `20px` となり、`2em` は で `40px` と同等になります。 + +必要なピクセル値に相当する em は、次の式で計算することができます。 -<p><code>em</code> と <code>ex</code> の単位が {{cssxref("font-size")}} プロパティで用いられると、親要素のフォントサイズからの相対になります (要素のフォントサイズからの相対値を使用する他のプロパティとは異なります)。すなわち、 <code>em</code> の単位やパーセント値は {{cssxref("font-size")}} の場合と同様です。</p> +```plain +em = 要素に設定したい pixel 値 / 親要素のピクセル単位でのフォントサイズ +``` -<p>em 値が複合的であるということは、覚えておくべき重要な事実です。以下の HTML と CSS をご覧ください。</p> +例えば、`<body>` のフォントサイズが `16px` に設定されていたとします。使いたいフォントサイズが 12px であれば、 `0.75em` を指定してください (12/16 = 0.75 だからです)。同様に、使いたいフォントサイズが `10px` なら、`0.625em` を指定してください (10/16 = 0.625)。`22px` ならば、`1.375em` です (22/16)。 -<pre class="brush: css notranslate">html { +`em` は、読者が使用するフォントに合わせて長さを自動的に調整するので、CSS では非常に便利な単位です。 + +em 値が複合的であるということは、覚えておくべき重要な事実です。以下の HTML と CSS をご覧ください。 + +```css +html { font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ } span { font-size: 1.6em; -}</pre> +} +``` -<pre class="brush: html notranslate"><div> -<span>Outer <span>inner</span> outer</span> -</div> -</pre> +```html +<div> +<span>Outer <span>inner</span> outer</span> +</div> +``` -<p>結果は以下のようになります。</p> +結果は以下のようになります。 -<p>{{EmbedLiveSample("Ems", 400, 40)}}</p> +{{EmbedLiveSample("Ems", 400, 40)}} -<p>ブラウザーの既定の <code>font-size</code> が 16px と仮定すると、単語 “outer” は 16px で描画され、単語 “inner” は 25.6px で描画されます。これは、内側の {{HTMLElement("span")}} 要素の <code>font-size</code> は 1.6em ですが、これは親要素の <code>font-size</code> からの相対値で、さらにその親要素の <code>font-size</code> からの相対値になるからです。これはよく<ruby><strong>複合</strong><rp> (</rp><rt>compounding</rt><rp>) </rp></ruby>と呼ばれます。</p> +ブラウザーの既定の `font-size` が 16px と仮定すると、単語 “outer” は 16px で描画され、単語 “inner” は 25.6px で描画されます。これは、内側の {{HTMLElement("span")}} 要素の `font-size` は 1.6em ですが、これは親要素の `font-size` からの相対値で、さらにその親要素の `font-size` からの相対値になるからです。これはよく**複合** (compounding) と呼ばれます。 <h3 id="Rems" name="Rems">rem</h3> -<p><code>rem</code> 値は、複合の問題を避けるために考案されました。 <code>rem</code> 値は親要素ではなく、ルート <code>html</code> 要素に対して相対的です。言い換えると、親要素のサイズの影響を受けることなく相対的な方法でフォントサイズを指定できますので、複合が発生しません。</p> +`rem` 値は、複合の問題を避けるために考案されました。 `rem` 値は親要素ではなく、ルート `html` 要素に対して相対的です。言い換えると、親要素のサイズの影響を受けることなく相対的な方法でフォントサイズを指定できますので、複合が発生しません。 -<p>以下の CSS は、先ほどの例とほぼ同じです。唯一の違いは、単位を <code>rem</code> に変更したことです。</p> +以下の CSS は、先ほどの例とほぼ同じです。唯一の違いは、単位を `rem` に変更したことです。 -<pre class="brush: css notranslate">html { +```css +html { font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ } span { font-size: 1.6rem; } -</pre> +``` + +この CSS を同じ HTML に適用すると、以下のようになります。 + +```html +<span>Outer <span>inner</span> outer</span> +``` + +{{EmbedLiveSample("Rems", 400, 40)}} -<p>この CSS を同じ HTML に適用すると、以下のようになります:</p> +この例では、単語 “outer inner outer” はすべて 16px で表示されます (ブラウザーの `font-size` は既定値が 16px のままであるとします)。 -<pre class="brush: html notranslate"><span>Outer <span>inner</span> outer</span></pre> +### ex -<p>{{EmbedLiveSample("Rems", 400, 40)}}</p> +`em` の単位と同様に、`ex` の単位を使用して設定された要素の `font-size` は、計算または動的に行われます。全く同じように動作しますが、`ex` の単位を使用して `font-size` プロパティを設定する場合、`font-size` はページで使用されている[最初に利用可能なフォント](https://www.w3.org/TR/css3-fonts/#first-available-font)の x-height に等しいことを除いては、同じように動作します。数値は、要素の継承された `font-size` と `font-size` の複合体を相対的に乗算します。 -<p>この例では、単語 “outer inner outer” はすべて 16px で表示されます (ブラウザーの <code>font-size</code> は既定値が 10px のままであるとします)。</p> +`ex` などの[フォントに関する長さの単位](https://drafts.csswg.org/css-values-4/#font-relative-length)の詳細な説明はW3C Editor's Draftを参照してください。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式定義 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_font_sizes" name="Setting_font_sizes">フォントサイズの設定</h3> +<h3 id="Setting_font_sizes">フォントサイズの設定</h3> -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">.small { +```css +.small { font-size: xx-small; } .larger { @@ -174,53 +189,32 @@ span { .percent { font-size: 200%; } -</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><h1 class="small">Small H1</h1> -<h1 class="larger">Larger H1</h1> -<h1 class="point">24 point H1</h1> -<h1 class="percent">200% H1</h1></pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Setting_font_sizes','600','200')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Fonts', '#font-size-prop', 'font-size')}}</td> - <td>{{Spec2('CSS4 Fonts')}}</td> - <td><code>xxx-large</code> キーワードを追加</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#font-size', 'font-size')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.font-size")}}</p> +``` + +#### HTML + +```html +<h1 class="small">Small H1</h1> +<h1 class="larger">Larger H1</h1> +<h1 class="point">24 point H1</h1> +<h1 class="percent">200% H1</h1> +``` + +#### 結果 + +{{EmbedLiveSample('Setting_font_sizes','600','200')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("font-size-adjust")}} +- {{cssxref("font-style")}} +- {{cssxref("font-weight")}} +- [基本的なテキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals) diff --git a/files/ja/web/css/font-stretch/index.md b/files/ja/web/css/font-stretch/index.md index 07040792cb..304ef6bb31 100644 --- a/files/ja/web/css/font-stretch/index.md +++ b/files/ja/web/css/font-stretch/index.md @@ -6,13 +6,20 @@ tags: - CSS フォント - CSS プロパティ - リファレンス + - recipe:css-property +browser-compat: css.properties.font-stretch translation_of: Web/CSS/font-stretch --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><code>font-stretch</code> CSS プロパティは、フォントの normal, condensed, expanded のフェイスを選択します。</span></p> +**`font-stretch`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フォントの normal, condensed, expanded のフェイスを選択します。 -<pre class="brush:css no-line-numbers">/* キーワード値 */ +{{EmbedInteractiveExample("pages/css/font-stretch.html")}} + +## 構文 + +```css +/* キーワード値 */ font-stretch: ultra-condensed; font-stretch: extra-condensed; font-stretch: condensed; @@ -24,238 +31,139 @@ font-stretch: extra-expanded; font-stretch: ultra-expanded; /* パーセント値 */ -font-stretch: 0%; font-stretch: 50%; +font-stretch: 100%; font-stretch: 200%; /* グローバル値 */ font-stretch: inherit; font-stretch: initial; +font-stretch: revert; font-stretch: unset; -</pre> - -<p>フォントファミリによっては追加のフェイスを提供しており、通常より狭い文字、 (<em>condensed</em> フェイス)、通常より広い文字 (<em>expanded</em> フェイス) などがあります。</p> - -<p><code>font-stretch</code> を使うと、そのようなフォントで condensed や expanded フェイスを選択することができます。使用しているフォントが condensed や expanded フェイスを提供していない場合は、このプロパティは効果がありません。</p> - -<p>一部のサンプルフォントでこのプロパティの効果を見るには、以下の<a href="#Font_face_selection">フォントフェイスの選択</a>をご覧ください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p>このプロパティは、単一のキーワード値又は単一の {{cssxref("<percentage>")}} 値として指定することができます。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>normal</code></dt> - <dd>通常のフォントフェイスを指定します。</dd> - <dt><code>semi-condensed</code>, <code>condensed</code>, <code>extra-condensed</code>, <code>ultra-condensed</code></dt> - <dd>通常より幅の狭い (condensed) フォントフェイスを指定します。最も幅の狭いフェイスは ultra-condensed です。</dd> - <dt><code>semi-expanded</code>, <code>expanded</code>, <code>extra-expanded</code>, <code>ultra-expanded</code></dt> - <dd>通常より幅の広い (expanded) フォントフェイスを指定します。最も幅の広いフェイスは ultra-expanded です。</dd> - <dt><code><percentage></code></dt> - <dd>{{cssxref("<percentage>")}} 値です。このプロパティでは負の数は許可されていません。</dd> -</dl> - -<p><code>font-stretch</code> の古いバージョンの仕様書では、このプロパティは9つのキーワード値のみを受け付けていました。 CSS Fonts Level 4 で、構文が <code><percentage></code> を受け付けるように拡張されました。これによって、文字幅がもっと連続的になるように提供することができます。 TrueType や OpenType のフォントでは、 "wdth" バリエーションが様々な幅を実装するために使用されます。</p> - -<p>但し、 <code><percentage></code> の構文はまた、すべてのブラウザーが対応しているわけではありません。詳しくは <a href="#Browser_compatibility">Browser compatibility</a> をご覧ください。</p> - -<h3 id="Keyword_to_numeric_mapping" name="Keyword_to_numeric_mapping">キーワードと数値の対応</h3> - -<p>以下の表は、キーワード値とパーセントの数値の間の対応を示しています。</p> - -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col">キーワード</th> - <th scope="col">パーセント値</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>ultra-condensed</code></td> - <td>50%</td> - </tr> - <tr> - <td><code>extra-condensed</code></td> - <td>62.5%</td> - </tr> - <tr> - <td><code>condensed</code></td> - <td>75%</td> - </tr> - <tr> - <td><code>semi-condensed</code></td> - <td>87.5%</td> - </tr> - <tr> - <td><code>normal</code></td> - <td>100%</td> - </tr> - <tr> - <td><code>semi-expanded</code></td> - <td>112.5%</td> - </tr> - <tr> - <td><code>expanded</code></td> - <td>125%</td> - </tr> - <tr> - <td><code>extra-expanded</code></td> - <td>150%</td> - </tr> - <tr> - <td><code>ultra-expanded</code></td> - <td>200%</td> - </tr> - </tbody> -</table> +``` -<h3 id="Font_face_selection" name="Font_face_selection">フォントフェイスの選択</h3> +このプロパティは、単一のキーワード値または単一の {{cssxref("<percentage>")}} 値として指定することができます。 -<p><code>font-stretch</code> で与えられた値で選択されるフェイスは、フォントがそのフェイスに対応しているかによります。与えられた値に正確に一致するフェイスがフォントに存在しない場合、値が100%よりも小さい場合はより狭いフェイスが割り当てられ、100%と等しいか大きい場合はより広いフェイスが割り当てられます。</p> +### 値 -<p>以下の表は二つの異なるフォントにおいて、 <code>font-stretch</code> に様々なパーセント値を提供した場合の効果を示しています。</p> +- `normal` + - : 通常のフォントフェイスを指定します。 +- `semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed` + - : 通常より幅の狭い (condensed) フォントフェイスを指定します。最も幅の狭いフェイスは ultra-condensed です。 +- `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded` + - : 通常より幅の広い (expanded) フォントフェイスを指定します。最も幅の広いフェイスは ultra-expanded です。 +- `<percentage>` -<table class="standard-table"> - <thead> - <tr> - <th scope="row"> </th> - <th scope="col">50%</th> - <th scope="col">62.5%</th> - <th scope="col">75%</th> - <th scope="col">87.5%</th> - <th scope="col">100%</th> - <th scope="col">112.5%</th> - <th scope="col">125%</th> - <th scope="col">150%</th> - <th scope="col">200%</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Helvetica Neue</th> - <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> - </tr> - <tr> - <th scope="row">League Mono Variable</th> - <td><img alt="" src="https://mdn.mozillademos.org/files/16030/Screenshot_2018-06-06_example_page.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16031/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16032/Screenshot_2018-06-06_example_page2.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16033/Screenshot_2018-06-06_example_page3.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16034/l-100.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16035/l-112.5.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16036/l-125.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16037/l-150.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16038/l-200.png" style="height: 58px; width: 45px;"></td> - </tr> - </tbody> -</table> + - : {{cssxref("<percentage>")}} 値です。このプロパティでは負の数は許可されていません。 -<ul> - <li>Helvetica Neue は、既定で macOS にインストールされているもので、普通のフェイスに加えて一つの condensed のフェイスを持ちます。 <code>font-stretch</code> の100%より小さいすべての値は condensed のフェイスを選択し、それ以外の値は normal のフェイスを選択します。</li> - <li><a href="http://tylerfinck.com/leaguemonovariable/">League Mono Variable</a> は、 <code>font-stretch</code> のさまざまなパーセント値に対して、幅の連続的な範囲のようなものを提供する可変フォントです。</li> -</ul> + > **Note:** `font-stretch` の古いバージョンの仕様書では、このプロパティは 9 つのキーワード値のみを受け付けていました。 + > + > **{{ SpecName('CSS4 Fonts', '#propdef-font-stretch') }} 仕様書**で、構文が `<percentage>` を受け付けるように拡張されました。これによって、文字幅がもっと連続的になるように提供することができます。 TrueType や OpenType のフォントでは、 "`wdth`" バリエーションが様々な幅を実装するために使用されます。 + > + > 但し、`<percentage>` の構文はまた、すべてのブラウザーが対応しているわけではありません。詳しくは[ブラウザーの互換性](#ブラウザーの互換性)をご覧ください。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +### キーワードと数値の対応 -{{csssyntax}} +以下の表は、キーワード値とパーセントの数値の間の対応を示しています。 + +| キーワード | パーセント値 | +| ----------------- | ------------ | +| `ultra-condensed` | 50% | +| `extra-condensed` | 62.5% | +| `condensed` | 75% | +| `semi-condensed` | 87.5% | +| `normal` | 100% | +| `semi-expanded` | 112.5% | +| `expanded` | 125% | +| `extra-expanded` | 150% | +| `ultra-expanded` | 200% | -<h2 id="Example" name="Example">例</h2> +## 解説 -<h3 id="Percentage_syntax" name="Percentage_syntax">パーセント値の構文</h3> +フォントファミリーによっては追加のフェイスを提供しており、通常より狭い文字、 (_condensed_ フェイス)、通常より広い文字 (_expanded_ フェイス) などがあります。 -<p>なお、この例は <code><percentage></code> 値に対応したブラウザーのみで動作します。</p> +`font-stretch` を使うと、そのようなフォントで condensed や expanded フェイスを選択することができます。使用しているフォントが condensed や expanded フェイスを提供していない場合は、このプロパティは効果がありません。 -<div id="variable-font-demo"> -<h4 id="HTML">HTML</h4> +### フォントフェイスの選択 -<pre class="brush: html"><div class="container"> - <p class="condensed">an elephantine lizard</p> - <p class="normal">an elephantine lizard</p> - <p class="expanded">an elephantine lizard</p> -</div> -</pre> +`font-stretch` で与えられた値で選択されるフェイスは、フォントがそのフェイスに対応しているかによります。与えられた値に正確に一致するフェイスがフォントに存在しない場合、値が 100% よりも小さい場合はより狭いフェイスが割り当てられ、100% と等しいか大きい場合はより広いフェイスが割り当てられます。 -<h4 id="CSS">CSS</h4> +以下の表は 2 つの異なるフォントにおいて、 `font-stretch` に様々なパーセント値を提供した場合の効果を示しています。 -<pre class="brush: css">/* -This example uses the League Mono Variable font, developed by -Tyler Finck (https://www.tylerfinck.com/) and used here under -the terms of the SIL Open Font License, Version 1.1: -http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web -*/ +<table class="standard-table"> + <thead> + <tr> + <th scope="row"></th> + <th scope="col">50%</th> + <th scope="col">62.5%</th> + <th scope="col">75%</th> + <th scope="col">87.5%</th> + <th scope="col">100%</th> + <th scope="col">112.5%</th> + <th scope="col">125%</th> + <th scope="col">150%</th> + <th scope="col">200%</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Helvetica Neue</th> + <td><img alt="" src="screenshot_2018-06-06_example_page.png" /></td> + <td><img alt="" src="screenshot_2018-06-06_example_page.png" /></td> + <td><img alt="" src="screenshot_2018-06-06_example_page.png" /></td> + <td><img alt="" src="screenshot_2018-06-06_example_page.png" /></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png" /></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png" /></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png" /></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png" /></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png" /></td> + </tr> + <tr> + <th scope="row">League Mono Variable</th> + <td><img alt="" src="screenshot_2018-06-06_example_page.png" /></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png" /></td> + <td><img alt="" src="screenshot_2018-06-06_example_page2.png" /></td> + <td><img alt="" src="screenshot_2018-06-06_example_page3.png" /></td> + <td><img alt="" src="l-100.png" /></td> + <td><img alt="" src="l-112.5.png" /></td> + <td><img alt="" src="l-125.png" /></td> + <td><img alt="" src="l-150.png" /></td> + <td><img alt="" src="l-200.png" /></td> + </tr> + </tbody> +</table> -@font-face { - src: url('https://mdn.mozillademos.org/files/16014/LeagueMonoVariable.ttf'); - font-family:'LeagueMonoVariable'; - font-style: normal; -} +- **Helvetica Neue** は、既定で macOS にインストールされているもので、普通のフェイスに加えて一つの condensed のフェイスを持ちます。 `font-stretch` の100%より小さいすべての値は condensed のフェイスを選択し、それ以外の値は normal のフェイスを選択します。 +- **[League Mono Variable](https://tylerfinck.com/leaguemonovariable/)** は、 `font-stretch` のさまざまなパーセント値に対して、幅の連続的な範囲のようなものを提供する可変フォントです。 -.container { - border: 10px solid #f5f9fa; - padding: 0 1rem; - font: 1.5rem 'LeagueMonoVariable', sans-serif; -} +## 公式定義 -.condensed { - font-stretch: 50%; -} +{{cssinfo}} -.normal { - font-stretch: 100%; -} +## 形式文法 -.expanded { - font-stretch: 200%; -} +{{csssyntax}} -</pre> -</div> +## 例 -<h4 id="Result" name="Result">結果</h4> +### フォントの引き伸ばしパーセント値の設定 -<p>{{EmbedLiveSample("variable-font-demo", 1200, 250, "", "", "example-outcome-frame")}}</p> +> **Note:** この例は、`<percentage>` 値に対応しているブラウザーでのみ動作します。 -<h2 id="Specifications" name="Specifications">仕様書</h2> +{{EmbedGHLiveSample("css-examples/variable-fonts/font-stretch.html", '100%', 950)}} -<table class="standard-table"> - <thead> - <tr> - <th>仕様書</th> - <th>状況</th> - <th>備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS4 Fonts', '#propdef-font-stretch', 'font-stretch') }}</td> - <td>{{ Spec2('CSS4 Fonts') }}</td> - <td>可変フォントに <code><percentage></code> の構文を追加。</td> - </tr> - <tr> - <td>{{ SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch') }}</td> - <td>{{ Spec2('CSS3 Fonts') }}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +## 仕様書 + +{{Specifications}} + +> **Note:** CSS プロパティ `font-stretch` は初め CSS 2 で定義されましたが、CSS 2.1 で実装経験不足のため外されました。CSS 3 では新しく定義されました。 -<div class="note"> -<p>CSS プロパティ <code>font-stretch</code> は初め CSS 2 で定義されましたが、CSS 2.1 で実装経験不足のため外されました。CSS 3 では新しく定義されました。</p> -</div> +## ブラウザーの互換性 -<p>{{cssinfo}}</p> +{{Compat}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +## 関連情報 -<p>{{Compat("css.properties.font-stretch")}}</p> +- {{cssxref("font-style")}} +- {{cssxref("font-weight")}} +- [基本的なテキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals) diff --git a/files/ja/web/css/font-style/index.md b/files/ja/web/css/font-style/index.md index 339426e6c0..93a5e965bd 100644 --- a/files/ja/web/css/font-style/index.md +++ b/files/ja/web/css/font-style/index.md @@ -5,24 +5,25 @@ tags: - CSS - CSS フォント - CSS プロパティ - - Reference - - font + - リファレンス - ウェブ + - font + - recipe:css-property +browser-compat: css.properties.font-style translation_of: Web/CSS/font-style --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>font-style</code></strong> プロパティは、フォントが {{cssxref("font-family")}} の中で通常体 (normal)、筆記体 (italic)、斜体 (oblique) のどれでスタイル付けするかを設定します。</span></p> +**`font-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、{{cssxref("font-family")}} の中で通常体 (normal)、筆記体 (italic)、斜体 (oblique) のどのスタイルにするか設定します。 -<div>{{EmbedInteractiveExample("pages/css/font-style.html")}}</div> +{{EmbedInteractiveExample("pages/css/font-style.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +**italic** フォントフェイスは通常、本質的に筆記体であり、装飾されていない書体より水平方向の幅が小さいのが一般的です。一方 **oblique** フェイスはたいてい、通常のフェイスを傾けただけです。 italic と oblique のいずれも、通常のフェイスの字形を人工的に傾けることによってシミュレートされます (この制御については {{cssxref("font-synthesis")}} をご覧ください)。 -<p><strong>italic</strong> フォントフェイスは通常、本質的に筆記体であり、スタイル付けされていない書体より水平方向の幅が小さいのが一般的です。一方 <strong>oblique</strong> フェイスはたいてい、通常のフェイスを傾けただけです。 italic と oblique のいずれも、通常のフェイスのグリフを人工的に傾けることによってシミュレートされます (この制御については {{cssxref("font-synthesis")}} をご覧ください)。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">font-style: normal; +```css +font-style: normal; font-style: italic; font-style: oblique; font-style: oblique 10deg; @@ -30,196 +31,87 @@ font-style: oblique 10deg; /* グローバル値 */ font-style: inherit; font-style: initial; +font-style: revert; font-style: unset; -</pre> +``` -<p><code>font-style</code> プロパティは、以下の一覧から選択した単一のキーワードで指定し、キーワードが <code>oblique</code> であれば任意で角度を含めることができます。</p> +`font-style` プロパティは、以下の一覧から選択した単一のキーワードで指定し、キーワードが `oblique` であれば任意で角度を含めることができます。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>normal</code></dt> - <dd>{{Cssxref("font-family")}} の中で <code>normal</code> に分類されているフォントを選択します。</dd> - <dt><code>italic</code></dt> - <dd><code>italic</code> として分類されているフォントを選択します。 italic フェイスが使用できない場合は、代わりに <code>oblique</code> に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。</dd> - <dt><code>oblique</code></dt> - <dd><code>oblique</code> として分類されているフォントを選択します。 oblique フェイスが使用できない場合は、代わりに <code>italic</code> に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。</dd> - <dt><code>oblique</code> <code><a href="/ja/docs/Web/CSS/angle"><angle></a></code></dt> - <dd><code>oblique</code> として分類されているフォントを選択し、加えてテキストの傾きの角度を指定します。選択されたフォントファミリで１つまたは複数の oblique フェイスが利用できる場合、指定した角度に最も近いものが選択されます。 oblique フェイスが利用できない場合、ブラウザーは通常のフェイスを指定した大きさだけ傾けることで、 oblique バージョンを作成します。有効な値は-90以上90以下の角度の値です。角度が指定されない場合、14度の角度が使用されます。正の数では行末に向けて傾け、負の数では行頭に向けて傾けます。<br> - <br> - 一般に、要求された角度が14度以上の場合、大きな角度が推奨されます。その他の場合は、より小さい角度が推奨されます (アルゴリズムの詳細は、仕様書の <a href="https://drafts.csswg.org/css-fonts-4/#font-matching-algorithm">font matching section</a> を参照してください)。</dd> -</dl> +- `normal` + - : {{Cssxref("font-family")}} の中で `normal` に分類されているフォントを選択します。 +- `italic` + - : `italic` として分類されているフォントを選択します。 italic フェイスが使用できない場合は、代わりに `oblique` に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。 +- `oblique` + - : `oblique` として分類されているフォントを選択します。 oblique フェイスが使用できない場合は、代わりに `italic` に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。 +- `oblique` [`<angle>`](/ja/docs/Web/CSS/angle) -<h3 id="Variable_fonts" name="Variable_fonts">可変フォント</h3> + - : `oblique` として分類されているフォントを選択し、加えてテキストの傾きの角度を指定します。選択されたフォントファミリで１つまたは複数の oblique フェイスが利用できる場合、指定した角度に最も近いものが選択されます。 oblique フェイスが利用できない場合、ブラウザーは通常のフェイスを指定した大きさだけ傾けることで、 oblique バージョンを作成します。有効な値は-90以上90以下の角度の値です。角度が指定されない場合、14度の角度が使用されます。正の数では行末に向けて傾け、負の数では行頭に向けて傾けます。 -<p>可変フォントでは、 oblique フェイスをどれだけ傾けるかの角度を細かく制御することができます。 <code>oblique</code> キーワードに <code><angle></code> 修飾子を使用して選択することができます。</p> + 一般に、要求された角度が14度以上の場合、大きな角度が推奨されます。その他の場合は、より小さい角度が推奨されます (アルゴリズムの詳細は、仕様書の [font matching section](https://drafts.csswg.org/css-fonts-4/#font-matching-algorithm) を参照してください)。 -<p>TrueType または OpenType の可変フォントでは、 <code>"slnt"</code> 変数が oblique の傾く角度を様々に実装するために使用され、 <code>"ital"</code> 変数の値が 1 ならば、 italic の値を使用します。 {{cssxref("font-variation-settings")}} を参照してください。</p> +### 可変フォント -<p>次の例を動作させるには、 CSS Fonts Level 4 の <code>font-style: oblique</code> が <code><angle></code> を受け入れる構文に対応したブラウザーが必要です。</p> +可変フォントでは、 oblique フェイスをどれだけ傾けるかの角度を細かく制御することができます。 `<angle>` 修飾子を `oblique` キーワードに使用して選択することができます。 -<div style="border: 10px solid #f5f9fa; padding: 1rem;">{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div> +TrueType または OpenType の可変フォントでは、 `"slnt"` 変数が oblique の傾く角度を様々に実装するために使用され、 `"ital"` 変数の値が 1 ならば、 italic の値を使用します。 {{cssxref("font-variation-settings")}} を参照してください。 -<h4 id="HTML">HTML</h4> +> **Note:** 次の例を動作させるには、 CSS Fonts Level 4 の `font-style: oblique` が `<angle>` を受け入れる構文に対応したブラウザーが必要です。デモは `font-style: oblique 23deg;` を読み込みます。この値を変更すると、テキストの傾きが変わるのを確認することができます。 -<div id="variable-font-example"> -<pre class="brush: html"><header> - <input type="range" id="slant" name="slant" min="-90" max="90" /> - <label for="slant">Slant</label> -</header> -<div class="container"> - <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p> -</div> -</pre> +{{EmbedGHLiveSample("css-examples/variable-fonts/oblique.html", '100%', 860)}} -<h4 id="CSS">CSS</h4> +## アクセシビリティの考慮 -<pre class="brush: css">/* -AmstelvarAlpha-VF is created by <span class="col-11 mr-2 text-gray-dark">David Berlow</span> (https://github.com/TypeNetwork/Amstelvar) -and is used here under the terms of its license: -https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt -*/ +テキストの長い区間に渡って `font-style` の値を `italic` に設定すると、失読症のような認知問題を抱える人にとって読むのが難しくなる可能性があります。 -@font-face { - src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf'); - font-family:'AmstelvarAlpha'; - font-style: normal; -} +- [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) +- [W3C Understanding WCAG 2.1](https://www.w3.org/TR/WCAG21/#visual-presentation) -label { - font: 1rem monospace; -} +## 公式定義 -.container { - max-height: 150px; - overflow: scroll; -} +{{cssinfo}} -.sample { - font: 2rem 'AmstelvarAlpha', sans-serif; -} +## 形式文法 -</pre> +{{csssyntax}} -<div class="hidden"> -<pre class="brush: css">html, body { - max-height: 100vh; - max-width: 100vw; - overflow: hidden; -} +## 例 -body { - display: flex; - flex-direction: column; -} +<h3 id="Font_styles">フォントスタイル</h3> -header { - margin-bottom: 1.5rem; -} +```html hidden +<p class="normal">This paragraph is normal.</p> +<p class="italic">This paragraph is italic.</p> +<p class="oblique">This paragraph is oblique.</p> +``` -.container { - flex-grow: 1; +```css +.normal { + font-style: normal; } -.container > p { - margin-top: 0; - margin-bottom: 0; +.italic { + font-style: italic; } -</pre> -</div> -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">let slantLabel = document.querySelector('label[for="slant"]'); -let slantInput = document.querySelector('#slant'); -let sampleText = document.querySelector('.sample'); - -function update() { - let slant = `oblique ${slantInput.value}deg`; - slantLabel.textContent = `font-style: ${slant};`; - sampleText.style.fontStyle = slant; +.oblique { + font-style: oblique; } +``` -slantInput.addEventListener('input', update); +{{ EmbedLiveSample('Font_styles') }} -update(); -</pre> -</div> +## 仕様書 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{Specifications}} -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> +## ブラウザーの互換性 -<h3 id="Font_styles" name="Font_styles">フォントスタイル</h3> +{{Compat}} -<div class="hidden"> -<pre class="brush: html"><p class="normal">This paragraph is normal.</p> -<p class="italic">This paragraph is italic.</p> -<p class="oblique">This paragraph is oblique.</p> -</pre> -</div> +## 関連情報 -<pre class="brush: css">.normal { - font-style: normal; -} - -.italic { - font-style: italic; -} - -.oblique { - font-style: oblique; -}</pre> - -<p>{{ EmbedLiveSample('Font_styles') }}</p> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> - -<p>テキストの長い区間に渡って <code>font-style</code> の値を <code>italic</code> に設定すると、失読症のような認知問題を抱える人にとって読むのが難しくなる可能性があります。</p> - -<ul> - <li><a href="/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">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> - <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation">W3C Understanding WCAG 2.1</a></li> -</ul> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Fonts', '#font-style-prop', 'font-style')}}</td> - <td>{{Spec2('CSS4 Fonts')}}</td> - <td><code>oblique</code> の後で角度を指定できるようになった</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#font-style', 'font-style')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.font-style")}}</p> +- {{cssxref("font-style")}} +- {{cssxref("font-weight")}} +- [基本的なテキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals) diff --git a/files/ja/web/css/font-synthesis/index.md b/files/ja/web/css/font-synthesis/index.md index 3505c10be2..f5b29095d8 100644 --- a/files/ja/web/css/font-synthesis/index.md +++ b/files/ja/web/css/font-synthesis/index.md @@ -3,107 +3,95 @@ title: font-synthesis slug: Web/CSS/font-synthesis tags: - CSS - - CSS Fonts - - CSS Property - - Reference - - 'recipe:css-property' + - CSS フォント + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.font-synthesis translation_of: Web/CSS/font-synthesis --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>font-synthesis</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、太字やイタリックの字体がない場合に、ブラウザーが合成してよいかどうかを制御します。</p> +**`font-synthesis`** は [CSS](/ja/docs/Web/CSS) のプロパティで、太字やイタリックの字体がない場合に、ブラウザーが合成してよいかどうかを制御します。 -<div>{{EmbedInteractiveExample("pages/css/font-synthesis.html")}}</div> +## 構文 -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +```css +font-synthesis: none; +font-synthesis: weight; +font-synthesis: style; +font-synthesis: small-caps; +font-synthesis: weight style small-caps; -<h2 id="Syntax" name="Syntax">構文</h2> +/* グローバル値 */ +font-synthesis: inherit; +font-synthesis: initial; +font-synthesis: revert; +font-synthesis: unset; +``` -<p>このプロパティは以下の形のうちの一つを取ることができます。</p> +### 値 -<ul> - <li>キーワード値の <code>none</code></li> - <li>キーワード値の <code>weight</code> と <code>style</code> のどちらか</li> - <li>キーワード値の <code>weight</code> と <code>style</code> の両方</li> -</ul> +- `none` + - : 太字およびイタリックの字体を合成しないことを示すキーワードです。 +- `weight` + - : 必要であれば、太字の字体を合成してよいことを示すキーワードです。 +- `style` + - : 必要であれば、イタリックの字体を合成してよいことを示すキーワードです。 +- `small-caps` + - : 必要であれば、スモールキャップの字体を合成してよいことを示すキーワードです。 -<h3 id="Values" name="Values">値</h3> +## 解説 -<dl> - <dt><code>none</code></dt> - <dd>太字およびイタリックの字体を合成しないことを示すキーワードです。</dd> - <dt><code>weight</code></dt> - <dd>必要であれば、太字の字体を合成してよいことを示すキーワードです。</dd> - <dt><code>style</code></dt> - <dd>必要であれば、イタリックの字体を合成してよいことを示すキーワードです。</dd> -</dl> +ほとんどの標準的な欧文フォントにはイタリック体や太字の変化形が含まれていますが、多くのノベルティフォントには含まれていません。中国語、日本語、韓国語、その他の表語文字に使用されているフォントは、これらの変化形を含まない傾向があり、それらを合成するとテキストの可読性が損なわれる可能性があります。このような場合には、ブラウザーの既定のフォント合成機能をオフにしたほうがよいかもしれません。 -<h2 id="Description" name="Description">解説</h2> +## 公式定義 -<p>ほとんどの標準的な欧文フォントにはイタリック体や太字の変化形が含まれていますが、多くのノベルティフォントには含まれていません。中国語、日本語、韓国語、その他の表語文字に使用されているフォントは、これらの変化形を含まない傾向があり、それらを合成するとテキストの可読性が損なわれる可能性があります。このような場合には、ブラウザーの既定のフォント合成機能をオフにしたほうがよいかもしれません。</p> +{{cssinfo}} -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式定義 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Disabling_font_synthesis" name="Disabling_font_synthesis">フォント合成の無効化</h3> +<h3 id="Disabling_font_synthesis">フォント合成の無効化</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><em class="syn">Synthesize me! 站直。</em> -<br/> -<em class="no-syn">Don't synthesize me! 站直。</em> -</pre> +```html +<em class="syn">Synthesize me! 站直。</em> +<br/> +<em class="no-syn">Don't synthesize me! 站直。</em> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">em { +```css +em { font-weight: bold; } .syn { - font-synthesis: style weight; + font-synthesis: style weight small-caps; } .no-syn { font-synthesis: none; } -</pre> +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{ EmbedLiveSample('Disabling_font_synthesis', '', '50') }}</p> +{{ EmbedLiveSample('Disabling_font_synthesis', '', '75') }} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Fonts', '#propdef-font-synthesis', 'font-synthesis')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.font-synthesis")}}</p> +{{Compat}} -<h2 id="See_also">See also</h2> +## 関連情報 -<ul> - <li>{{cssxref("font-style")}}</li> - <li>{{cssxref("font-weight")}}</li> -</ul> +- {{cssxref("font-style")}} +- {{cssxref("font-weight")}} diff --git a/files/ja/web/css/font-variant-alternates/index.md b/files/ja/web/css/font-variant-alternates/index.md index d2a89132cb..a874cea0a3 100644 --- a/files/ja/web/css/font-variant-alternates/index.md +++ b/files/ja/web/css/font-variant-alternates/index.md @@ -3,9 +3,9 @@ title: font-variant-alternates slug: Web/CSS/font-variant-alternates tags: - CSS - - CSS Fonts - - CSS Property - - Reference + - CSS フォント + - CSS プロパティ + - リファレンス - recipe:css-property browser-compat: css.properties.font-variant-alternates translation_of: Web/CSS/font-variant-alternates diff --git a/files/ja/web/css/font-variant-caps/index.md b/files/ja/web/css/font-variant-caps/index.md index 5ee4c77ecd..7a8c5a8998 100644 --- a/files/ja/web/css/font-variant-caps/index.md +++ b/files/ja/web/css/font-variant-caps/index.md @@ -3,37 +3,35 @@ title: font-variant-caps slug: Web/CSS/font-variant-caps tags: - CSS - - CSS Fonts - - CSS Property - - Reference - - 'recipe:css-property' + - CSS フォント + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.font-variant-caps translation_of: Web/CSS/font-variant-caps --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>font-variant-caps</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、大文字向けの代替字形の使用を制御します。</p> +**`font-variant-caps`** は [CSS](/ja/docs/Web/CSS) のプロパティで、大文字の代替字形の使用を制御します。 -<div>{{EmbedInteractiveExample("pages/css/font-variant-caps.html")}}</div> +{{EmbedInteractiveExample("pages/css/font-variant-caps.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +指定されたフォントに複数の異なる大きさで大文字の字形が含まれている場合、このプロパティは最適なものを選択します。 petite capital (小さなの大文字) の字形が利用できない場合は、スモールキャピタル (小ぶりの大文字) の字形を使用して表示します。これらが存在しない場合、ブラウザーは大文字の字形から合成します。 -<p>指定されたフォントに複数の異なる大きさで大文字の字形が含まれている場合、このプロパティは最適なものを選択します。 petite capital (小さなの大文字) の字形が利用できない場合は、スモールキャピタル (小ぶりの大文字) の字形を使用して表示します。これらが存在しない場合、ブラウザーは大文字の字形から合成します。</p> +フォントには、様々な大文字小文字の区別がない文字の特殊な字形が含まれていることがあり (発音記号など)、これらが大文字の文字により一致することがあります。しかし、小さな大文字の字形は大文字小文字の区別がない文字のために合成されることはありません。 -<p>フォントには、様々な大文字小文字の区別がない文字の特殊な字形が含まれていることがあり (発音記号など)、これらが大文字の文字により一致することがあります。しかし、小さな大文字の字形は大文字小文字の区別がない文字のために合成されることはありません。</p> +### 言語特有の規則 -<h3 id="Language-specific_rules" name="Language-specific_rules">言語特有の規則</h3> +このプロパティは言語特有の一致規則を考慮します。例えば以下のようなものです。 -<p>このプロパティは言語特有の一致規則を考慮します。例えば以下のようなものです。</p> +- チュルク語族 (トルコ語 (tr), アゼルバイジャン語 (az), クリミア・タタール語 (crh), ヴォルガ・タタール語 (tt), バシキール語 (ba) など) では、二種類の `i` (点ありと点なし) があり、二種類の大文字小文字の組み合わせ `i`/`İ` と `ı`/`I` があります。 +- ドイツ語 (de) では、 `ß` は大文字で `ẞ` (U+1E9E) になることがあります。 +- ギリシャ語 (el) では、語全体が大文字の時にアクセント記号がなくなりますが (`ά`/`Α`)、分離型のエタは例外です (`ή`/`Ή`)。また、また、最初の母音にアクセントを付けた二重母音はアクセント記号を失い、二番目の母音に発音区別符号を付けます (`άι`/`ΑΪ`)。 -<ul> - <li>チュルク語族 (トルコ語 (tr), アゼルバイジャン語 (az), クリミア・タタール語 (crh), ヴォルガ・タタール語 (tt), バシキール語 (ba) など) では、二種類の <code>i</code> (点ありと点なし) があり、二種類の大文字小文字の組み合わせ <code>i</code>/<code>İ</code> と <code>ı</code>/<code>I</code> があります。</li> - <li>ドイツ語 (de) では、 <code>ß</code> は大文字で <code>ẞ</code> (U+1E9E) になることがあります。</li> - <li>ギリシャ語 (el) では、語全体が大文字の時にアクセント記号がなくなりますが (<code>ά</code>/<code>Α</code>)、分離型のエタは例外です (<code>ή</code>/<code>Ή</code>)。また、また、最初の母音にアクセントを付けた二重母音はアクセント記号を失い、二番目の母音に発音区別符号を付けます (<code>άι</code>/<code>ΑΪ</code>)。</li> -</ul> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ font-variant-caps: normal; font-variant-caps: small-caps; font-variant-caps: all-small-caps; @@ -45,60 +43,59 @@ font-variant-caps: titling-caps; /* グローバル値 */ font-variant-caps: inherit; font-variant-caps: initial; +font-variant-caps: revert; font-variant-caps: unset; -</pre> +``` -<p><code>font-variant-caps</code> プロパティは、以下のリスト内にある単一のキーワード値を使用して指定します。どの場合も、フォントが OpenType 値に対応していなければ、字形は合成によって生成されます。</p> +`font-variant-caps` プロパティは、以下のリスト内にある単一のキーワード値を使用して指定します。どの場合も、フォントが OpenType 値に対応していなければ、字形は合成によって生成されます。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>normal</code></dt> - <dd>代替字形の使用を無効にします。</dd> - <dt><code>small-caps</code></dt> - <dd>小さな大文字の表示を有効にします (OpenType 特性: <code>smcp</code>)。スモールキャピタルの字形はふつう、大文字の形をしていますが、小文字の大きさに縮小されています。</dd> - <dt><code>all-small-caps</code></dt> - <dd>大文字と小文字の両方でスモールキャピタルの表示を有効にします (OpenType 機能: <code>c2sc</code>, <code>smcp</code>)。</dd> - <dt><code>petite-caps</code></dt> - <dd>petite capital の表示を有効にします (OpenType 特性: <code>pcap</code>)。</dd> - <dt><code>all-petite-caps</code></dt> - <dd>大文字と小文字の両方で petite capital の表示を有効にします (OpenType 特性: <code>c2pc</code>, <code>pcap</code>)。</dd> - <dt><code>unicase</code></dt> - <dd>大文字のスモールキャピタルと通常の小文字の混合表示を有効にします (OpenType 特性: <code>unic</code>).</dd> - <dt><code>titling-caps</code></dt> - <dd>タイトルキャピタルの表示を有効化します (OpenType 特性: <code>titl</code>)。大文字の字形は、ふつう小文字と一緒に使用するためにデザインされています。すべて大文字のタイトル文字列で使用された場合、太くなりすぎることがあります。タイトルキャピタルはこの場合に専用のデザインが行われたものです。</dd> -</dl> +- `normal` + - : 代替字形の使用を無効にします。 +- `small-caps` + - : 小さな大文字の表示を有効にします (OpenType 特性: `smcp`)。スモールキャピタルの字形はふつう、大文字の形をしていますが、小文字の大きさに縮小されています。 +- `all-small-caps` + - : 大文字と小文字の両方でスモールキャピタルの表示を有効にします (OpenType 機能: `c2sc`, `smcp`)。 +- `petite-caps` + - : petite capital の表示を有効にします (OpenType 特性: `pcap`)。 +- `all-petite-caps` + - : 大文字と小文字の両方で petite capital の表示を有効にします (OpenType 特性: `c2pc`, `pcap`)。 +- `unicase` + - : 大文字のスモールキャピタルと通常の小文字の混合表示を有効にします (OpenType 特性: `unic`). +- `titling-caps` + - : タイトルキャピタルの表示を有効化します (OpenType 特性: `titl`)。大文字の字形は、ふつう小文字と一緒に使用するためにデザインされています。すべて大文字のタイトル文字列で使用された場合、太くなりすぎることがあります。タイトルキャピタルはこの場合に専用のデザインが行われたものです。 -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> +## アクセシビリティの考慮 -<p>長い区間のテキストに対して <code>font-variant</code> の値を <code>all-small-caps</code> や <code>all-petite-caps</code> を設定すると、失読症のような認知障害を抱えた人にとって読むのが難しくなることがあります。</p> +長い区間のテキストに対して `font-variant` の値を `all-small-caps` や `all-petite-caps` を設定すると、失読症のような認知障害を抱えた人にとって読むのが難しくなることがあります。 -<ul> - <li><a href="/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">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> - <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation" rel="noopener">W3C Understanding WCAG 2.1</a></li> -</ul> +- [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) +- [W3C Understanding WCAG 2.1](https://www.w3.org/TR/WCAG21/#visual-presentation" rel="noopener) -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式定義 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_the_small-caps_font_variant" name="Setting_the_small-caps_font_variant">スモールキャップのフォント変化形の設定</h3> +<h3 id="Setting_the_small-caps_font_variant">スモールキャップのフォント変化形の設定</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><p class="small-caps">Firefox rocks, small caps!</p> -<p class="normal">Firefox rocks, normal caps!</p> -</pre> +```html +<p class="small-caps">Firefox rocks, small caps!</p> +<p class="normal">Firefox rocks, normal caps!</p> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush:css notranslate">.small-caps { +```css +.small-caps { font-variant-caps: small-caps; font-style: italic; } @@ -106,31 +103,24 @@ font-variant-caps: unset; font-variant-caps: normal; font-style: italic; } -</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{ EmbedLiveSample('Setting_the_small-caps_font_variant') }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-caps', 'font-variant-caps')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.font-variant-caps")}}</p> +``` + +#### 結果 + +{{ EmbedLiveSample('Setting_the_small-caps_font_variant') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("font-variant-alternates")}} +- {{cssxref("font-variant")}} +- {{cssxref("font-variant-east-asian")}} +- {{cssxref("font-variant-ligatures")}} +- {{cssxref("font-variant-numeric")}} diff --git a/files/ja/web/css/font-variant-east-asian/index.md b/files/ja/web/css/font-variant-east-asian/index.md index 4c37b35a16..716e3905c2 100644 --- a/files/ja/web/css/font-variant-east-asian/index.md +++ b/files/ja/web/css/font-variant-east-asian/index.md @@ -3,137 +3,110 @@ title: font-variant-east-asian slug: Web/CSS/font-variant-east-asian tags: - CSS - - CSS Fonts - - CSS Property + - CSS フォント + - CSS プロパティ - NeedsLiveSample - - Reference - - 'recipe:css-property' + - リファレンス + - recipe:css-property - 日本語処理 +browser-compat: css.properties.font-variant-east-asian translation_of: Web/CSS/font-variant-east-asian --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>CSS の <strong><code>font-variant-numeric</code></strong> プロパティは、日本語と中国語のような東アジアの字形の違いを制御するために使用します。</p> +CSS の **`font-variant-numeric`** プロパティは、日本語と中国語のような東アジアの字形の違いを制御するために使用します。 -<pre class="brush:css no-line-numbers notranslate">font-variant-east-asian: normal; +```css +font-variant-east-asian: normal; font-variant-east-asian: ruby; -font-variant-east-asian: jis78; /* <east-asian-variant-values> */ -font-variant-east-asian: jis83; /* <east-asian-variant-values> */ -font-variant-east-asian: jis90; /* <east-asian-variant-values> */ -font-variant-east-asian: jis04; /* <east-asian-variant-values> */ -font-variant-east-asian: simplified; /* <east-asian-variant-values> */ -font-variant-east-asian: traditional; /* <east-asian-variant-values> */ -font-variant-east-asian: full-width; /* <east-asian-width-values> */ -font-variant-east-asian: proportional-width; /* <east-asian-width-values> */ +font-variant-east-asian: jis78; /* <east-asian-variant-values> */ +font-variant-east-asian: jis83; /* <east-asian-variant-values> */ +font-variant-east-asian: jis90; /* <east-asian-variant-values> */ +font-variant-east-asian: jis04; /* <east-asian-variant-values> */ +font-variant-east-asian: simplified; /* <east-asian-variant-values> */ +font-variant-east-asian: traditional; /* <east-asian-variant-values> */ +font-variant-east-asian: full-width; /* <east-asian-width-values> */ +font-variant-east-asian: proportional-width; /* <east-asian-width-values> */ font-variant-east-asian: ruby full-width jis83; /* グローバル値 */ font-variant-east-asian: inherit; font-variant-east-asian: initial; +font-variant-east-asian: revert; font-variant-east-asian: unset; -</pre> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>normal</code></dt> - <dd>このキーワードは、別形式の表記の使用を無効にします。</dd> - <dt><code>ruby</code></dt> - <dd>このキーワードは、ルビ文字のための特殊な表記の使用を強制します。ふつうは小さめで、フォントの作者がよく特定の形状でデザインし、ふつうはコントラストを上げるためにわずかに太くします。このキーワードは OpenType の <code>ruby</code> の値に対応します。</dd> - <dt><code><east-asian-variant-values></code></dt> - <dd>これらの値は、表示に使用される字形の違いのセットを指定します。利用可能な値は以下の通りです。 - <table class="standard-table"> - <tbody> - <tr> - <th>キーワード</th> - <th>標準による形状の定義</th> - <th>OpenType の対応</th> - </tr> - <tr> - <td><code>jis78</code></td> - <td><a href="http://ja.wikipedia.org/wiki/JIS_X_0208#第1次規格">JIS X 0208:1978</a></td> - <td><code>jp78</code></td> - </tr> - <tr> - <td><code>jis83</code></td> - <td><a href="http://ja.wikipedia.org/wiki/JIS_X_0208#第2次規格">JIS X 0208:1983</a></td> - <td><code>jp83</code></td> - </tr> - <tr> - <td><code>jis90</code></td> - <td><a href="http://ja.wikipedia.org/wiki/JIS_X_0208#第3次規格">JIS X 0208:1990</a></td> - <td><code>jp90</code></td> - </tr> - <tr> - <td><code>jis04</code></td> - <td><a href="http://ja.wikipedia.org/wiki/JIS_X_0213">JIS X 0213:2004</a></td> - <td><code>jp04</code></td> - </tr> - <tr> - <td><code>simplified</code></td> - <td>なし。簡体字中国語の字形を使用</td> - <td><code>smpl</code></td> - </tr> - <tr> - <td><code>traditional</code></td> - <td>なし。繁体字中国語の字形を使用</td> - <td><code>trad</code></td> - </tr> - </tbody> - </table> - </dd> - <dt><code><east-asian-width-values></code></dt> - <dd>これらの値は東アジアの文字の大きさを制御します。二つの値が利用できます。 - <ul> - <li><code>proportional-width</code> は、東アジアの文字の幅が多様なセットを有効にします。 OpenType の <code>pwid</code> の値に対応します。</li> - <li><code>full-width</code> は、東アジアの文字がすべて同じ、およそ正方形で、一定幅のセットを有効にします。 OpenType の <code>fwid</code> に対応します。</li> - </ul> - </dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +``` + +## 構文 + +### 値 + +- `normal` + - : このキーワードは、別形式の表記の使用を無効にします。 +- `ruby` + - : このキーワードは、ルビ文字のための特殊な表記の使用を強制します。ふつうは小さめで、フォントの作者がよく特定の形状でデザインし、ふつうはコントラストを上げるためにわずかに太くします。このキーワードは OpenType の `ruby` の値に対応します。 +- `<east-asian-variant-values>` + + - : これらの値は、表示に使用される字形の違いのセットを指定します。利用可能な値は以下の通りです。 + + | キーワード | 標準による形状の定義 | OpenType の対応 | + | ------------- | --------------------------------------------------------------------------- | ------------------- | + | `jis78` | [JIS X 0208:1978](http://ja.wikipedia.org/wiki/JIS_X_0208#第1次規格) | `jp78` | + | `jis83` | [JIS X 0208:1983](http://ja.wikipedia.org/wiki/JIS_X_0208#第2次規格) | `jp83` | + | `jis90` | [JIS X 0208:1990](http://ja.wikipedia.org/wiki/JIS_X_0208#第3次規格) | `jp90` | + | `jis04` | [JIS X 0213:2004](http://ja.wikipedia.org/wiki/JIS_X_0213) | `jp04` | + | `simplified` | なし。簡体字中国語の字形を使用 | `smpl` | + | `traditional` | なし。繁体字中国語の字形を使用 | `trad` | + +- `<east-asian-width-values>` + + - : これらの値は東アジアの文字の大きさを制御します。2 つの値が利用できます。 + + - `proportional-width` は、東アジアの文字の幅が多様なセットを有効にします。 OpenType の `pwid` の値に対応します。 + - `full-width` は、東アジアの文字がすべて同じ、およそ正方形で、一定幅のセットを有効にします。 OpenType の `fwid` に対応します。 + +## 公式定義 + +{{cssinfo}} + +## 形式定義 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Setting_East_Asian_glyph_variants" name="Setting_East_Asian_glyph_variants">東アジアの字形の変化形を設定</h3> - -<p>この例は OS に「游ゴシック」フォントがインストールされていることが必要で、ほかのフォントでは OpenType 機能に対応していない可能性があります。</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><table> -<thead></thead> -<tbody style="border:0;"> - <tr> - <th>normal/jis78:</th> - <td>麹町</td> - <td class="jis78">麹町</td> - </tr> - <tr> - <th>normal/ruby:</th> - <td>しんかんせん</td> - <td class="ruby">しんかんせん</td> - </tr> - <tr> - <th>normal/traditional:</th> - <td>大学</td> - <td class="traditional">大学</td> - </tr> -</tbody> -</table> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush:css notranslate">td{ +## 例 + +<h3 id="Setting_East_Asian_glyph_variants">東アジアの字形の変化形を設定</h3> + +この例は OS に「游ゴシック」フォントがインストールされていることが必要です。ほかのフォントでは OpenType 機能に対応していない可能性があります。 + +#### HTML + +```html +<table> +<thead></thead> +<tbody style="border:0;"> + <tr> + <th>normal/jis78:</th> + <td>麹町</td> + <td class="jis78">麹町</td> + </tr> + <tr> + <th>normal/ruby:</th> + <td>しんかんせん</td> + <td class="ruby">しんかんせん</td> + </tr> + <tr> + <th>normal/traditional:</th> + <td>大学</td> + <td class="traditional">大学</td> + </tr> +</tbody> +</table> +``` + +#### CSS + +```css +td{ font-family:"Yu Gothic"; font-size:20px; } @@ -153,32 +126,24 @@ th{ .traditional{ font-variant-east-asian: traditional; } +``` -</pre> +#### 結果 -<h4 id="Result" name="Result">結果</h4> +{{EmbedLiveSample('Setting_East_Asian_glyph_variants')}} -<p>{{EmbedLiveSample('Setting_East_Asian_glyph_variants')}}</p> +## 仕様書 -<h2 id="Specifications" name="Specifications">仕様書</h2> +{{Specifications}} -<table class="standard-table"> - <thead> - <tr> - <th>仕様書</th> - <th>状況</th> - <th>備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-east-asian', 'font-variant-east-asian')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +## ブラウザーの互換性 + +{{Compat}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## 関連情報 -<p>{{Compat("css.properties.font-variant-east-asian")}}</p> +- {{cssxref("font-variant-alternates")}} +- {{cssxref("font-variant-caps")}} +- {{cssxref("font-variant")}} +- {{cssxref("font-variant-ligatures")}} +- {{cssxref("font-variant-numeric")}} diff --git a/files/ja/web/css/font-variant-ligatures/index.md b/files/ja/web/css/font-variant-ligatures/index.md index edf996a99a..b92d56a4ef 100644 --- a/files/ja/web/css/font-variant-ligatures/index.md +++ b/files/ja/web/css/font-variant-ligatures/index.md @@ -3,144 +3,143 @@ title: font-variant-ligatures slug: Web/CSS/font-variant-ligatures tags: - CSS - - CSS Fonts - - CSS Property - - Reference - - 'recipe:css-property' + - CSS フォント + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.font-variant-ligatures translation_of: Web/CSS/font-variant-ligatures --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>font-variant-ligatures</code></strong> は CSS のプロパティで、適用される用途の文字コンテンツで使われる{{Glossary("ligature", "合字")}}および{{Glossary("contextual forms", "文脈に合わせた字形")}}を制御します。</span>これにより、結果のテキストでより調和した形を利用することができます。</p> +**`font-variant-ligatures`** は CSS のプロパティで、適用される用途の文字コンテンツで使われる{{Glossary("ligature", "合字")}}および{{Glossary("contextual forms", "文脈に合わせた字形")}}を制御します。これにより、結果のテキストでより調和した形を利用することができます。 -<div>{{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}}</div> +{{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ font-variant-ligatures: normal; font-variant-ligatures: none; -font-variant-ligatures: common-ligatures; /* <common-lig-values> */ -font-variant-ligatures: no-common-ligatures; /* <common-lig-values> */ -font-variant-ligatures: discretionary-ligatures; /* <discretionary-lig-values> */ -font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */ -font-variant-ligatures: historical-ligatures; /* <historical-lig-values> */ -font-variant-ligatures: no-historical-ligatures; /* <historical-lig-values> */ -font-variant-ligatures: contextual; /* <contextual-alt-values> */ -font-variant-ligatures: no-contextual; /* <contextual-alt-values> */ +font-variant-ligatures: common-ligatures; /* <common-lig-values> */ +font-variant-ligatures: no-common-ligatures; /* <common-lig-values> */ +font-variant-ligatures: discretionary-ligatures; /* <discretionary-lig-values> */ +font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */ +font-variant-ligatures: historical-ligatures; /* <historical-lig-values> */ +font-variant-ligatures: no-historical-ligatures; /* <historical-lig-values> */ +font-variant-ligatures: contextual; /* <contextual-alt-values> */ +font-variant-ligatures: no-contextual; /* <contextual-alt-values> */ /* グローバル値 */ font-variant-ligatures: inherit; font-variant-ligatures: initial; +font-variant-ligatures: revert; font-variant-ligatures: unset; -</pre> - -<p><code>font-variant-ligatures</code> プロパティは、以下の一覧のキーワード値のうち一つで指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>normal</code></dt> - <dd>正しいレンダリングに必要な通常の合字や文脈書式を有効にします。有効になる合字と書式は、フォント、言語、および書法の種類によって異なります。これが既定値です。</dd> - <dt><code>none</code></dt> - <dd>一般的なものであっても、すべての合字や文脈書式を無効にします。</dd> - <dt><em><common-lig-values></em></dt> - <dd><code>fi</code>, <code>ffi</code>, <code>th</code> などの、よくある合字を制御します。 OpenType の値 <code>liga</code> および <code>clig</code> に対応します。二つの値が指定できます。 - <ul> - <li><code>common-ligatures</code>: これらの合字を有効にします。なお、キーワード <code>normal</code> はこれらの合字を有効にします。</li> - <li><code>no-common-ligatures</code>: これらの合字を無効にします。</li> - </ul> - </dd> - <dt><em><discretionary-lig-values></em></dt> - <dd>フォントに依存し文字デザイナーが定義する特定の合字を制御します。対応する OpenType の値は <code>dlig</code> です。二つの値が指定できます。 - <ul> - <li><code>discretionary-ligatures</code>: これらの合字を有効にします。</li> - <li><code>no-discretionary-ligatures</code>: これらの合字を無効にします。なお、キーワード <code>normal</code> はふつう、これらの合字を無効にします。</li> - </ul> - </dd> - <dt><em><historical-lig-values></em></dt> - <dd>古い本で歴史的に使用された、ドイツ語の tz を ꜩ と表示するような合字です。対応する OpenType の値は <code>hlig</code> です。二つの値が指定できます。 - <ul> - <li><code>historical-ligatures</code>: これらの合字を有効にします。</li> - <li><code>no-historical-ligatures</code> これらの合字を無効にします。なお、キーワード <code>normal</code> はふつう、これらの合字を無効にします。</li> - </ul> - </dd> - <dt><em><contextual-alt-values></em></dt> - <dd>字形を文脈に合わせるかどうかを制御します。つまり、字形を周囲の文字に合わせるかどうかです。対応する OpenType の値は <code>calt</code> です。二つの値が指定できます。 - <ul> - <li><code>contextual</code>: 文脈的な変更を使用するよう指定します。なお、キーワード <code>normal</code> はこれらの合字も有効にします。</li> - <li><code>no-contextual</code>: 使用を避けます。</li> - </ul> - </dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +``` + +`font-variant-ligatures` プロパティは、以下の一覧のキーワード値のうち一つで指定します。 + +### 値 + +- `normal` + - : 正しいレンダリングに必要な通常の合字や文脈書式を有効にします。有効になる合字と書式は、フォント、言語、および書法の種類によって異なります。これが既定値です。 +- `none` + - : 一般的なものであっても、すべての合字や文脈書式を無効にします。 +- _\<common-lig-values>_ + + - : `fi`, `ffi`, `th` などの、よくある合字を制御します。 OpenType の値 `liga` および `clig` に対応します。2 つの値が指定できます。 + + - `common-ligatures`: これらの合字を有効にします。なお、キーワード `normal` はこれらの合字を有効にします。 + - `no-common-ligatures`: これらの合字を無効にします。 + +- _\<discretionary-lig-values>_ + + - : フォントに依存し文字デザイナーが定義する特定の合字を制御します。対応する OpenType の値は `dlig` です。2 つの値が指定できます。 + + - `discretionary-ligatures`: これらの合字を有効にします。 + - `no-discretionary-ligatures`: これらの合字を無効にします。なお、キーワード `normal` はふつう、これらの合字を無効にします。 + +- _\<historical-lig-values>_ + + - : 古い本で歴史的に使用された、ドイツ語の tz を ꜩ と表示するような合字です。対応する OpenType の値は `hlig` です。2 つの値が指定できます。 + + - `historical-ligatures`: これらの合字を有効にします。 + - `no-historical-ligatures` これらの合字を無効にします。なお、キーワード `normal` はふつう、これらの合字を無効にします。 + +- _\<contextual-alt-values>_ + + - : 字形を文脈に合わせるかどうかを制御します。つまり、字形を周囲の文字に合わせるかどうかです。対応する OpenType の値は `calt` です。2 つの値が指定できます。 + + - `contextual`: 文脈的な変更を使用するよう指定します。なお、キーワード `normal` はこれらの合字も有効にします。 + - `no-contextual`: 使用を避けます。 + +## 公式定義 + +{{cssinfo}} + +## 形式定義 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_font_ligatures_and_contextual_forms" name="Setting_font_ligatures_and_contextual_forms">フォントの合字と文脈に合わせた字形の設定</h3> +<h3 id="Setting_font_ligatures_and_contextual_forms">フォントの合字と文脈に合わせた字形の設定</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet"> -<p class="normal"> - normal<br> +```html +<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet"> +<p class="normal"> + normal<br> if fi ff tf ft jf fj -</p> -<p class="none"> - none<br> +</p> +<p class="none"> + none<br> if fi ff tf ft jf fj -</p> -<p class="common-ligatures"> - common-ligatures<br> +</p> +<p class="common-ligatures"> + common-ligatures<br> if fi ff tf ft jf fj -</p> -<p class="no-common-ligatures"> - no-common-ligatures<br> +</p> +<p class="no-common-ligatures"> + no-common-ligatures<br> if fi ff tf ft jf fj -</p> -<p class="discretionary-ligatures"> - discretionary-ligatures<br> +</p> +<p class="discretionary-ligatures"> + discretionary-ligatures<br> if fi ff tf ft jf fj -</p> -<p class="no-discretionary-ligatures"> - no-discretionary-ligatures<br> +</p> +<p class="no-discretionary-ligatures"> + no-discretionary-ligatures<br> if fi ff tf ft jf fj -</p> -<p class="historical-ligatures"> - historical-ligatures<br> +</p> +<p class="historical-ligatures"> + historical-ligatures<br> if fi ff tf ft jf fj -</p> -<p class="no-historical-ligatures"> - no-historical-ligatures<br> +</p> +<p class="no-historical-ligatures"> + no-historical-ligatures<br> if fi ff tf ft jf fj -</p> -<p class="contextual"> - contextual<br> +</p> +<p class="contextual"> + contextual<br> if fi ff tf ft jf fj -</p> -<p class="no-contextual"> - no-contextual<br> +</p> +<p class="no-contextual"> + no-contextual<br> if fi ff tf ft jf fj -</p> -<p class="contextual"> - contextual<br> +</p> +<p class="contextual"> + contextual<br> if fi ff tf ft jf fj -</p> +</p> +``` -</pre> +#### CSS -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">p { +```css +p { font-family: Lora, serif; } .normal { @@ -185,31 +184,25 @@ font-variant-ligatures: unset; .contextual { font-variant-ligatures: contextual; -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{ EmbedLiveSample('Setting_font_ligatures_and_contextual_forms', '', '700', '', 'Web/CSS/font-variant-ligatures') }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-ligatures', 'font-variant-ligatures')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.font-variant-ligatures")}}</p> +} +``` + +#### 結果 + +{{ EmbedLiveSample('Setting_font_ligatures_and_contextual_forms', '', '700', '', 'Web/CSS/font-variant-ligatures') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("font-variant-alternates")}} +- {{cssxref("font-variant-caps")}} +- {{cssxref("font-variant-east-asian")}} +- {{cssxref("font-variant")}} +- {{cssxref("font-variant-numeric")}} diff --git a/files/ja/web/css/font-variant-numeric/index.md b/files/ja/web/css/font-variant-numeric/index.md index 9421481409..0503261ad5 100644 --- a/files/ja/web/css/font-variant-numeric/index.md +++ b/files/ja/web/css/font-variant-numeric/index.md @@ -6,130 +6,97 @@ tags: - CSS フォント - CSS プロパティ - リファレンス + - recipe:css-property +browser-compat: css.properties.font-variant-numeric translation_of: Web/CSS/font-variant-numeric --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>CSS の <strong><code>font-variant-numeric</code></strong> プロパティは、数字、分数、序数記号の表記を制御するために使用します。</p> +**`font-variant-numeric`** は CSS のプロパティで、数字、分数、序数記号の表記を制御するために使用します。 -<div>{{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}}</div> +{{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}} -<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">font-variant-numeric: normal; +```css +font-variant-numeric: normal; font-variant-numeric: ordinal; font-variant-numeric: slashed-zero; -font-variant-numeric: lining-nums; /* <numeric-figure-values> */ -font-variant-numeric: oldstyle-nums; /* <numeric-figure-values> */ -font-variant-numeric: proportional-nums; /* <numeric-spacing-values> */ -font-variant-numeric: tabular-nums; /* <numeric-spacing-values> */ -font-variant-numeric: diagonal-fractions; /* <numeric-fraction-values> */ -font-variant-numeric: stacked-fractions; /* <numeric-fraction-values> */ +font-variant-numeric: lining-nums; /* <numeric-figure-values> */ +font-variant-numeric: oldstyle-nums; /* <numeric-figure-values> */ +font-variant-numeric: proportional-nums; /* <numeric-spacing-values> */ +font-variant-numeric: tabular-nums; /* <numeric-spacing-values> */ +font-variant-numeric: diagonal-fractions; /* <numeric-fraction-values> */ +font-variant-numeric: stacked-fractions; /* <numeric-fraction-values> */ font-variant-numeric: oldstyle-nums stacked-fractions; /* グローバル値 */ font-variant-numeric: inherit; font-variant-numeric: initial; +font-variant-numeric: revert; font-variant-numeric: unset; -</pre> - -<p>このプロパティは二つの形のうちの一つを取ります。</p> - -<ul> - <li>キーワード値 <code>normal</code></li> - <li>以下の一覧にあるその他の値を空白区切り、自由な順番で</li> -</ul> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>normal</code></dt> - <dd>このキーワードは、別形式の表記の使用を無効にします。</dd> - <dt><code>ordinal</code></dt> - <dd>このキーワードは、序数記号に対して特別な表記を使用します。英語では 1<sup>st</sup>, 2<sup>nd</sup>, 3<sup>rd</sup>, 4<sup>th</sup>、イタリア語では 1<sup>a</sup> です。 OpenType の <code>ordn</code> の値に対応します。</dd> - <dt><code>slashed-zero</code></dt> - <dd>このキーワードは、スラッシュ付きの 0 を使用します。これは O と 0 を明確に区別する必要がある場合に便利です。 OpenType の <code>zero</code> の値に対応します。</dd> - <dt><em><numeric-figure-values</em>></dt> - <dd>これらの値は、数字の形状を制御します。二つの値が利用できます。 - <ul> - <li><code>lining-nums</code> は、全てをベースライン上に並べる表記を有効にします。 OpenType の <code>lnum</code> の値に対応します。</li> - <li><code>oldstyle-nums</code> は、 3, 4, 7, 9 などいくつかの数字を下げる表記を有効にします。 OpenType の <code>onum</code> の値に対応します。</li> - </ul> - </dd> - <dt><em><numeric-spacing-values</em>></dt> - <dd>これらの値は、数字の表記の大きさを制御します。二つの値が利用できます。 - <ul> - <li><code>proportional-nums</code> は、数字をすべて同じ大きさにしない表記を有効にします。 OpenType の <code>pnum</code> の値に対応します。</li> - <li><code>tabular-nums</code> は、数字を同じ大きさにする表記を有効にし、表の中に配置しやすくします。 OpenType の <code>tnum</code> の値に対応します。</li> - </ul> - </dd> - <dt><em><numeric-fraction-values</em>></dt> - <dd>これらの値は、分数の表示に使う表記を制御します。二つの値が利用できます。 - <ul> - <li><code>diagonal-fractions</code> は、分子と分母が小さめになり、スラッシュで区切られる表記を有効にします。 OpenType の <code>frac</code> の値に対応します。</li> - <li><code>stacked-fractions</code> は、分子と分母が小さめになり、積み重ねられて水平線で区切られた表記を有効にします。 OpenType の <code>afrc</code> の値に対応します。</li> - </ul> - </dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +``` -{{csssyntax}} +このプロパティは 2 つの形のうちの 1 つを取ります。 + +- キーワード値 `normal` +- 以下の一覧にあるその他の値を空白区切り、自由な順番で + +### 値 + +- `normal` + - : このキーワードは、別形式の表記の使用を無効にします。 +- `ordinal` + - : このキーワードは、序数記号に対して特別な表記を使用します。英語では 1st, 2nd, 3rd, 4th、イタリア語では 1a です。 OpenType の `ordn` の値に対応します。 +- `slashed-zero` + - : このキーワードは、スラッシュ付きの 0 を使用します。これは O と 0 を明確に区別する必要がある場合に便利です。 OpenType の `zero` の値に対応します。 +- _\<numeric-figure-values_> + + - : これらの値は、数字の形状を制御します。2 つの値が利用できます。 + + - `lining-nums` は、全てをベースライン上に並べる表記を有効にします。 OpenType の `lnum` の値に対応します。 + - `oldstyle-nums` は、 3, 4, 7, 9 などいくつかの数字を下げる表記を有効にします。 OpenType の `onum` の値に対応します。 -<h2 id="Examples" name="Examples">例</h2> +- _\<numeric-spacing-values_> -<h3 id="HTML">HTML</h3> + - : これらの値は、数字の表記の大きさを制御します。2 つの値が利用できます。 -<pre class="brush: html"><p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p></pre> + - `proportional-nums` は、数字をすべて同じ大きさにしない表記を有効にします。 OpenType の `pnum` の値に対応します。 + - `tabular-nums` は、数字を同じ大きさにする表記を有効にし、表の中に配置しやすくします。 OpenType の `tnum` の値に対応します。 -<h3 id="CSS">CSS</h3> +- _\<numeric-fraction-values_> -<pre class="brush: css">/* -This example uses the Source Sans Pro OpenType font, developed by Adobe -and used here under the terms of the SIL Open Font License, Version 1.1: -http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web -*/ + - : これらの値は、分数の表示に使う表記を制御します。2 つの値が利用できます。 + + - `diagonal-fractions` は、分子と分母が小さめになり、スラッシュで区切られる表記を有効にします。 OpenType の `frac` の値に対応します。 + - `stacked-fractions` は、分子と分母が小さめになり、積み重ねられて水平線で区切られた表記を有効にします。 OpenType の `afrc` の値に対応します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} -@font-face { - font-family: "Source Sans Pro"; - font-style: normal; - font-weight: 400; - src: url("https://mdn.mozillademos.org/files/15757/SourceSansPro-Regular.otf") format("opentype"); -} +## 例 -.ordinal { - font-variant-numeric: ordinal; - font-family: "Source Sans Pro"; -} -</pre> +### 序数形式の設定 -<h3 id="Result" name="Result">結果</h3> +{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-example.html", '100%', 600)}} -<p>{{EmbedLiveSample('Examples')}}</p> +## 仕様書 -<h2 id="Specifications" name="Specifications">仕様書</h2> +{{Specifications}} -<table class="standard-table"> - <thead> - <tr> - <th>仕様書</th> - <th>状況</th> - <th>備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-numeric', 'font-variant-numeric')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +## ブラウザーの互換性 -<p>{{cssinfo}}</p> +{{Compat}} -<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザーの対応</h2> +## 関連情報 -<p>{{Compat("css.properties.font-variant-numeric")}}</p> +- {{cssxref("font-variant-alternates")}} +- {{cssxref("font-variant-caps")}} +- {{cssxref("font-variant-east-asian")}} +- {{cssxref("font-variant-ligatures")}} +- {{cssxref("font-variant")}} diff --git a/files/ja/web/css/font-variant-position/index.md b/files/ja/web/css/font-variant-position/index.md index 8e474c20c5..20a6320bcc 100644 --- a/files/ja/web/css/font-variant-position/index.md +++ b/files/ja/web/css/font-variant-position/index.md @@ -5,16 +5,17 @@ tags: - CSS - CSS フォント - CSS プロパティ - - Reference + - リファレンス translation_of: Web/CSS/font-variant-position --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>CSS の <strong><code>font-variant-position</code></strong> プロパティは、上付き文字または下付き文字として配置された小さな代替文字の使用を制御します。</p> +**`font-variant-position`** は CSS のプロパティで、上付き文字または下付き文字として配置された小さな代替文字の使用を制御します。 -<p>文字は変更されないまま、フォントのベースラインから相対的に配置されます。これらの文字はふつう、 {{HTMLElement("sub")}} と {{HTMLElement("sup")}} 要素で使用されます。</p> +文字は変更されないまま、フォントのベースラインから相対的に配置されます。これらの文字はふつう、 {{HTMLElement("sub")}} と {{HTMLElement("sup")}} 要素で使用されます。 -<pre class="brush:css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ font-variant-position: normal; font-variant-position: sub; font-variant-position: super; @@ -22,46 +23,51 @@ font-variant-position: super; /* グローバル値 */ font-variant-position: inherit; font-variant-position: initial; +font-variant-position: revert; font-variant-position: unset; -</pre> +``` -<p>これらの代替文字の使用が有効の場合、一連の中のある文字がそのような字体 - 強調字体を持っていない場合、一連の文字のセット全体が代替方法を使用して、合成によって描画されます。</p> +これらの代替文字の使用が有効の場合、一連の中のある文字がそのような字体 - 強調字体を持っていない場合、一連の文字のセット全体が代替方法を使用して、合成によって描画されます。 -<p>これらの代替字体は、フォントの他の部分と同じ em ボックスと同じベースラインを共有します。それらは単にグラフィカルに強化されており、行の高さや他のボックスの特性には影響しません。</p> +これらの代替字体は、フォントの他の部分と同じ em ボックスと同じベースラインを共有します。それらは単にグラフィカルに強化されており、行の高さや他のボックスの特性には影響しません。 -<p>{{cssinfo}}</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +`font-variant-position` プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。 -<p><code>font-variant-position</code> プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。</p> +### 値 -<h3 id="Values" name="Values">値</h3> +- `normal` + - : 上付き文字および下付き文字の字体の代替を無効にします。 +- `sub` + - : 下付き文字の代替グリフを有効にします。特定の文字列で、そのような文字の1つが使用できない場合、文字列内のすべての文字が合成を使用して描画されます。 +- `super` + - : 上付き文字の代替グリフを有効にします。特定の文字列で、そのような文字の1つが使用できない場合、文字列内のすべての文字が合成を使用して描画されます。 -<dl> - <dt><code>normal</code></dt> - <dd>上付き文字および下付き文字の字体の代替を無効にします。</dd> - <dt><code>sub</code></dt> - <dd>下付き文字の代替グリフを有効にします。特定の文字列で、そのような文字の1つが使用できない場合、文字列内のすべての文字が合成を使用して描画されます。</dd> - <dt><code>super</code></dt> - <dd>上付き文字の代替グリフを有効にします。特定の文字列で、そのような文字の1つが使用できない場合、文字列内のすべての文字が合成を使用して描画されます。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 + +<h3 id="Setting_superscript_and_subscript_forms">上付きおよび下付き形の設定</h3> -<h3 id="HTML">HTML</h3> +#### HTML -<pre class="brush:html"><p class="normal">Normal!</p> -<p class="super">Super!</p> -<p class="sub">Sub!</p> -</pre> +```html +<p class="normal">Normal!</p> +<p class="super">Super!</p> +<p class="sub">Sub!</p> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush:css">p { +```css +p { display: inline; } @@ -76,31 +82,24 @@ font-variant-position: unset; .sub { font-variant-position: sub; } -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{ EmbedLiveSample('Examples') }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-position', 'font-variant-position')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.font-variant-position")}}</p> +``` + +#### 結果 + +{{ EmbedLiveSample('Setting_superscript_and_subscript_forms') }} + +## 仕様書 + +{{Specifications}} + +### ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("font-variant-alternates")}} +- {{cssxref("font-variant-caps")}} +- {{cssxref("font-variant-east-asian")}} +- {{cssxref("font-variant-ligatures")}} +- {{cssxref("font-variant-numeric")}} diff --git a/files/ja/web/css/font-variant/index.md b/files/ja/web/css/font-variant/index.md index 9f91a7c734..bd797e15fa 100644 --- a/files/ja/web/css/font-variant/index.md +++ b/files/ja/web/css/font-variant/index.md @@ -3,135 +3,105 @@ title: font-variant slug: Web/CSS/font-variant tags: - CSS - - CSS Fonts - - CSS Property - - Reference - - 'recipe:css-shorthand-property' + - CSS フォント + - CSS プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.font-variant translation_of: Web/CSS/font-variant --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>font-variant</code></strong> は CSS の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>で、フォントのすべての変化形を設定することができます。</p> +**`font-variant`** は CSS の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、フォントのすべての変化形を設定することができます。 -<p>CSS Level 2 (Revision 1) における <code>font-variant</code> の値 (つまり、 <code>normal</code> や <code>small-caps</code>) は、一括指定の {{cssxref("font")}} を用いて設定することもできます。</p> +CSS Level 2 (Revision 1) における `font-variant` の値 (つまり、 `normal` や `small-caps`) は、一括指定の {{cssxref("font")}} を用いて設定することもできます。 -<div>{{EmbedInteractiveExample("pages/css/font-variant.html")}}</div> +{{EmbedInteractiveExample("pages/css/font-variant.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構成要素のプロパティ -<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2> +このプロパティは以下の CSS プロパティの一括指定です。 -<p>このプロパティは以下の CSS プロパティの一括指定です。</p> +- {{cssxref("font-variant-alternates")}} +- {{cssxref("font-variant-caps")}} +- {{cssxref("font-variant-east-asian")}} +- {{cssxref("font-variant-ligatures")}} +- {{cssxref("font-variant-numeric")}} -<ul> - <li>{{cssxref("font-variant-alternates")}}</li> - <li>{{cssxref("font-variant-caps")}}</li> - <li>{{cssxref("font-variant-east-asian")}}</li> - <li>{{cssxref("font-variant-ligatures")}}</li> - <li>{{cssxref("font-variant-numeric")}}</li> -</ul> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">font-variant: small-caps; +```css +font-variant: small-caps; font-variant: common-ligatures small-caps; /* グローバル値 */ font-variant: inherit; font-variant: initial; +font-variant: revert; font-variant: unset; -</pre> +``` -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>normal</code></dt> - <dd>通常のフォントフェイスを定義します。それぞれの個別指定プロパティは通常の初期値になります。 <code>font-variant</code> の個別指定プロパティは、 {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-east-asian")}} です。</dd> - <dt><code>none</code></dt> - <dd>{{cssxref("font-variant-ligatures")}} を <code>none</code> に、その他の個別指定プロパティを <code>normal</code> に、それぞれの初期値を設定します。</dd> - <dt><code><common-lig-values></code>, <code><discretionary-lig-values></code>, <code><historical-lig-values></code>, <code><contextual-alt-values></code></dt> - <dd>個別指定の {{cssxref("font-variant-ligatures")}} プロパティに関するキーワードを指定します。指定可能な値は、 <code>common-ligatures</code>, <code>no-common-ligatures</code>, <code>discretionary-ligatures</code>, <code>no-discretionary-ligatures</code>, <code>historical-ligatures</code>, <code>no-historical-ligatures</code>, <code>contextual</code>, <code>no-contextual</code> です。</dd> - <dt><code>stylistic()</code>, <code>historical-forms</code>, <code>styleset()</code>, <code>character-variant()</code>, <code>swash()</code>, <code>ornaments()</code>, <code>annotation()</code></dt> - <dd>個別指定の {{cssxref("font-variant-alternates")}} プロパティに関するキーワードや関数を指定します。</dd> - <dt><code>small-caps</code>, <code>all-small-caps</code>, <code>petite-caps</code>, <code>all-petite-caps</code>, <code>unicase</code>, <code>titling-caps</code></dt> - <dd>個別指定の {{cssxref("font-variant-caps")}} プロパティに関するキーワードや関数を指定します。</dd> - <dt><code><numeric-figure-values></code>, <code><numeric-spacing-values></code>, <code><numeric-fraction-values></code>, <code>ordinal</code>, <code>slashed-zero</code></dt> - <dd>個別指定の {{cssxref("font-variant-numeric")}} プロパティに関するキーワードを指定します。指定可能な値は、 <code>lining-nums</code>, <code>oldstyle-nums</code>, <code>proportional-nums</code>, <code>tabular-nums</code>, <code>diagonal-fractions</code>, <code>stacked-fractions</code>, <code>ordinal</code>, <code>slashed-zero</code> です。</dd> - <dt><code><east-asian-variant-values></code>, <code><east-asian-width-values></code>, <code>ruby</code></dt> - <dd>個別指定の {{cssxref("font-variant-east-asian")}} プロパティに関するキーワードを指定します。指定可能な値は、 <code>jis78</code>, <code>jis83</code>, <code>jis90</code>, <code>jis04</code>, <code>simplified</code>, <code>traditional</code>, <code>full-width</code>, <code>proportional-width</code>, <code>ruby</code> です。</dd> -</dl> +- `normal` + - : 通常のフォントフェイスを定義します。それぞれの個別指定プロパティは通常の初期値になります。 `font-variant` の個別指定プロパティは、 {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-east-asian")}} です。 +- `none` + - : {{cssxref("font-variant-ligatures")}} を `none` に、その他の個別指定プロパティを `normal` に、それぞれの初期値を設定します。 +- `<common-lig-values>`, `<discretionary-lig-values>`, `<historical-lig-values>`, `<contextual-alt-values>` + - : 個別指定の {{cssxref("font-variant-ligatures")}} プロパティに関するキーワードを指定します。指定可能な値は、 `common-ligatures`, `no-common-ligatures`, `discretionary-ligatures`, `no-discretionary-ligatures`, `historical-ligatures`, `no-historical-ligatures`, `contextual`, `no-contextual` です。 +- `stylistic()`, `historical-forms`, `styleset()`, `character-variant()`, `swash()`, `ornaments()`, `annotation()` + - : 個別指定の {{cssxref("font-variant-alternates")}} プロパティに関するキーワードや関数を指定します。 +- `small-caps`, `all-small-caps`, `petite-caps`, `all-petite-caps`, `unicase`, `titling-caps` + - : 個別指定の {{cssxref("font-variant-caps")}} プロパティに関するキーワードや関数を指定します。 +- `<numeric-figure-values>`, `<numeric-spacing-values>`, `<numeric-fraction-values>`, `ordinal`, `slashed-zero` + - : 個別指定の {{cssxref("font-variant-numeric")}} プロパティに関するキーワードを指定します。指定可能な値は、 `lining-nums`, `oldstyle-nums`, `proportional-nums`, `tabular-nums`, `diagonal-fractions`, `stacked-fractions`, `ordinal`, `slashed-zero` です。 +- `<east-asian-variant-values>`, `<east-asian-width-values>`, `ruby` + - : 個別指定の {{cssxref("font-variant-east-asian")}} プロパティに関するキーワードを指定します。指定可能な値は、 `jis78`, `jis83`, `jis90`, `jis04`, `simplified`, `traditional`, `full-width`, `proportional-width`, `ruby` です。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式定義 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_the_small-caps_font_variant" name="Setting_the_small-caps_font_variant">スモールキャップのフォント変化形の設定</h3> +<h3 id="Setting_the_small-caps_font_variant">スモールキャップのフォント変化形の設定</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><p class="normal">Firefox rocks!</p> -<p class="small">Firefox rocks!</p> -</pre> +```html +<p class="normal">Firefox rocks!</p> +<p class="small">Firefox rocks!</p> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">p.normal { +```css +p.normal { font-variant: normal; } p.small { font-variant: small-caps; } -</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{ EmbedLiveSample('Setting_the_small-caps_font_variant', '', '', '', 'Web/CSS/font-variant') }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant', 'font-variant')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>新しい <code>font-variant-*</code> プロパティの一括指定になった。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-variant', 'font-variant')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#font-variant', 'font-variant')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("css.properties.font-variant")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("text-transform")}}</li> - <li>{{cssxref("text-combine-upright")}}</li> - <li>{{cssxref("text-orientation")}}</li> -</ul> +``` + +#### 結果 + +{{ EmbedLiveSample('Setting_the_small-caps_font_variant', '', '', '', 'Web/CSS/font-variant') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("text-transform")}} +- {{cssxref("text-combine-upright")}} +- {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/font-variation-settings/index.md b/files/ja/web/css/font-variation-settings/index.md index 2fc23fc8f5..59236be607 100644 --- a/files/ja/web/css/font-variation-settings/index.md +++ b/files/ja/web/css/font-variation-settings/index.md @@ -5,21 +5,21 @@ tags: - CSS - CSS フォント - CSS プロパティ - - Reference - - 'recipe:css-property' + - リファレンス + - recipe:css-property +browser-compat: css.properties.font-variation-settings translation_of: Web/CSS/font-variation-settings --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>font-variation-settings</code></strong> は CSS のプロパティで、変更したい特性の４文字の軸名と特性の値を指定することにより、<a href="/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">可変フォント</a>に対する低水準の制御を提供します。</p> +**`font-variation-settings`** は CSS のプロパティで、変更したい特性の 4 文字の軸名と特性の値を指定することにより、[可変フォント](/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide)に対する低水準の制御を提供します。 -<div>{{EmbedInteractiveExample("pages/css/font-variation-settings.html")}}</div> +{{EmbedInteractiveExample("pages/css/font-variation-settings.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* 既定の設定を使用 */ +```css +/* 既定の設定を使用 */ font-variation-settings: normal; /* 可変フォントの軸名の値を設定 */ @@ -28,126 +28,104 @@ font-variation-settings: "XHGT" 0.7; /* グローバル値 */ font-variation-settings: inherit; font-variation-settings: initial; +font-variation-settings: revert; font-variation-settings: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> +``` -<p>このプロパティは1つまたは2つの形を取ることができます。</p> +### 値 -<dl> - <dt><code>normal</code></dt> - <dd>テキストは既定の設定を使用してレイアウトされます。</dd> - <dt><code><string> <number></code></dt> - <dd>テキストを描画する際、フォントの特性を有効または無効にするために可変フォントの軸名のリストがテキストレイアウトエンジンへ渡されます。それぞれの設定は常に、一つ以上の4文字の ASCII 文字の {{cssxref("<string>")}} と、続いて設定する軸の値を示す {{cssxref("number")}} の組み合わせから成ります。 <code><string></code> の文字が多すぎたり少なすぎたり、文字が U+20 - U+7E のコード点の範囲を超えていたりした場合は、プロパティ全体が無効になります。フォントデザイナーによって定義された利用可能な値の範囲次第では、 <code><number></code> は小数や負の数を取ることもできます。</dd> -</dl> +このプロパティは 1 つまたは 2 つの形を取ることができます。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +- `normal` + - : テキストは既定の設定を使用してレイアウトされます。 +- `<string> <number>` + - : テキストを描画する際、フォントの特性を有効または無効にするために可変フォントの軸名のリストがテキストレイアウトエンジンへ渡されます。それぞれの設定は常に、一つ以上の4文字の ASCII 文字の {{cssxref("<string>")}} と、続いて設定する軸の値を示す {{cssxref("number")}} の組み合わせから成ります。`<string>` の文字が多すぎたり少なすぎたり、文字が U+20 - U+7E のコードポイントの範囲を超えていたりした場合は、プロパティ全体が無効になります。フォントデザイナーによって定義された利用可能な値の範囲次第では、`<number>` は小数や負の数を取ることもできます。 -{{csssyntax}} +## 解説 -<h2 id="Description" name="Description">解説</h2> +このプロパティは、その特性を有効にしたりアクセスしたりするための他の方法がない場合に、可変フォント特性を設定するために設計された低水準の仕組みです。これらの特性 (例えば {{cssxref("font-weight")}} や {{cssxref("font-style")}}) を設定するための基本プロパティがない場合にのみ使用してください。 -<p>このプロパティは、その特性を有効にしたりアクセスしたりするための他の方法がない場合に、可変フォント特性を設定するために設計された低水準の仕組みです。これらの特性 (例えば {{cssxref("font-weight")}} や {{cssxref("font-style")}}) を設定するための基本プロパティがない場合にのみ使用してください。</p> +`font-variation-settings` を使用して設定されたフォント特性は、常に `font-weight` などの基本フォントプロパティに関する設定を上書きし、言うまでもなくカスケードに現れます。ブラウザーによっては、 `@font-face` 宣言が `font-weight` の範囲を含んでいる場合のみこれが成り立ちます。 -<p><code>font-variation-settings</code> を使用して設定されたフォント特性は、常に <code>font-weight</code> などの基本フォントプロパティに関する設定を上書きし、言うまでもなくカスケードに現れます。ブラウザーによっては、 <code>@font-face</code> 宣言が <code>font-weight</code> の範囲を含んでいる場合のみこれが成り立ちます。</p> +### 登録済みの軸とカスタム軸 -<h3 id="Registered_and_custom_axes" name="Registered_and_custom_axes">登録済みの軸と独自の軸</h3> +可変フォントの軸には、**登録済み**の軸と**カスタム**軸があります。 -<p>可変フォントの軸には、<strong>登録済み</strong>の軸と<strong>独自</strong>の軸があります。</p> +登録済みの軸は、もっとも頻繁に遭遇するもので、仕様書の著者が標準化する価値があると感じるほど一般的なものです。なお、これは作者がフォントにすべてを入れる必要があることを意味するものではありません。 -<p>登録済みの軸はよく現れます。 — 仕様書の作者が標準化する価値があると感じるほどよく使われます。なお、これは作者がフォントにすべてを入れる必要があることを意味するものではありません。</p> - -<p>こちらは関連する CSS プロパティに対応する登録済みの軸です。</p> +こちらは関連する CSS プロパティに対応する登録済みの軸です。 <table class="standard-table"> - <thead> - <tr> - <th scope="col">軸のタグ</th> - <th scope="col">CSS プロパティ</th> - </tr> - </thead> - <tbody> - <tr> - <td>"wght"</td> - <td>{{cssxref("font-weight")}}</td> - </tr> - <tr> - <td>"wdth"</td> - <td>{{cssxref("font-stretch")}}</td> - </tr> - <tr> - <td>"slnt" (slant)</td> - <td>{{cssxref("font-style")}}: <code>oblique + angle</code></td> - </tr> - <tr> - <td>"ital"</td> - <td>{{cssxref("font-style")}}: <code>italic</code></td> - </tr> - <tr> - <td>"opsz"</td> - <td> - <p>{{cssxref("font-optical-sizing")}}</p> - </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">軸のタグ</th> + <th scope="col">CSS プロパティ</th> + </tr> + </thead> + <tbody> + <tr> + <td>"wght"</td> + <td>{{cssxref("font-weight")}}</td> + </tr> + <tr> + <td>"wdth"</td> + <td>{{cssxref("font-stretch")}}</td> + </tr> + <tr> + <td>"slnt" (slant)</td> + <td>{{cssxref("font-style")}}: `oblique + angle`</td> + </tr> + <tr> + <td>"ital"</td> + <td>{{cssxref("font-style")}}: `italic`</td> + </tr> + <tr> + <td>"opsz"</td> + <td><p>{{cssxref("font-optical-sizing")}}</p></td> + </tr> + </tbody> </table> -<p>独自の軸はフォントデザイナーがフォントに変化を付けるためのもの全てがあり得、例えばアセンダーまたはデセンダーの高さ、セリフの大きさ、その他想像できるすべてのものです。どの軸も4文字の固有の軸名を与えれば使用することができます。一部はもっと有名になっており、そのうち登録されるものもあるかもしれません。</p> +カスタム軸はフォントデザイナーがフォントに変化を付けるためのもの全てがあり得ます。例えばアセンダーまたはデセンダーの高さ、セリフの大きさ、その他想像できるすべてのものです。どの軸も 4 文字の固有の軸名を与えれば使用することができます。一部はもっと有名になっており、そのうち登録されるものもあるかもしれません。 + +> **Note:** 登録済みの軸のタグは小文字のタグを使用するのに対し、カスタム軸は大文字のタグを使用します。なお、フォントデザイナーはこの慣習に従うことを強制されているわけではなく、従っていないものもあります。ここで重要なことは、軸のタグは大文字と小文字を区別することです。 -<div class="note"> -<p><strong>注</strong>: 登録済みの軸のタグは小文字のタグを使用するのに対し、d久慈の軸は大文字のタグを使用します。なお、フォントデザイナーはこの慣習に従うことを強制されているわけではなく、従っていないものもあります。ここで重要なことは、軸のタグは大文字と小文字を区別することです。</p> -</div> +オペレーティングシステムで可変フォントを使用するためには、最新版であることを確認する必要があります。例えば、 Linux ベースの OS では最新版の Linux Freetype が必要であり、 macOS 10.13 より前では可変フォントに対応していません。オペレーティングシステムが最新版でない場合、ウェブページや Firefox 開発者ツールで可変フォントを使用することができません。 -<h2 id="Examples" name="Examples">例</h2> +## 公式定義 -<p>登録済みの軸を記述した以下のデモを見てください。その他の可変フォントの例は、 <a href="/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">可変フォントガイド</a>, <a class="external external-icon" href="https://v-fonts.com/" rel="noopener">v-fonts.com</a>, and <a class="external external-icon" href="https://www.axis-praxis.org/" rel="noopener">axis-praxis.org</a> などで見られます。</p> +{{cssinfo}} -<div class="warning"> -<p><strong>警告</strong>: オペレーティングシステムで可変フォントを使用するためには、最新版であることを確認する必要があります。例えば、 Linux ベースの OS では最新版の Linux Freetype が必要であり、 macOS 10.13 より前では可変フォントに対応していません。オペレーティングシステムが最新版でない場合、ウェブページや Firefox 開発者ツールで可変フォントを使用することができません。</p> -</div> +## 形式文法 -<h3 id="Weight_wght">Weight (wght)</h3> +{{csssyntax}} -<p>以下のデモの CSS は、フォントの重みの値を編集することができます。</p> +## 例 -<div>{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}</div> +他にも多数の可変フォントの例が、 [可変フォントガイド](/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide), [v-fonts.com](https://v-fonts.com/), [axis-praxis.org](https://www.axis-praxis.org/) などにあります。 -<h3 id="Slant_slnt">Slant (slnt)</h3> +### 太さ (wght) -<p>以下のデモの CSS は、フォントの傾きの値を編集することができます。</p> +以下のデモの CSS は、フォントの太さの値を編集することができます。 -<div>{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}</div> +{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +### 傾き (slnt) -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Fonts', '#descdef-font-face-font-variation-settings', 'font-variation-settings')}}</td> - <td>{{Spec2('CSS4 Fonts')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +以下のデモの CSS は、フォントの傾きの値を編集することができます。 + +{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}} + +## 仕様書 -<p>{{cssinfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.font-variation-settings")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">可変フォントガイド</a></li> - <li><a href="https://www.microsoft.com/typography/otspec180/otvaroverview.htm">OpenType Font Variations Overview</a></li> - <li><a href="https://www.microsoft.com/typography/otspec/dvaraxisreg.htm">OpenType Design-Variation Axis Tag Registry</a></li> -</ul> +- [可変フォントガイド](/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide) +- [OpenType Font Variations Overview](https://docs.microsoft.com/typography/opentype/spec/otvaroverview) +- [OpenType Design-Variation Axis Tag Registry](https://docs.microsoft.com/typography/opentype/spec/dvaraxisreg) diff --git a/files/ja/web/css/font-weight/index.md b/files/ja/web/css/font-weight/index.md index 66b685f51b..75d0cf888f 100644 --- a/files/ja/web/css/font-weight/index.md +++ b/files/ja/web/css/font-weight/index.md @@ -3,23 +3,23 @@ title: font-weight slug: Web/CSS/font-weight tags: - CSS - - CSS Fonts - - CSS Property - - Reference - - 'recipe:css-property' + - CSS フォント + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.font-weight translation_of: Web/CSS/font-weight --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>font-weight</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、フォントの太さ (あるいは重み) を指定します。実際に表示されるフォントの太さは、現在設定されている {{cssxref("font-family")}} に依存する場合があります。</p> +**`font-weight`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フォントの太さ (あるいは重み) を指定します。実際に表示されるフォントの太さは、現在設定されている {{cssxref("font-family")}} に依存する場合があります。 -<div>{{EmbedInteractiveExample("pages/css/font-weight.html")}}</div> +{{EmbedInteractiveExample("pages/css/font-weight.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ font-weight: normal; font-weight: bold; @@ -41,300 +41,171 @@ font-weight: 900; /* グローバル値 */ font-weight: inherit; font-weight: initial; +font-weight: revert; font-weight: unset; -</pre> - -<p><code>font-weight</code> プロパティは、以下の一覧から選択した単一のキーワードで指定します。</p> - -<h3 id="Values" name="Values">値</h3> +``` -<dl> - <dt><code>normal</code></dt> - <dd>通常のフォントの太さです。 <code>400</code> と同じです。</dd> - <dt><code>bold</code></dt> - <dd>太字のフォントの太さです。 <code>700</code> と同じです。</dd> - <dt><code>lighter</code></dt> - <dd>フォントの太さが親要素よりも相対的に1つ細くなります。相対的な太さの計算には、フォントの太さが4つのみ考慮されることに注意してください。下記の{{anch("Meaning of relative weights", "相対的な太さの意味")}}を参照してください。</dd> - <dt><code>bolder</code></dt> - <dd>フォントの太さが親要素よりも相対的に1つ太くなります。相対的な太さの計算には、フォントの太さが4つのみ考慮されることに注意してください。下記の{{anch("Meaning of relative weights", "相対的な太さの意味")}}を参照してください。</dd> - <dt><code><number></code></dt> - <dd>1 以上 1000 以下の {{cssxref("<number>")}} 値です。数値が大きいと、数値が小さい物より太さが太い (又は同じ) ことを表します。よく使用される値は、以下の<a href="#Common_weight_name_mapping">一般的な太さ名との対応</a>にあるように、共通の太さ名に対応しています。</dd> -</dl> +`font-weight` プロパティは、以下の一覧から選択した単一のキーワードで指定します。 -<p><code>font-weight</code> 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は{{anch("Fallback weights", "太さのフォールバック")}}の仕組みを用いて、これらの値のいずれかに変換されます。</p> +### 値 -<p>CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、{{anch("Variable fonts", "可変フォント")}}が導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。</p> +- `normal` + - : 通常のフォントの太さです。 `400` と同じです。 +- `bold` + - : 太字のフォントの太さです。 `700` と同じです。 +- `lighter` + - : フォントの太さが親要素よりも相対的に 1 つ細くなります。相対的な太さの計算に考慮されるフォントの太さは 4 つのみであることに注意してください。下記の{{anch("Meaning of relative weights", "相対的な太さの意味")}}を参照してください。 +- `bolder` + - : フォントの太さが親要素よりも相対的に1つ太くなります。相対的な太さの計算に考慮されるフォントの太さは 4 つのみであることに注意してください。下記の{{anch("Meaning of relative weights", "相対的な太さの意味")}}を参照してください。 +- `<number>` + - : 1 以上 1000 以下の {{cssxref("<number>")}} 値です。数値が大きいと、数値が小さいものより太さが太い (または等しい) ことを表します。よく使用される値は、以下の[一般的な太さ名との対応](#一般的な太さ名との対応)にあるように、共通の太さ名に対応しています。 -<h3 id="Fallback_weights" name="Fallback_weights">太さのフォールバック</h3> +`font-weight` 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は{{anch("太さの代替")}}の仕組みを用いて、これらの値のいずれかに変換されます。 -<p>ちょうど一致する太さが利用できない場合、実際に表示される太さを定めるために以下の規則が使用されます。</p> +CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、{{anch("Variable fonts", "可変フォント")}}が導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。 -<ul> - <li>対象となる太さがが <code>400</code>～<code>500</code> で指定された場合 +### 太さの代替 - <ul> - <li>利用できる太さを、対象値から <code>500</code> までの間で昇順で探します。</li> - <li>一致するものがなければ、対象値未満の利用できる太さを降順で探します。</li> - <li>一致するものがなければ、 <code>500</code> より大きい太さを昇順で探します。</li> - </ul> - </li> - <li>太さが <code>400</code> 未満で指定された場合、対象値以下の太さを降順で探します。一致するものがなければ、対象値より大きい太さを昇順で探します。</li> - <li>太さが <code>500</code> より大きく指定された場合、対象値以上の太さを昇順で探します。一致するものがなければ、対象値より小さい太さを降順で探します。</li> -</ul> +正確に一致する太さが利用できない場合、実際に表示される太さを定めるために以下の規則が使用されます。 -<h3 id="Meaning_of_relative_weights" name="Meaning_of_relative_weights">相対的な太さの意味</h3> +- 対象となる太さがが `400`～`500` で指定された場合 -<p>以下の表は、 <code>lighter</code> または <code>bolder</code> を指定する場合に要素の絶対的な太さを算出する方法を示しています。</p> + - 利用できる太さを、対象値から `500` までの間で昇順で探します。 + - 一致するものがなければ、対象値未満の利用できる太さを降順で探します。 + - 一致するものがなければ、 `500` より大きい太さを昇順で探します。 -<p>なお、相対的な太さを使用した場合、 thin (100), normal (400), bold (700), heavy (900) の4つの太さのみが考慮されます。 font-family でもっと多くの太さが利用できる場合であっても、相対的な太さの計算の用途では無視されます。</p> +- 太さが `400` 未満で指定された場合、対象値以下の太さを降順で探します。一致するものがなければ、対象値より大きい太さを昇順で探します。 +- 太さが `500` より大きく指定された場合、対象値以上の太さを昇順で探します。一致するものがなければ、対象値より小さい太さを降順で探します。 -<table class="standard-table"> - <thead> - <tr> - <th>継承値</th> - <th><code>bolder</code></th> - <th><code>lighter</code></th> - </tr> - </thead> - <tbody> - <tr> - <th>100</th> - <td>400</td> - <td>100</td> - </tr> - <tr> - <th>200</th> - <td>400</td> - <td>100</td> - </tr> - <tr> - <th>300</th> - <td>400</td> - <td>100</td> - </tr> - <tr> - <th>400</th> - <td>700</td> - <td>100</td> - </tr> - <tr> - <th>500</th> - <td>700</td> - <td>100</td> - </tr> - <tr> - <th>600</th> - <td>900</td> - <td>400</td> - </tr> - <tr> - <th>700</th> - <td>900</td> - <td>400</td> - </tr> - <tr> - <th>800</th> - <td>900</td> - <td>700</td> - </tr> - <tr> - <th>900</th> - <td>900</td> - <td>700</td> - </tr> - </tbody> -</table> +### 相対的な太さの意味 -<h3 id="Common_weight_name_mapping" name="Common_weight_name_mapping">一般的な太さ名との対応</h3> +以下の表は、 `lighter` または `bolder` を指定する場合に要素の絶対的な太さを算出する方法を示しています。 -<p><code>100</code> から <code>900</code> の数値は、おおよそ以下の太さ名に対応します (<a href="https://docs.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass">OpenType 仕様書</a>を参照してください)。</p> +なお、相対的な太さを使用した場合、 thin (100), normal (400), bold (700), heavy (900) の4つの太さのみが考慮されます。 font-family でもっと多くの太さが利用できる場合であっても、相対的な太さの計算の用途では無視されます。 <table class="standard-table"> - <thead> - <tr> - <th scope="col">値</th> - <th scope="col">太さ名</th> - </tr> - </thead> - <tbody> - <tr> - <td>100</td> - <td>Thin (Hairline)</td> - </tr> - <tr> - <td>200</td> - <td>Extra Light (Ultra Light)</td> - </tr> - <tr> - <td>300</td> - <td>Light</td> - </tr> - <tr> - <td>400</td> - <td>Normal (Regular)</td> - </tr> - <tr> - <td>500</td> - <td>Medium</td> - </tr> - <tr> - <td>600</td> - <td>Semi Bold (Demi Bold)</td> - </tr> - <tr> - <td>700</td> - <td>Bold</td> - </tr> - <tr> - <td>800</td> - <td>Extra Bold (Ultra Bold)</td> - </tr> - <tr> - <td>900</td> - <td>Black (Heavy)</td> - </tr> - <tr> - <td>950</td> - <td><a href="https://docs.microsoft.com/en-us/dotnet/api/system.windows.fontweights?view=netframework-4.8#remarks">Extra Black (Ultra Black)</a></td> - </tr> - </tbody> + <thead> + <tr> + <th>継承値</th> + <th><code>bolder</code></th> + <th><code>lighter</code></th> + </tr> + </thead> + <tbody> + <tr> + <th>100</th> + <td>400</td> + <td>100</td> + </tr> + <tr> + <th>200</th> + <td>400</td> + <td>100</td> + </tr> + <tr> + <th>300</th> + <td>400</td> + <td>100</td> + </tr> + <tr> + <th>400</th> + <td>700</td> + <td>100</td> + </tr> + <tr> + <th>500</th> + <td>700</td> + <td>100</td> + </tr> + <tr> + <th>600</th> + <td>900</td> + <td>400</td> + </tr> + <tr> + <th>700</th> + <td>900</td> + <td>400</td> + </tr> + <tr> + <th>800</th> + <td>900</td> + <td>700</td> + </tr> + <tr> + <th>900</th> + <td>900</td> + <td>700</td> + </tr> + </tbody> </table> -<h3 id="Variable_fonts" name="Variable_fonts">可変フォント</h3> - -<p>多くのフォントは、<a href="#Common_weight_name_mapping">一般的な太さ名との対応</a>の中の数値の一つに対応する特定の太さを持っています。しかし、可変フォントと呼ばれる一部のフォントは、もっと高い又は低い粒度の太さの範囲に対応しており、これにより、デザイナーは選択した太さをより詳細に制御することができます。</p> - -<p>TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。</p> - -<p>以下の例を動作させるには、 CSS Fonts Level 4 の font-weight が 1～1000 の任意の数を取れる構文に対応したブラウザーが必要です。</p> - -<div style="border: 10px solid #f5f9fa; padding: 1rem;">{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div> - -<h4 id="HTML">HTML</h4> - -<div id="variable-font-example"> -<pre class="brush: html notranslate"><header> - <input type="range" id="weight" name="weight" min="1" max="1000" /> - <label for="weight">Weight</label> -</header> -<div class="container"> - <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p> -</div> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">/* -Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans) -and is used here under the terms of its license: -https://github.com/LettError/mutatorSans/blob/master/LICENSE -*/ - -@font-face { - src: url('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf'); - font-family:'MutatorSans'; - font-style: normal; -} - -label { - font: 1rem monospace; - white-space: nowrap; -} - -.container { - max-height: 150px; - overflow-y: auto; -} - -.sample { - text-transform: uppercase; - font: 1.5rem 'MutatorSans', sans-serif; -} -</pre> +### 一般的な太さ名との対応 -<div class="hidden"> -<pre class="brush: css notranslate">html, body { - max-height: 100vh; - max-width: 100vw; - overflow: hidden; -} +`100` から `900` の数値は、おおよそ以下の太さ名に対応します ([OpenType 仕様書](https://docs.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass)を参照してください)。 -body { - display: flex; - flex-direction: column; -} +| 値 | 太さ名 | +| --- | --------------------------------------------------------------------------------------------------------------------------------- | +| 100 | Thin (Hairline) | +| 200 | Extra Light (Ultra Light) | +| 300 | Light | +| 400 | Normal (Regular) | +| 500 | Medium | +| 600 | Semi Bold (Demi Bold) | +| 700 | Bold | +| 800 | Extra Bold (Ultra Bold) | +| 900 | Black (Heavy) | +| 950 | [Extra Black (Ultra Black)](https://docs.microsoft.com/en-us/dotnet/api/system.windows.fontweights?view=netframework-4.8#remarks) | -header { - margin-bottom: 1.5rem; -} +### 可変フォント -.container { - flex-grow: 1; -} +多くのフォントは、[一般的な太さ名との対応](#一般的な太さ名との対応)の中の数値の一つに対応する特定の太さを持っています。しかし、可変フォントと呼ばれる一部のフォントは、もっと高いまたは低い粒度の太さの範囲に対応しており、これにより、デザイナーは選択した太さをより詳細に制御することができます。 -.container > p { - margin-top: 0; - margin-bottom: 0; -} -</pre> -</div> +TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。 -<h4 id="JavaScript">JavaScript</h4> +以下の例を動作させるには、 CSS Fonts Level 4 の font-weight が 1～1000 の任意の数を取れる構文に対応したブラウザーが必要です。 -<pre class="brush: js notranslate">let weightLabel = document.querySelector('label[for="weight"]'); -let weightInput = document.querySelector('#weight'); -let sampleText = document.querySelector('.sample'); +{{EmbedGHLiveSample("css-examples/variable-fonts/font-weight.html", '100%', 860)}} -function update() { - weightLabel.textContent = `font-weight: ${weightInput.value};`; - sampleText.style.fontWeight = weightInput.value; -} +## アクセシビリティの考慮 -weightInput.addEventListener('input', update); +弱視の人は、 `font-weight` の値が `100` (Thin/Hairline) または `200` (Extra Light) の場合、特にフォントの[コントラスト比が低い場合](/ja/docs/Web/CSS/color#accessibility_concerns)は、テキストを読むのが難しくなることがあります。 -update(); -</pre> -</div> +- [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) -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> +## 公式定義 -<p>弱視の人は、 <code>font-weight</code> の値が <code>100</code> (Thin/Hairline) または <code>200</code> (Extra Light) の場合、特にフォントの<a href="/ja/docs/Web/CSS/color#Accessibility_concerns">コントラスト比が低い場合</a>は、テキストを読むのが難しくなることがあります。</p> +{{cssinfo}} -<ul> - <li><a href="/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">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式定義 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_font_weights">Setting font weights</h3> +<h3 id="Setting_font_weights">フォントの太さの設定</h3> -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><p> +```html +<p> Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice "without pictures or conversations?" -</p> +</p> -<div>I'm heavy<br/> - <span>I'm lighter</span> -</div> -</pre> +<div>I'm heavy<br/> + <span>I'm lighter</span> +</div> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush:css notranslate">/* 段落のテキストを太字にします */ +```css +/* 段落のテキストを太字にします */ p { font-weight: bold; } @@ -349,46 +220,23 @@ div { 1 段階細くします */ span { font-weight: lighter; -}</pre> +} +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Setting_font_weights","400","300")}}</p> +{{EmbedLiveSample("Setting_font_weights","400","300")}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Fonts', '#font-weight-prop', 'font-weight')}}</td> - <td>{{Spec2('CSS4 Fonts')}}</td> - <td><code>font-weight</code> で 1～1000 の任意の数を受け付けるよう定義。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## 関連情報 -<p>{{Compat("css.properties.font-weight")}}</p> +- {{cssxref("font-style")}} +- {{cssxref("font-family")}} +- [基本的なテキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals) diff --git a/files/ja/web/css/font/index.md b/files/ja/web/css/font/index.md index 70d7bfbd7c..3b38ee62f0 100644 --- a/files/ja/web/css/font/index.md +++ b/files/ja/web/css/font/index.md @@ -3,118 +3,108 @@ title: font slug: Web/CSS/font tags: - CSS - - CSS Fonts - - CSS Property - - Reference - - 'recipe:css-shorthand-property' + - CSS フォント + - CSS プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.font translation_of: Web/CSS/font --- -<div>{{CSSRef}}</div> - -<p><strong><code>font</code></strong> は CSS の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>で、要素のフォントの様々なプロパティをすべて設定します。また、要素のフォントにシステムフォントを設定することもできます。</p> - -<div>{{EmbedInteractiveExample("pages/css/font.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<p>他の一括指定プロパティ同様、個別の値が指定されなかった場合は、それぞれの初期値が設定されます (おそらく一括指定ではないプロパティを使用して設定された以前の値を上書きします)。 <code>font</code> によって直接設定できない個別指定の {{cssxref("font-size-adjust")}}, {{cssxref("font-kerning")}} も初期値に設定されます。</p> - -<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2> - -<p>このプロパティは以下の CSS プロパティの一括指定です。</p> - -<ul> - <li>{{cssxref("font-family")}}</li> - <li>{{cssxref("font-size")}}</li> - <li>{{cssxref("font-stretch")}}</li> - <li>{{cssxref("font-style")}}</li> - <li>{{cssxref("font-variant")}}</li> - <li>{{cssxref("font-weight")}}</li> - <li>{{cssxref("line-height")}}</li> -</ul> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>font</code> プロパティはシステムフォントを選択するための単一のキーワード、又は様々なフォント関連プロパティの一括指定のどちらかで指定することができます。</p> - -<p><code>font</code> をシステムキーワードとして指定する場合は、 <code><a href="#caption">caption</a></code>, <code><a href="#icon">icon</a></code>, <code><a href="#menu">menu</a></code>, <code><a href="#message-box">message-box</a></code>, <code><a href="#small-caption">small-caption</a></code>, <code><a href="#status-bar">status-bar</a></code> のうちの一つでなければなりません。</p> - -<p><code>font</code> を様々なフォント関連プロパティの一括指定とする場合は、次のようになります。</p> - -<ul> - <li>次の値を含めなければなりません。 - <ul> - <li>{{cssxref("<font-size>")}}</li> - <li>{{cssxref("<font-family>")}}</li> - </ul> - </li> - <li>次の値は任意で含めることができます。 - <ul> - <li>{{cssxref("<font-style>")}}</li> - <li>{{cssxref("<font-variant>")}}</li> - <li>{{cssxref("<font-weight>")}}</li> - <li>{{cssxref("<font-stretch>")}}</li> - <li>{{cssxref("<line-height>")}}</li> - </ul> - </li> - <li><code>font-style</code>, <code>font-variant</code>, <code>font-weight</code> は <code>font-size</code> よりも前になければなりません</li> - <li><code>font-variant</code> は CSS 2.1 で定義された値、つまり <code>normal</code> 及び <code>small-caps</code> のみ指定できます</li> - <li><code>font-stretch</code> は単一のキーワード値のみを指定することができます</li> - <li><code>line-height</code> は <code>font-size</code> の直後に、 "/" で区切って、 "<code>16px/3</code>" のように指定します</li> - <li><code>font-family</code> は指定される最後の値である必要があります。</li> -</ul> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt id="<'font-style'>"><code><'font-style'></code></dt> - <dd>{{Cssxref("font-style")}} プロパティを参照。</dd> - <dt id="<'font-variant'>"><code><'font-variant'></code></dt> - <dd>{{Cssxref("font-variant")}} プロパティを参照。</dd> - <dt id="<'font-weight'>"><code><'font-weight'></code></dt> - <dd>{{Cssxref("font-weight")}} プロパティを参照。</dd> - <dt id="<'font-stretch'>"><code><'font-stretch'></code></dt> - <dd>{{Cssxref("font-stretch")}} プロパティを参照。</dd> - <dt id="<'font-size'>"><code><'font-size'></code></dt> - <dd>{{Cssxref("font-size")}} プロパティを参照。</dd> - <dt id="<'line-height'>"><code><'line-height'></code></dt> - <dd>{{cssxref("line-height")}} プロパティを参照。</dd> - <dt id="<'font-family'>"><code><'font-family'></code></dt> - <dd>{{Cssxref("font-family")}} プロパティを参照。</dd> -</dl> - -<h4 id="システムフォント値">システムフォント値</h4> - -<dl> - <dt id="caption"><code>caption</code></dt> - <dd>キャプション付きコントロールに使われるシステムフォント (ボタン、ドロップダウンなど)。</dd> - <dt id="icon"><code>icon</code></dt> - <dd>ラベルアイコンに使用されるシステムフォント。</dd> - <dt id="menu"><code>menu</code></dt> - <dd>メニューに使われるシステムフォント (ドロップダウンメニュー、メニューリストなど)。</dd> - <dt id="message-box"><code>message-box</code></dt> - <dd>ダイアログボックスに使われるシステムフォント。</dd> - <dt id="small-caption"><code>small-caption</code></dt> - <dd>小さいコントロールのラベルに使われるシステムフォント。</dd> - <dt id="status-bar"><code>status-bar</code></dt> - <dd>ウィンドウのステータスバーに使われるシステムフォント。</dd> - <dt>接頭辞付きのシステムフォントキーワード</dt> - <dd>ブラウザーは他にも、接頭辞付きのキーワードをいくつか実装していることがあります。 Gecko は、 <code>-moz-window</code>, <code>-moz-document</code>, <code>-moz-desktop</code>, <code>-moz-info</code>, <code>-moz-dialog</code>, <code>-moz-button</code>, <code>-moz-pull-down-menu</code>, <code>-moz-list</code>, <code>-moz-field</code> を実装しています。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{CSSInfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +{{CSSRef}} + +**`font`** は CSS の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、要素のフォントの様々なプロパティをすべて設定します。また、要素のフォントにシステムフォントを設定することもできます。 + +{{EmbedInteractiveExample("pages/css/font.html")}} + +他の一括指定プロパティ同様、個別の値が指定されなかった場合は、それぞれの初期値が設定されます (おそらく一括指定ではないプロパティを使用して設定された以前の値を上書きします)。 `font` によって直接設定できない個別指定の {{cssxref("font-size-adjust")}}, {{cssxref("font-kerning")}} も初期値に設定されます。 + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- {{cssxref("font-family")}} +- {{cssxref("font-size")}} +- {{cssxref("font-stretch")}} +- {{cssxref("font-style")}} +- {{cssxref("font-variant")}} +- {{cssxref("font-weight")}} +- {{cssxref("line-height")}} + +## 構文 + +`font` プロパティはシステムフォントを選択するための単一のキーワード、又は様々なフォント関連プロパティの一括指定のどちらかで指定することができます。 + +`font` をシステムキーワードとして指定する場合は、 `caption`, `icon`, `menu`, `message-box`, `small-caption`, `status-bar` のうちの一つでなければなりません。 + +`font` を様々なフォント関連プロパティの一括指定とする場合は、次のようになります。 + +- 次の値を含めなければなりません。 + + - {{cssxref("<font-size>")}} + - {{cssxref("<font-family>")}} + +- 次の値は任意で含めることができます。 + + - {{cssxref("<font-style>")}} + - {{cssxref("<font-variant>")}} + - {{cssxref("<font-weight>")}} + - {{cssxref("<font-stretch>")}} + - {{cssxref("<line-height>")}} + +- `font-style`, `font-variant`, `font-weight` は `font-size` よりも前になければなりません。 +- `font-variant` は CSS 2.1 で定義された値、つまり `normal` および `small-caps` のみ指定できます。 +- `font-stretch` は単一のキーワード値のみを指定することができます。 +- `line-height` は `font-size` の直後に、 "/" で区切って、 "`16px/3`" のように指定します。 +- `font-family` は指定される最後の値である必要があります。 + +### 値 + +- `<'font-style'>` + - : {{cssxref("font-style")}} プロパティを参照。 +- `<'font-variant'>` + - : {{cssxref("font-variant")}} プロパティを参照。 +- `<'font-weight'>` + - : {{cssxref("font-weight")}} プロパティを参照。 +- `<'font-stretch'>` + - : {{cssxref("font-stretch")}} プロパティを参照。 +- `<'font-size'>` + - : {{cssxref("font-size")}} プロパティを参照。 +- `<'line-height'>` + - : {{cssxref("line-height")}} プロパティを参照。 +- `<'font-family'>` + - : {{cssxref("font-family")}} プロパティを参照。 + +#### システムフォント値 + +- `caption` + - : キャプション付きコントロールに使われるシステムフォント (ボタン、ドロップダウンなど)。 +- `icon` + - : ラベルアイコンに使用されるシステムフォント。 +- `menu` + - : メニューに使われるシステムフォント (ドロップダウンメニュー、メニューリストなど)。 +- `message-box` + - : ダイアログボックスに使われるシステムフォント。 +- `small-caption` + - : 小さいコントロールのラベルに使われるシステムフォント。 +- `status-bar` + - : ウィンドウのステータスバーに使われるシステムフォント。 +- 接頭辞付きのシステムフォントキーワード + - : ブラウザーは他にも、接頭辞付きのキーワードをいくつか実装していることがあります。 Gecko は、 `-moz-window`, `-moz-document`, `-moz-desktop`, `-moz-info`, `-moz-dialog`, `-moz-button`, `-moz-pull-down-menu`, `-moz-list`, `-moz-field` を実装しています。 + +## 公式定義 + +{{CSSInfo}} + +## 形式定義 {{CSSSyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_font_properties" name="Setting_font_properties">フォントのプロパティの設定</h3> +<h3 id="Setting_font_properties">フォントのプロパティの設定</h3> -<pre class="brush: css notranslate">/* フォントの大きさを 12px に設定し、行の高さを 14px にする。 +```css +/* フォントの大きさを 12px に設定し、行の高さを 14px にする。 フォントファミリは sans-serif に設定する */ p { font: 12px/14px sans-serif } @@ -131,110 +121,107 @@ p { font: bold italic large serif } /* ウィンドウのステータスバーと同じフォントに設定する */ p { font: status-bar } -</pre> - -<h3 id="live_sample" name="live_sample">ライブサンプル</h3> - -<div class="hidden"> -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><p> - Change the radio buttons below to see the generated shorthand and it's effect. -</p> -<form action="createShortHand()"> - <div class="cf"> - <div class="setPropCont"> - font-style<br/> - <input type="radio" id="font-style-none" name="font_style" checked="" value="" onchange="setCss()"> <label for="font-style-none">none</label><br/> - <input type="radio" id="font-style-normal" name="font_style" value="normal" onchange="setCss()"> <label for="font-style-normal">normal</label><br/> - <input type="radio" id="font-style-italic" name="font_style" value="italic" onchange="setCss()"> <label for="font-style-italic">italic</label><br/> - <input type="radio" id="font-style-oblique" name="font_style" value="oblique" onchange="setCss()"> <label for="font-style-oblique">oblique</label> - </div> - - <div class="setPropCont"> - font-variant<br> - <input type="radio" id="font-variant-none" name="font_variant" checked="" value=" " onchange="setCss()"> <label for="font-variant-none">none</label><br/> - <input type="radio" id="font-variant-normal" name="font_variant" value="normal" onchange="setCss()"> <label for="font-variant-normal">normal</label><br/> - <input type="radio" id="font-variant-small-caps" name="font_variant" value="small-caps" onchange="setCss()"> <label for="font-variant-small-caps">small-caps</label> - </div> - - <div class="setPropCont"> - font-weight<br/> - <input type="radio" id="font-weight-none" name="font_weight" value="" onchange="setCss()"> <label for="font-weight-none">none</label><br/> - <input type="radio" id="font-weight-normal" checked="" name="font_weight" value="400" onchange="setCss()"> <label for="font-weight-normal">normal</label><br/> - <input type="radio" id="font-weight-bold" name="font_weight" value="700" onchange="setCss()"> <label for="font-weight-bold">bold</label> - </div> - - <div class="setPropCont"> - font-size<br/> - <input type="radio" id="font-size-12px" name="font_size" value="12px" onchange="setCss()"> <label for="font-size-12px">12px</label><br/> - <input type="radio" id="font-size-16px" name="font_size" value="16px" checked="" onchange="setCss()"> <label for="font-size-16px">16px</label><br/> - <input type="radio" id="font-size-24px" name="font_size" value="24px" onchange="setCss()"> <label for="font-size-24px">24px</label> - </div> - - <div class="setPropCont"> - line-height<br/> - <input type="radio" id="line-height-none" name="line_height" checked="" value="" onchange="setCss()"> <label for="line-height-none">none</label><br/> - <input type="radio" id="line-height-1.2" name="line_height" value="/1.2" onchange="setCss()"> <label for="line-height-1.2">1.2</label><br/> - <input type="radio" id="line-height-3" name="line_height" value="/3" onchange="setCss()"> <label for="line-height-3">3</label> - </div><br/> - - <div class="setPropCont fontfamily"> - font-family<br/> - <input type="radio" id="font-family-courier" name="font_family" checked="" value="courier" onchange="setCss(5,'courier')"> <label for="font-family-courier">courier</label><br/> <input type="radio" id="font-family-serif" name="font_family" value="serif" onchange="setCss()"> <label for="font-family-serif">serif</label><br /> - <input type="radio" id="font-family-sans-serif" name="font_family" value="sans-serif" onchange="setCss()"> <label for="font-family-sans-serif">sans-serif</label><br /> <input type="radio" id="font-family-arial" name="font_family" value="arial" onchange="setCss()"> <label for="font-family-arial">Arial</label><br /> - <input type="radio" id="font-family-monospace" name="font_family" value="monospace" onchange="setCss()"> <label for="font-family-monospace">monospace</label><br /> <input type="radio" id="font-family-cursive" name="font_family" value="cursive" onchange="setCss()"> <label for="font-family-cursive">cursive</label><br /> - <input type="radio" id="font-family-fantasy" name="font_family" value="fantasy" onchange="setCss()"> <label for="font-family-fantasy">fantasy</label><br /> <input type="radio" id="font-family-system-ui" name="font_family" value="system-ui" onchange="setCss()"> <label for="font-family-system-ui">system-ui</label><br /> - </div> - </div> - - <div class="cf propInputs"> - <div class="propInputCont tar"> +``` + +<h3 id="Live_sample">ライブ例</h3> + +```html hidden +<p> + 下のラジオボタンを変更すると、生成された一括指定とその効果が確認できます。 +</p> +<form action="createShortHand()"> + <div class="cf"> + <div class="setPropCont"> + font-style<br/> + <input type="radio" id="font-style-none" name="font_style" checked="" value="" onchange="setCss()"> <label for="font-style-none">none</label><br/> + <input type="radio" id="font-style-normal" name="font_style" value="normal" onchange="setCss()"> <label for="font-style-normal">normal</label><br/> + <input type="radio" id="font-style-italic" name="font_style" value="italic" onchange="setCss()"> <label for="font-style-italic">italic</label><br/> + <input type="radio" id="font-style-oblique" name="font_style" value="oblique" onchange="setCss()"> <label for="font-style-oblique">oblique</label> + </div> + + <div class="setPropCont"> + font-variant<br> + <input type="radio" id="font-variant-none" name="font_variant" checked="" value=" " onchange="setCss()"> <label for="font-variant-none">none</label><br/> + <input type="radio" id="font-variant-normal" name="font_variant" value="normal" onchange="setCss()"> <label for="font-variant-normal">normal</label><br/> + <input type="radio" id="font-variant-small-caps" name="font_variant" value="small-caps" onchange="setCss()"> <label for="font-variant-small-caps">small-caps</label> + </div> + + <div class="setPropCont"> + font-weight<br/> + <input type="radio" id="font-weight-none" name="font_weight" value="" onchange="setCss()"> <label for="font-weight-none">none</label><br/> + <input type="radio" id="font-weight-normal" checked="" name="font_weight" value="400" onchange="setCss()"> <label for="font-weight-normal">normal</label><br/> + <input type="radio" id="font-weight-bold" name="font_weight" value="700" onchange="setCss()"> <label for="font-weight-bold">bold</label> + </div> + + <div class="setPropCont"> + font-size<br/> + <input type="radio" id="font-size-12px" name="font_size" value="12px" onchange="setCss()"> <label for="font-size-12px">12px</label><br/> + <input type="radio" id="font-size-16px" name="font_size" value="16px" checked="" onchange="setCss()"> <label for="font-size-16px">16px</label><br/> + <input type="radio" id="font-size-24px" name="font_size" value="24px" onchange="setCss()"> <label for="font-size-24px">24px</label> + </div> + + <div class="setPropCont"> + line-height<br/> + <input type="radio" id="line-height-none" name="line_height" checked="" value="" onchange="setCss()"> <label for="line-height-none">none</label><br/> + <input type="radio" id="line-height-1.2" name="line_height" value="/1.2" onchange="setCss()"> <label for="line-height-1.2">1.2</label><br/> + <input type="radio" id="line-height-3" name="line_height" value="/3" onchange="setCss()"> <label for="line-height-3">3</label> + </div><br/> + + <div class="setPropCont fontfamily"> + font-family<br/> + <input type="radio" id="font-family-courier" name="font_family" checked="" value="courier" onchange="setCss(5,'courier')"> <label for="font-family-courier">courier</label><br/> <input type="radio" id="font-family-serif" name="font_family" value="serif" onchange="setCss()"> <label for="font-family-serif">serif</label><br /> + <input type="radio" id="font-family-sans-serif" name="font_family" value="sans-serif" onchange="setCss()"> <label for="font-family-sans-serif">sans-serif</label><br /> <input type="radio" id="font-family-arial" name="font_family" value="arial" onchange="setCss()"> <label for="font-family-arial">Arial</label><br /> + <input type="radio" id="font-family-monospace" name="font_family" value="monospace" onchange="setCss()"> <label for="font-family-monospace">monospace</label><br /> <input type="radio" id="font-family-cursive" name="font_family" value="cursive" onchange="setCss()"> <label for="font-family-cursive">cursive</label><br /> + <input type="radio" id="font-family-fantasy" name="font_family" value="fantasy" onchange="setCss()"> <label for="font-family-fantasy">fantasy</label><br /> <input type="radio" id="font-family-system-ui" name="font_family" value="system-ui" onchange="setCss()"> <label for="font-family-system-ui">system-ui</label><br /> + </div> + </div> + + <div class="cf propInputs"> + <div class="propInputCont tar"> font : - </div> - <div class="propInputCont"> - <input type="text" class="curCss" id="input_font_style"><br/> - font-style <br/> + </div> + <div class="propInputCont"> + <input type="text" class="curCss" id="input_font_style"><br/> + font-style <br/> optional - </div> - <div class="propInputCont"> - <input type="text" class="curCss" id="input_font_variant"> <br/> - font-variant <br/> + </div> + <div class="propInputCont"> + <input type="text" class="curCss" id="input_font_variant"> <br/> + font-variant <br/> optional - </div> - <div class="propInputCont"> - <input type="text" class="curCss" id="input_font_weight"> <br/> - font-weight <br/> + </div> + <div class="propInputCont"> + <input type="text" class="curCss" id="input_font_weight"> <br/> + font-weight <br/> optional - </div> - <div class="propInputCont"> - <input type="text" class="curCss mandatory" id="input_font_size"> <br/> - font-size <br/> + </div> + <div class="propInputCont"> + <input type="text" class="curCss mandatory" id="input_font_size"> <br/> + font-size <br/> mandatory - </div> - <div class="propInputCont"> - <input type="text" class="curCss" id="input_line_height"> <br/> - line-height <br/> + </div> + <div class="propInputCont"> + <input type="text" class="curCss" id="input_line_height"> <br/> + line-height <br/> optional - </div> - <div class="propInputCont"> - <input type="text" class="curCss mandatory" id="input_font_family"> <br/> - font-family <br/> + </div> + <div class="propInputCont"> + <input type="text" class="curCss mandatory" id="input_font_family"> <br/> + font-family <br/> mandatory - </div> - </div> -</form> + </div> + </div> +</form> -<div class="fontShortHand"> +<div class="fontShortHand"> This is some sample text. -</div> -<br/><br/><br/><br/><br/><br/> -</pre> - -<h4 id="CSS">CSS</h4> +</div> +<br/><br/><br/><br/><br/><br/> +``` -<pre class="brush: css notranslate">body, input { +```css hidden +body, input { font: 14px arial; overflow: hidden; } @@ -283,11 +270,11 @@ p { font: status-bar } } .fontfamily { display: inline-block; -}</pre> - -<h4 id="JavaScript">JavaScript</h4> +} +``` -<pre class="brush: js notranslate">var textAreas = document.getElementsByClassName("curCss"), +```js hidden +var textAreas = document.getElementsByClassName("curCss"), shortText = "", getCheckedValue, setCss, @@ -308,7 +295,7 @@ getProperties = function () { getCheckedValue = function(radio_name) { oRadio = document.forms[0].elements[radio_name]; - for (var i = 0; i < oRadio.length; i++) { + for (var i = 0; i < oRadio.length; i++) { if(oRadio[i].checked) { var propInput = "input_" + radio_name, curElemName = "input_" + radio_name, @@ -327,7 +314,7 @@ setCss = function () { injectCss = function(cssFragment) { old = document.body.getElementsByTagName("style"); - if (old.length > 1) { + if (old.length > 1) { old[1].parentElement.removeChild(old[1]); } css = document.createElement("style"); @@ -335,40 +322,21 @@ injectCss = function(cssFragment) { document.body.appendChild(css); } -setCss();</pre> -</div> +setCss(); +``` + +{{ EmbedLiveSample('Live_sample','100%', '440px')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 -<p>{{ EmbedLiveSample('live_sample','100%', '440px')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Fonts', '#font-prop', 'font')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td><code>font-stretch</code> の値の対応を追加</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>キーワードへのサポートが追加されました</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#font', 'font')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.font")}}</p> +- {{cssxref("font-style")}} +- {{cssxref("font-weight")}} +- [基本的なテキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals) diff --git a/files/ja/web/css/line-height/index.md b/files/ja/web/css/line-height/index.md index c47467e018..cae023207f 100644 --- a/files/ja/web/css/line-height/index.md +++ b/files/ja/web/css/line-height/index.md @@ -3,30 +3,28 @@ title: line-height slug: Web/CSS/line-height tags: - CSS - - CSS Fonts - - CSS Property - CSS フォント - CSS プロパティ - - Layout - - Reference - - Text + - レイアウト + - リファレンス + - テキスト - Vertical - height - - 'recipe:css-property' + - recipe:css-property - size +browser-compat: css.properties.line-height translation_of: Web/CSS/line-height --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>line-height</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、行ボックスの高さを設定します。これは主にテキストの行間を設定するために使用します。</span>ブロックレベル要素では、要素に含まれる行ボックスの最小の高さを指定します。非<a href="/ja/docs/Web/CSS/Replaced_element">置換</a>インライン要素では、行ボックスの高さの計算に使われる高さを指定します。</p> +**`line-height`** は [CSS](/ja/docs/Web/CSS) のプロパティで、行ボックスの高さを設定します。これは主にテキストの行間を設定するために使用します。ブロックレベル要素では、要素に含まれる行ボックスの最小の高さを指定します。非[置換](/ja/docs/Web/CSS/Replaced_element)インライン要素では、行ボックスの高さの計算に使われる高さを指定します。 -<div>{{EmbedInteractiveExample("pages/css/line-height.html")}}</div> +{{EmbedInteractiveExample("pages/css/line-height.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ line-height: normal; /* 単位のない値: この値を要素のフォントサイズに @@ -42,57 +40,84 @@ line-height: 34%; /* グローバル値 */ line-height: inherit; line-height: initial; +line-height: revert; line-height: unset; -</pre> - -<p><code>line-height</code> プロパティは以下のうちの一つで指定します。</p> - -<ul> - <li>一つの <code><a href="#<number>"><number></a></code></li> - <li>一つの <code><a href="#<length>"><length></a></code></li> - <li>一つの <code><a href="#<percentage>"><percentage></a></code></li> - <li>キーワード <code><a href="#normal">normal</a></code></li> -</ul> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code id="normal">normal</code></dt> - <dd>ユーザーエージェントに依存します。デスクトップブラウザー (Firefox を含む) は 要素の <code>font-family</code> によって決まる、おおよそ <strong><code>1.2</code></strong> という既定値を使います。</dd> - <dt><code id="<number>"><number></code> (単位なし)</dt> - <dd>使用値は、この単位のない {{cssxref("<number>")}} に要素のフォントサイズを掛けたものになります。計算値は、指定された <code><number></code> と同じです。ほとんどの場合、継承時の予期しない結果を避けるために、これが <code>line-height</code> を設定する<strong>好ましい方法です</strong>。</dd> - <dt><code id="<length>"><length></code></dt> - <dd>行ボックスの高さの計算に、指定した {{cssxref("<length>")}} が使われます。利用可能な単位については、 {{cssxref("<length>")}} をご覧ください。</dd> - <dt><code id="<percentage>"><percentage></code></dt> - <dd>要素自身のフォントサイズに対する相対値です。計算値はこの {{cssxref("<percentage>")}} に要素のフォントサイズの計算値を掛けたものです。<strong>パーセント</strong>値は予期しない結果を生む可能性があります (下記の2つの例を参照してください)。</dd> - <dt><code id="-moz-block-height">-moz-block-height</code> {{non-standard_inline}}</dt> - <dd>行の高さを現在のブロックのコンテンツの高さにします。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +``` + +`line-height` プロパティは以下のうちの一つで指定します。 + +- 一つの `<number>` +- 一つの `<length>` +- 一つの `<percentage>` +- キーワード `normal` + +### 値 + +- `normal` + - : ユーザーエージェントに依存します。デスクトップブラウザー (Firefox を含む) は 要素の `font-family` によって決まる、おおよそ **`1.2`** という既定値を使います。 +- `<number>` (単位なし) + - : 使用値は、この単位のない {{cssxref("<number>")}} に要素のフォントサイズを掛けたものになります。計算値は、指定された `<number>` と同じです。ほとんどの場合、継承時の予期しない結果を避けるために、これが `line-height` を設定する**好ましい方法です**。 +- `<length>` + - : 行ボックスの高さの計算に、指定した {{cssxref("<length>")}} が使われます。**em** の単位で値が与えられると予期しない結果をになることがあります (下記の例を参照してください)。 +- `<percentage>` + - : 要素自身のフォントサイズに対する相対値です。計算値はこの {{cssxref("<percentage>")}} に要素のフォントサイズの計算値を掛けたものです。**パーセント値**は予期しない結果を生む可能性があります (下記の第 2 の例を参照してください)。 +- `-moz-block-height` {{non-standard_inline}} + - : 行の高さを現在のブロックのコンテンツの高さにします。 + +## アクセシビリティの考慮 + +主要な段落コンテンツでは、 `line-height` の値が `1.5` 以上になるようにしてください。これは弱視の人や、認知障碍を負った人に有用です。ページがテキストの寸法が大きくなるように拡大した場合、単位なしの値を使用すれば行の高さも同じ割合で拡大します。 + +[W3C Understanding WCAG 2.1](https://www.w3.org/TR/WCAG21/#visual-presentation) + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Basic_example" name="Basic_example">基本的な例</h3> +### 基本的な例 -<pre class="brush: css notranslate">/* 以下のルールの結果はすべて、同じ line height です */ +```css +/* 以下のルールの結果はすべて、同じ line height です */ div { line-height: 1.2; font-size: 10pt; } /* 数値/単位なし */ div { line-height: 1.2em; font-size: 10pt; } /* 長さ */ div { line-height: 120%; font-size: 10pt; } /* パーセント値 */ -div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif; } /* 一括指定 */</pre> +div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif; } /* 一括指定 */ +``` + +`line-height` を設定するには、上記の {{cssxref("font")}} 一括指定プロパティがより便利なことが多いのですが、この場合は同時に `font-family` プロパティも指定しなければなりません。 + +<h3 id="Prefer_unitless_numbers_for_line-height_values">line-height の値は単位なしの数値が好ましい</h3> + +以下の例は、{{cssxref("<number>")}} を使用したほうが {{cssxref("<length>")}} よりも好ましい理由を示しています。 2 つの {{HTMLElement("div")}} 要素を使用しています。最初のものには緑色の境界があり、単位なしの `line-height` の値を使用しています。2 番目には赤色の境界があり、 `line-height` の値を `em` で定義して使用しています。 + +#### HTML -<p><code>line-height</code> を設定するには、上記の {{cssxref("font")}} 一括指定プロパティがより便利なことが多いのですが、同時に <code>font-family</code> プロパティも指定しなければなりません。</p> +```html +<div class="box green"> + <h1>予期しない結果を避けるために、単位なしの line-height を使いましょう。</h1> + length と percentage で line-height を指定すると、継承動作がうまくいきません。 ... +</div> -<h3 id="Prefer_unitless_numbers_for_line-height_values" name="Prefer_unitless_numbers_for_line-height_values">line-height の値は単位なしの数値が好ましい</h3> +<div class="box red"> + <h1>予期しない結果を避けるために、単位なしの line-height を使いましょう。</h1> + length と percentage で line-height を指定すると、継承動作がうまくいきません。 ... +</div> -<p>以下の例は、line-height の値として {{cssxref("<length>")}} より {{cssxref("<number>")}} のほうが好ましい理由を示しています。 2 つの {{HTMLElement("div")}} 要素を使用しています。最初のものは緑色の境界を持っており、単位なしの <code>line-height</code> の値を使用しています。二番目は赤色の境界を持っており、 <code>line-height</code> の値を <code>em</code> で定義して使用しています。</p> +<!-- 1 つ目の <h1> の line-height はそれ自身のフォントサイズから計算されます (30px × 1.1) = 33px --> +<!-- 2 つ目の <h1> の line-height は red div のフォントサイズから計算されます (15px × 1.1) = 16.5px おそらく、望む結果ではないでしょう --> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">.green { +```css +.green { line-height: 1.1; border: solid limegreen; } @@ -112,68 +137,20 @@ h1 { vertical-align: top; font-size: 15px; } -</pre> +``` -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><div class="box green"> - <h1>予期しない結果を避けるために、単位なしの line-height を使いましょう。</h1> - length と percentage で line-height を指定すると、継承動作がうまくいきません。 ... -</div> - -<div class="box red"> - <h1>予期しない結果を避けるために、単位なしの line-height を使いましょう。</h1> - length と percentage で line-height を指定すると、継承動作がうまくいきません。 ... -</div> +#### 結果 -<!-- 1 つ目の <h1> の line-height はそれ自身のフォントサイズから計算されます (30px × 1.1) = 33px --> -<!-- 2 つ目の <h1> の line-height は red div のフォントサイズから計算されます (15px × 1.1) = 16.5px おそらく、望む結果ではないでしょう --> -</pre> +{{EmbedLiveSample('Prefer_unitless_numbers_for_line-height_values', 600, 200)}} -<h4 id="Result" name="Result">結果</h4> +## 仕様書 -<p>{{EmbedLiveSample('Prefer_unitless_numbers_for_line-height_values', 600, 200)}}</p> +{{Specifications}} -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> +## ブラウザーの互換性 -<p>主要な段落コンテンツでは、 <code>line-height</code> の値の最小値が <code>1.5</code> になるようにしてください。これは弱視の人や、認知障碍を負った人に有用です。ページがテキストの寸法が大きくなるように拡大した場合、単位なしの値を使用すれば行の高さも同じ割合で拡大します。</p> - -<p><a href="https://www.w3.org/TR/WCAG21/#visual-presentation" rel="noopener">W3C Understanding WCAG 2.1</a></p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#line-height', 'line-height')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("css.properties.line-height")}}</p> -</div> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{Cssxref("font")}}, {{Cssxref("font-size")}}</li> -</ul> +- {{Cssxref("font")}}, {{Cssxref("font-size")}} |