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