CSS フォントサイズ

フォントサイズ

font-size 属性でテキストのサイズを設定

ウェブデザインでは、テキストサイズを管理することが重要ですが、パラグラフをタイトルのように見せたり、タイトルをパラグラフのように見せるためにフォントサイズを調整すべきではありません。

常に正しいHTMLタグを使用してください、例えば<h1> - <h6>を使用してタイトル、<p>を使用して段落のみ

font-sizeの値は絶対または相対サイズでできます。

絶対サイズ：

  • テキストを指定されたサイズに設定
  • ユーザーがすべてのブラウザでテキストサイズを変更できないようにする（アクセス性が悪い）
  • 出力の物理サイズが既知の場合、絶対サイズは非常に便利です

相対サイズ：

  • 周囲の要素に対するサイズを設定
  • ユーザーがブラウザでテキストサイズを変更できるようにする

注釈：フォントサイズを指定していない場合、通常のテキスト（例えば段落）のデフォルトサイズは16pxです（16px = 1em）。

ピクセルでフォントサイズを設定

テキストサイズを完全に制御するためにピクセルでテキストサイズを設定できます：

例

h1 {
  font-size: 40px;
}
h2 {
  font-size: 30px;
}
p {
  font-size: 14px;
}

自分で試してみる

ヒント：ピクセルを使用していない場合でも、全体のページサイズを調整するために拡大縮小ツールを使用できます。

エムでフォントサイズを設定

ユーザーがテキストサイズを調整できるように（ブラウザメニュー内で）、多くの開発者がピクセルではなくエムを使用しています。

W3Cはエムサイズ単位の使用を推奨しています。

1emは現在のフォントサイズに等しいです。ブラウザのデフォルトのテキストサイズは16pxです。したがって、デフォルトのサイズ1emは16pxです。

ピクセルからエムにサイズを計算するためにこの公式を使用できます：pixels/16=em。

例

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}
p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

自分で試してみる

前の例では、エム単位のテキストサイズは前の例のピクセルサイズと同じです。しかし、エムサイズを使用すると、すべてのブラウザでテキストサイズを調整できます。

不幸なことに、旧バージョンのInternet Explorerにはまだ問題があります。テキストを拡大すると、期待以上に大きくなり、縮小すると小さくなります。

使用百分比和エムの組み合わせ

例

body {
  font-size: 100%;
}
h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 1.875em;
}
p {
  font-size: 0.875em;
}

自分で試してみる

現在のコードは正常に動作しています！すべてのブラウザで同じテキストサイズが表示され、すべてのブラウザでテキストサイズをスケールまたは調整することができます！

レスポンシブフォントサイズ

使用できます vw ユニット設定テキストサイズ、これは「ビューポート幅」（"viewport width"）を意味します。

このように、テキストサイズはブラウザウィンドウのサイズに従います。ブラウザウィンドウのサイズを調整して、フォントサイズがどのようにスケールするかを確認してください：

例

<h1 style="font-size:10vw">Hello World</h1>

自分で試してみる

ビューポート（Viewport）はブラウザウィンドウのサイズです。1vwはビューポートの幅の1％。ビューポートが50センチメートル幅の場合、1vwは0.5センチメートルです。