From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/font-size/index.html | 228 ++++++++++++++++++++++++++++++++++ 1 file changed, 228 insertions(+) create mode 100644 files/ja/web/css/font-size/index.html (limited to 'files/ja/web/css/font-size/index.html') diff --git a/files/ja/web/css/font-size/index.html b/files/ja/web/css/font-size/index.html new file mode 100644 index 0000000000..cd4d37ec67 --- /dev/null +++ b/files/ja/web/css/font-size/index.html @@ -0,0 +1,228 @@ +--- +title: font-size +slug: Web/CSS/font-size +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/font-size +--- +
{{CSSRef}}
+ +

CSS の font-size プロパティはフォントの大きさを定義します。フォントの大きさを変更すると、フォントの大きさに相対的な {{cssxref("<length>")}} の単位例えば em, ex, なども更新されます。

+ +
{{EmbedInteractiveExample("pages/css/font-size.html")}}
+ + + +

構文

+ +
/* <absolute-size> 値 */
+font-size: xx-small;
+font-size: x-small;
+font-size: small;
+font-size: medium;
+font-size: large;
+font-size: x-large;
+font-size: xx-large;
+font-size: xxx-large;
+
+/* <relative-size> 値 */
+font-size: smaller;
+font-size: larger;
+
+/* <length> 値 */
+font-size: 12px;
+font-size: 0.8em;
+
+/* <percentage> 値 */
+font-size: 80%;
+
+/* グローバル値 */
+font-size: inherit;
+font-size: initial;
+font-size: unset;
+
+ +

font-size プロパティは、以下の何れかの方法で指定します。

+ + + +

値

+ +
+
xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large
+
ユーザーの既定のフォントサイズ (つまり medium) を基準とした絶対的なサイズのキーワードです。
+
larger, smaller
+
相対的なサイズのキーワードです。フォントは親要素のフォントサイズから相対的に、上記の絶対的サイズのキーワードで使われている倍率におよそ沿う形で拡大または縮小されます。
+
{{cssxref("<length>")}}
+
+

正の {{cssxref("<length>")}} の値。 (em や ex などの) フォント相対単位のほとんどは、親要素のフォントサイズに対する相対値です。

+ +

(rem などの) ルートを基準としたフォント相対単位では、フォントサイズは {{HTMLElement("html")}} (ルート) 要素で使われているフォントのサイズからの相対値です。

+
+
{{cssxref("<percentage>")}}
+
+

正の {{cssxref("<percentage>")}} 値で、親要素のフォントサイズからの相対値です。

+
+
+ +
+

注: アクセシビリティを最大化するために、一般的に最適なのは、ユーザーの既定のフォントサイズからの相対値を使用することです。

+
+ +

解説

+ +

フォントサイズの定義にはいくつかの方法があり、キーワードと数値 (ピクセルや em の場合) が使われます。個々のウェブページで必要とされるものにあわせて、最適な方法を選んでください。

+ +

キーワード

+ +

キーワードはウェブのフォントサイズを決める良い方法です。 {{HTMLElement("body")}} 要素のフォントサイズをキーワードで定義すると、ページのどこであってもフォントサイズを相対的に調整することができ、したがってページ全体のフォントサイズの拡大縮小が容易にできます。

+ +

ピクセル

+ +

ピクセル値 (px) でフォントサイズを設定することは、ピクセル制度が必要な場合に適しています。ピクセル値は静的です。これは OS にもブラウザーにも依存しない方法であり、ブラウザーに文字を指定した高さのピクセルの数値で描画することを厳密に指示します。ブラウザーによって、同じ効果を得るのに異なるアルゴリズムが使われている可能性があるため、結果は多少異なるかもしれません。

+ +

フォントサイズの指定を組み合わせることもできます。例えば親要素のフォントサイズを 16px 、子要素を larger とした場合、子要素のフォントサイズは親要素の 16px より大きくレンダリングされます。

+ +
注: フォントサイズを px で定義すると、ブラウザーによってはユーザーがフォントサイズを変更することができないため、アクセシブルではありません。例えば、弱視の人は、ウェブデザイナーが選んだサイズより大きなフォントにしたがるかもしれません。こうした配慮のあるデザインをしたい場合は、フォントサイズにピクセルを使わないようにしてください。
+ +

em

+ +

フォントサイズを設定するもうひとつの方法は em 値を使うものです。 em 値の大きさは動的です。font-size プロパティを定義すると、 em はその em が用いられている要素のフォントサイズと一致します。ページ内でまだフォントサイズをセットしていなければ、ブラウザーの既定値、たいてい 16px が使われます。したがって、既定では 1em = 16px であり、2em = 32px です。もし body 要素で font-size を 20px にセットすれば、1em = 20px で 2em = 40px です。本質的には、値の 2 が現在の em の大きさの乗数であることに注意してください。

+ +

必要なピクセル値に相当する em は、次の式で計算することができます。

+ +
em = 要素に設定したい pixel 値 / 親要素のピクセル単位でのフォントサイズ
+ +

例えば、 body のフォントサイズが 1em にセットされているものとすると、ブラウザー標準の 1em = 16px です。使いたいフォントサイズが 12px なら、 0.75em を指定します (12/16 = 0.75 だからです)。同様に、使いたいフォントサイズが 10px なら、 0.625em を指定します (10/16 = 0.625)。22px なら 1.375em です (22/16)。

+ +

em は読者が選んだフォントに自動的に再調整されるため、CSS ではとても便利な単位です。

+ +

em と ex の単位が {{cssxref("font-size")}} プロパティで用いられると、親要素のフォントサイズからの相対になります (要素のフォントサイズからの相対値を使用する他のプロパティとは異なります)。すなわち、 em の単位やパーセント値は {{cssxref("font-size")}} の場合と同様です。

+ +

em 値が複合的であるということは、覚えておくべき重要な事実です。以下の HTML と CSS をご覧ください。

+ +
html {
+  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
+}
+span {
+  font-size: 1.6em;
+}
+ +
<div>
+<span>Outer <span>inner</span> outer</span>
+</div>
+
+ +

結果は以下のようになります。

+ +

{{EmbedLiveSample("Ems", 400, 40)}}

+ +

ブラウザーの既定の font-size が 16px と仮定すると、単語 “outer” は 16px で描画され、単語 “inner” は 25.6px で描画されます。これは、内側の {{HTMLElement("span")}} 要素の font-size は 1.6em ですが、これは親要素の font-size からの相対値で、さらにその親要素の font-size からの相対値になるからです。これはよく複合 (compounding) と呼ばれます。

+ +

rem

+ +

rem 値は、複合の問題を避けるために考案されました。 rem 値は親要素ではなく、ルート html 要素に対して相対的です。言い換えると、親要素のサイズの影響を受けることなく相対的な方法でフォントサイズを指定できますので、複合が発生しません。

+ +

以下の CSS は、先ほどの例とほぼ同じです。唯一の違いは、単位を rem に変更したことです。

+ +
html {
+  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
+}
+span {
+  font-size: 1.6rem;
+}
+
+ +

この CSS を同じ HTML に適用すると、以下のようになります:

+ +
<span>Outer <span>inner</span> outer</span>
+ +

{{EmbedLiveSample("Rems", 400, 40)}}

+ +

この例では、単語 “outer inner outer” はすべて 16px で表示されます (ブラウザーの font-size は既定値が 10px のままであるとします)。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

フォントサイズの設定

+ +

CSS

+ +
.small {
+  font-size: xx-small;
+}
+.larger {
+  font-size: larger;
+}
+.point {
+  font-size: 24pt;
+}
+.percent {
+  font-size: 200%;
+}
+
+ +

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

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-size-prop', 'font-size')}}{{Spec2('CSS4 Fonts')}}xxx-large キーワードを追加
{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}{{Spec2('CSS3 Fonts')}}変更なし
{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#font-size', 'font-size')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.font-size")}}

-- cgit v1.2.3-54-g00ecf