CSS フォントサイズ
フォントサイズ
font-sizeプロパティは、テキストのサイズを設定します。
テキストサイズを管理できることは、Webデザインにおいて重要です。ただし、フォントサイズの調整を使用して、段落を見出しのように見せたり、見出しを段落のように見せたりしないでください。
見出しには<h1>～<h6>、段落には<p>など、常に適切なHTMLタグを使用してください。
font-size値には、絶対サイズ(Absolute size)または相対サイズ(Relative size)を指定できます。
絶対サイズ(Absolute size):
- テキストを指定されたサイズに設定します。
- ユーザーがすべてのブラウザーでテキストサイズを変更できるわけではありません(アクセシビリティ上の理由から悪い)。
- 絶対サイズは、出力の物理サイズがわかっている場合に役立ちます。
相対サイズ(Relative size):
- 周囲の要素に相対的なサイズを設定します。
- ユーザーがブラウザでテキストサイズを変更できるようにします。
注：フォントサイズを指定しない場合、段落などの通常のテキストのデフォルトサイズは16px (16px=1em)です。
ピクセルでフォントサイズを設定する
テキストサイズをピクセルで設定すると、テキストサイズを完全に制御できます。
ヒント：ピクセルを使用する場合でも、ズームツールを使用してページ全体のサイズを変更できます。
Emでフォントサイズを設定する
ユーザーが(ブラウザーメニューで)テキストのサイズを変更できるようにするために、多くの開発者はピクセルではなくemを使用します。
1emは現在のフォントサイズと同じです。ブラウザのデフォルトのテキストサイズは16pxです。したがって、1emのデフォルトサイズは16pxです。
サイズは、*px*/16=*em*を使用してピクセルからemまで計算できます。
例
上記の例では、em単位のテキストサイズは、ピクセル単位の前の例と同じです。ただし、emサイズを使用すると、すべてのブラウザでテキスト サイズを調整できます。
残念ながら、古いバージョンのInternet Explorerにはまだ問題があります。大きくすると文字が大きくなり、小さくすると小さくなります。
PercentとEmの組み合わせを使用する
すべてのブラウザーで機能する解決策は、 <body>要素の既定のフォントサイズをパーセントで設定することです。
例
コードがうまく機能するようになりました。すべてのブラウザで同じテキストサイズを表示し、すべてのブラウザでテキストをズームまたはサイズ変更できます。
レスポンシブフォントサイズ
文字サイズはvw単位、つまり「ビューポートの幅」。
そうすれば、テキストのサイズはブラウザウィンドウのサイズに従います。
Hello World
ブラウザーウィンドウのサイズを変更して、フォントサイズがどのようにスケーリングされるかを確認します。
ビューポートはブラウザウィンドウのサイズです。 1vw = ビューポート幅の1%。ビューポートの幅が50cmの場合、1vwは0.5cmです。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。