CSSフォントサイズ
フォントサイズ
font-sizeプロパティは、テキストのサイズを設定します。
テキストサイズを管理できることは、Webデザインにおいて重要です。ただし、段落を見出しのように見せたり、見出しを段落のように見せたりするために、フォントサイズの調整を使用しないでください。
見出しには<h1>-<h6>、段落には<p>など、常に適切なHTMLタグを使用してください。
font-size値は、絶対サイズまたは相対サイズにすることができます。
絶対サイズ：
- テキストを指定されたサイズに設定します
- ユーザーがすべてのブラウザでテキストサイズを変更することを許可しません（アクセシビリティ上の理由で悪い）
- 絶対サイズは、出力の物理的なサイズがわかっている場合に役立ちます
相対サイズ：
- 周囲の要素を基準にしてサイズを設定します
- ユーザーがブラウザのテキストサイズを変更できるようにします
注：フォントサイズを指定しない場合、段落などの通常のテキストのデフォルトサイズは16px（16px = 1em）です。
ピクセルでフォントサイズを設定する
テキストサイズをピクセルで設定すると、テキストサイズを完全に制御できます。
例
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
ヒント：ピクセルを使用している場合でも、ズームツールを使用してページ全体のサイズを変更できます。
Emでフォントサイズを設定する
ユーザーが（ブラウザメニューで）テキストのサイズを変更できるようにするために、多くの開発者はピクセルの代わりにemを使用します。
1emは現在のフォントサイズと同じです。ブラウザのデフォルトのテキストサイズは16pxです。したがって、1emのデフォルトサイズは16pxです。
サイズは、次の式を使用してピクセルからemまで計算できます。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 */
}
上記の例では、emのテキストサイズは前のピクセルの例と同じです。ただし、emサイズを使用すると、すべてのブラウザでテキストサイズを調整できます。
残念ながら、古いバージョンのInternetExplorerにはまだ問題があります。テキストは、大きくすると本来より大きくなり、小さくすると小さくなります。
パーセントとEmの組み合わせを使用する
すべてのブラウザで機能する解決策は、<body>要素のデフォルトのフォントサイズをパーセントで設定することです。
例
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
私たちのコードは今うまく機能しています！すべてのブラウザで同じテキストサイズが表示され、すべてのブラウザでテキストをズームまたはサイズ変更できます。
レスポンシブフォントサイズ
vwテキストサイズは、「ビューポート幅」を意味する単位で設定できます。
そうすれば、テキストサイズはブラウザウィンドウのサイズに従います。
こんにちは世界
ブラウザウィンドウのサイズを変更して、フォントサイズがどのように拡大縮小されるかを確認します。
例
<h1 style="font-size:10vw">Hello World</h1>
ビューポートはブラウザのウィンドウサイズです。1vw =ビューポート幅の1％。ビューポートの幅が50cmの場合、1vwは0.5cmです。