この記事で学べること
- font-sizeプロパティの概念と目的
- px、em、rem、%、vwなどの単位の違い
- 相対単位と絶対単位の使い分け
- レスポンシブデザインでの文字サイズ設定
- calc()関数を使った動的サイズ設定
概要
CSSのfont-sizeプロパティは、テキストの文字サイズを設定するために使用される重要なプロパティです。文字サイズはウェブページのデザインやユーザビリティに大きな影響を与え、適切なサイズを設定することで読みやすさを向上させることができます。本記事では、font-sizeプロパティの使い方、さまざまなサイズ指定の方法、およびレスポンシブデザインに役立つ設定方法について詳しく解説します。
font-sizeプロパティの基本
font-sizeプロパティは、テキストのサイズを指定するためのCSSプロパティです。すべてのテキスト要素に適用でき、文字の大きさを調整してデザインの一貫性や可読性を高めるために使用されます。
基本構文
selector {
font-size: サイズの指定;
}例えば、次のように指定すると、p要素の文字サイズが16ピクセルになります。
p {
font-size: 16px;
}主な単位と指定方法
font-sizeプロパティでは、さまざまな単位で文字サイズを指定することができます。それぞれの単位には特徴があり、適切に使い分けることでデザインの柔軟性が向上します。
px（ピクセル）
pxは最も一般的に使用される単位で、絶対的なサイズを指定します。pxを使用すると、ブラウザやデバイスに依存せずに正確なサイズで表示されます。
h1 {
font-size: 24px; /* 固定のサイズ */
}em（相対サイズ）
emは、親要素の文字サイズに対する相対値で指定する単位です。例えば、親要素のフォントサイズが16pxの場合、1.5emは24pxになります。
h2 {
font-size: 1.5em; /* 親要素の1.5倍のサイズ */
}rem（ルート相対サイズ）
remは、ドキュメントのルート要素（通常はhtml要素）のフォントサイズを基準にした相対単位です。remはページ全体で一貫した文字サイズの設定を可能にし、メンテナンスがしやすいという利点があります。
body {
font-size: 16px; /* ルートのフォントサイズを16pxに */
}
h3 {
font-size: 2rem; /* ルートサイズの2倍、つまり32px */
}%（パーセンテージ）
パーセンテージは、親要素のフォントサイズに対する割合で指定します。100%は親のサイズと同じになります。
p {
font-size: 120%; /* 親要素の120%のサイズ */
}vw（ビューポート幅）
vwはビューポートの幅に対する割合を示します。レスポンシブデザインに適しており、画面サイズに応じて自動的に文字サイズが調整されます。
header {
font-size: 5vw; /* ビューポートの幅の5% */
}レスポンシブな文字サイズの設定
レスポンシブデザインでは、文字サイズが異なるデバイスや画面サイズで適切に調整されることが重要です。remやvwを使用することで、レスポンシブな文字サイズを実現できます。
メディアクエリでの調整
メディアクエリを使用して、画面サイズに応じた文字サイズの調整も可能です。例えば、大きな画面では文字を大きく、小さな画面では文字を小さく設定できます。
body {
font-size: 16px; /* 基本サイズ */
}
@media (min-width: 768px) {
body {
font-size: 18px; /* タブレット以上のサイズでは18px */
}
}
@media (min-width: 1200px) {
body {
font-size: 20px; /* デスクトップサイズでは20px */
}
}calc()関数での動的サイズ設定
calc()関数を使うことで、複数の単位を組み合わせて柔軟な文字サイズを指定できます。例えば、固定のサイズとビューポートに基づくサイズを組み合わせることが可能です。
h4 {
font-size: calc(1rem + 2vw); /* 基本サイズに画面幅に応じたサイズを追加 */
}まとめ
CSSのfont-sizeプロパティは、文字サイズを指定するための基本的なプロパティです。さまざまな単位を使用することで、デザインに柔軟性を持たせ、ユーザーにとって読みやすいテキストを提供することが可能です。特にレスポンシブデザインでは、相対単位やビューポート単位を活用することで、デバイスに最適化された文字サイズを簡単に実現できます。適切なフォントサイズを設定し、ウェブサイトのユーザビリティとデザイン性を高めましょう。
ポイントの振り返り
| 単位 | 説明 | 使用例 |
|---|---|---|
px | 絶対サイズ | 固定デザイン |
em | 親要素基準の相対サイズ | ネスト対応 |
rem | ルート基準の相対サイズ | 一貫性重視 |
% | 親要素の割合 | 柔軟な調整 |
vw | ビューポート幅基準 | レスポンシブ |
関連プロパティ
| プロパティ | 説明 |
|---|---|
line-height | 行の高さ |
letter-spacing | 文字間隔 |
font-weight | 太さ |
