font-size

フォントサイズ（テキストとフォント）

意味テキストのサイズ

font-sizeとは？

font-sizeプロパティは、テキストのサイズを指定するためにCSSで使用します。このプロパティを使って、テキストが表示されるときのフォントの大きさを設定できます。単位にはpx（ピクセル）、em、rem、%（パーセント）などがあり、状況に応じて適切な単位を選ぶことが大切です。

font-sizeの具体的な使い方

ピクセル単位でフォントサイズを指定する例

<style>
    p {
        font-size: 16px;
    }
</style>

<p>このテキストは16ピクセルのフォントサイズです。</p>

ページ内の全てのp（段落）要素のフォントサイズを16ピクセルに設定しています。

remユニットを使用してフォントサイズを指定する例

<style>
    html {
        font-size: 16px;
    }
    
    body {
        font-size: 1rem;
    }
    
    h1 {
        font-size: 2rem;
    }
</style>

ルート要素(html)のフォントサイズを設定し、他の要素でremユニットを使用してフォントサイズを相対的に指定しています。これにより、レスポンシブデザインが容易になります。

font-sizeに関するよくある質問

Q. px, em, remの違いは？

A. pxは固定サイズ、emは親要素のフォントサイズに対する相対サイズ、remはルート要素のフォントサイズに対する相対サイズです。remはレスポンシブデザインに適しており、ユーザーのブラウザ設定を尊重します。

Q. フォントサイズの単位を省略できる？

A. 0以外の値には単位が必要です。例えば、'font-size: 16;'は無効で、'font-size: 16px;'と指定する必要があります。ただし、0の場合は単位を省略できます（例：'font-size: 0;'）。

Q. ブラウザのデフォルトサイズは？

A. 多くのブラウザでは、デフォルトのフォントサイズは16pxです。ただし、ユーザーが設定を変更している可能性があるため、常にこの値に依存するべきではありません。

font-sizeが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのfont-sizeやtext-decoration-style、line-height、text-transform、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。