CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのfont-sizeプロパティとは？フォントサイズの指定方法を実例付きで解説

CSSのfont-sizeプロパティは、テキストのフォントサイズ（文字の大きさ）を設定するために使用されるプロパティです。値はパーセンテージ（%）や、px（ピクセル）、cm、pt（ポイント）、emなどの単位、さらには絶対的なキーワードによって指定できます。特に相対的な値を使用することで、ユーザーがブラウザの設定を変更しても文字サイズが追従し、アクセシビリティを最大限に高めることができます。

なお、フォントサイズのデフォルト値は16px（または12pt）です。

構文

CSSのfont-sizeプロパティの基本構文は以下の通りです。

セレクタ {
    font-size: /*値*/
}

font-sizeで指定できる主な値

  • 絶対単位：px、pt、cm、mm など（表示環境に依存しない固定サイズ）
  • 相対単位：em、rem、%（親要素やルート要素を基準としたサイズ）
  • キーワード：xx-small〜xx-large、larger、smaller、initial、inherit など

それでは、実際のコード例を見ていきましょう。

例1：emによる相対指定

次の例では、div要素に対してfont-size: 1.4em;を指定しています。入れ子になったdiv要素では、親要素のフォントサイズが基準となるため、階層が深くなるほど文字が大きくなります。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: auto;
    padding: 10px;
    text-align: center;
    width: 50%;
    border: 2px solid;
    border-radius: 15%;
    font-size: 1.4em;
}
</style>
</head>
<body>
<div>
one
<div>two
<div>three</div>
</div>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

CSSのfont-sizeプロパティとは？フォントサイズの指定方法を実例付きで解説

例2：キーワード・初期値・パーセント指定の組み合わせ

次の例では、smaller（一段階小さく）、initial（初期値に戻す）、200%（親要素の2倍）という3つの異なる指定方法を組み合わせています。

<!DOCTYPE html>
<html>
<head>
<style>
p {
    font-size: smaller;
}
#demo {
    font-size: initial;
}
p:last-of-type {
    font-size: 200%;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text 1.</p>
<p id="demo">This is demo text 2.</p>
<p>This is demo text 3.</p>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

CSSのfont-sizeプロパティとは？フォントサイズの指定方法を実例付きで解説

まとめ

font-sizeプロパティを使えば、絶対単位・相対単位・キーワードのいずれかで柔軟に文字サイズを制御できます。レスポンシブデザインやアクセシビリティを重視する場合は、emやrem、%といった相対的な指定方法を採用するのがおすすめです。

  1. CSSのfont-variantプロパティとは？使い方と実例をわかりやすく解説

    CSSのfont-variantプロパティは、テキストの字形（グリフ）のバリエーションを指定するためのショートハンド（一括指定）プロパティです。このプロパティを使うことで、以下の個別プロパティの値をまとめて設定できます。font-variant-caps（大文字・小文字の字形）font-variant-numeric（数字の字形）font-variant-alternates（代替字形）font-variant-ligatures（合字）font-variant-east-asian（東アジア言語向けの字形）構文font-variantプロパティの基本的な書き方は次のとおりです。Selecto

  2. CSSのfont-sizeプロパティをキーワードで設定する方法

    CSSのfont-sizeプロパティは、絶対キーワードと相対キーワードを使って設定できます。キーワードを指定することで、テキストのサイズを意図した通りに柔軟に拡大・縮小できます。 構文 CSS font-sizeプロパティの基本構文は以下のとおりです。 セレクター {     font-size: /*値*/ } CSSで使用できる標準キーワードの一覧は、次の表をご参照ください。 番号値と説明 1mediumフォントサイズを中程度（標準）に設定します。デフォルト値です 2xx-smallフォントサイズを極小に設定します 3x-smallフォントサイズ