【CSS Modules】font-sizeプロパティの使い方

font-sizeプロパティは、要素内のテキストの文字サイズを保持するプロパティです。ウェブページやアプリケーションにおける文字の大きさを指定するために使用され、ユーザーインターフェースの可読性やデザインの一貫性を保つ上で非常に重要な役割を果たします。

このプロパティには、様々な値の形式を指定できます。例えば、px（ピクセル）のような絶対的な長さの単位を用いて「この文字は正確にこの大きさ」と指定したり、em（親要素に対する相対的なサイズ）やrem（ルート要素に対する相対的なサイズ）、%（親要素に対するパーセンテージ）といった相対的な単位を用いて「親要素の何倍の大きさ」というように指定することができます。これにより、環境に応じて柔軟にサイズが調整されるレスポンシブなデザインに対応しやすくなります。また、smaller、larger、xx-small、x-small、small、medium、large、x-large、xx-largeといったキーワード値を指定することも可能です。これらは、ブラウザのデフォルト設定や親要素の文字サイズを基準にした相対的または絶対的なサイズを表します。

font-sizeプロパティは継承されるプロパティです。これは、親要素にfont-sizeが設定されると、特に指定がない限りその子要素にも同じ文字サイズが適用されることを意味します。この特性により、スタイルシートで一度設定した文字サイズがその子孫要素全体に伝播し、ページ全体の文字サイズを効率的に管理できる利点があります。このプロパティの初期値はブラウザによって異なりますが、一般的には16pxまたは1emが標準とされています。適切なfont-sizeの設定は、コンテンツの視認性を高め、あらゆるデバイスで快適な閲覧体験を提供するために不可欠です。

Copy
1p {
2  font-size: 16px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません