この記事では、Web制作する上で必ずと言って良いほど頻出するCSSプロパティのfont-sizeについて解説します。
font-sizeプロパティは、テキストの大きさを指定するプロパティです。
Webサイトには必ずと言って良いほどタイトルや文章などのテキストが存在します。
そのため、読みやすい文字サイズでWebサイトを制作することは非常に重要になります。
この記事でしっかりfont-sizeプロパティを使えるようになりましょう。
font-sizeプロパティの基本
font-sizeプロパティは、テキストのサイズを指定するためのCSSプロパティです。
このプロパティを使うことで、見出しや段落、リンクなど、様々なテキスト要素の文字サイズを自由に調整することができます。
まずは下記のhtmlをみてみましょう。
CSSはhtmlのheadタグの中の<style>タグ内で記述しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文字サイズの変更</title>
<style>
.small-text {
font-size: 12px;
}
.large-text {
font-size: 24px;
}
</style>
</head>
<body>
<p class="small-text">これは小さな文字です。</p>
<p class="large-text">これは大きな文字です。</p>
</body>
</html>上記のコードでは、small-textクラスには12px、large-textクラスには24pxの文字サイズが適用されています。
font-sizeの指定方法
font-sizeプロパティには、様々な方法で値を指定できます。
それぞれの指定方法について詳しく見ていきましょう。
固定値（px, pt, cm, mm, in）
px（ピクセル）
ピクセルは、最も一般的な単位の一つです。1pxは、画面上の1ピクセルに相当します。
ピクセル単位は、デバイスの解像度に依存せず、非常に正確に文字サイズを指定できます。
p {
font-size: 16px;
}この例では、<p>要素の文字サイズを16pxに指定しています。
pt（ポイント）
ポイントは、印刷物でよく使われる単位で、1ptは約1/72インチです。
デザインの一貫性を保つために使われることがありますが、ウェブデザインではあまり一般的ではありません。
h1 {
font-size: 18pt;
}cm, mm, in
これらは、センチメートル、ミリメートル、インチの単位です。ウェブデザインではほとんど使われませんが、印刷用のスタイルシートで利用されることがあります。
div {
font-size: 1cm;
}相対値（em, rem, %）
相対値は、文字サイズをより柔軟に指定する方法です。
em
emは、親要素のfont-sizeを基準にした相対単位です。
1emは、親要素の文字サイズに等しいことを意味します。
body {
font-size: 16px;
}
p {
font-size: 1.5em; /* 24px */
}この場合、<p>要素の文字サイズは、<body>の16pxに対して1.5倍の24pxになります。
rem
remは、ルート（根）要素（通常は<html>）のfont-sizeを基準にした相対単位です。
ページ全体で一貫した文字サイズを保つのに役立ちます。
html {
font-size: 16px;
}
p {
font-size: 2rem; /* 32px */
}この場合、<p>要素の文字サイズは32pxになります。
%
パーセンテージも相対的な単位で、親要素の文字サイズを基準にします。例えば、「font-size: 100%; 」は、親要素と同じ文字サイズを意味します。
body {
font-size: 16px;
}
div {
font-size: 150%; /* 24px */
}この例では、<div>要素の文字サイズが24pxになります。
キーワード値（small, medium, large など）
キーワード値は、ブラウザが定義した標準の文字サイズを使用する方法です。xx-smallからxx-largeまでの範囲があり、簡単にサイズを指定できます。
h1 {
font-size: large;
}
p {
font-size: small;
}これらの値は、ブラウザのデフォルト設定に依存するため、正確なサイズを知るにはブラウザごとの仕様を確認する必要があります。
絶対値と相対値の違い
- 絶対値（px, pt, cmなど）: デバイスの解像度やスクリーンサイズに依存せず、常に固定のサイズを示します。
- 相対値（em, rem, %など）: 親要素やルート要素のサイズに依存し、より柔軟なレイアウトが可能です。
まとめ
この記事では、font-sizeプロパティの指定方法について解説しました。
font-sizeプロパティを理解することで、テキストの見た目を自在にコントロールできます。
固定値や相対値、キーワード値を使い分け、最適なサイズを指定しましょう。
パソコンやスマホなどの各デバイスでの最適なサイズの指定も大切ですが、そのWebサイトのターゲットによって最適なサイズを指定することも大切です。
ぜひ、font-sizeプロパティを習得して思い通りのWebサイトを制作できるようになりましょう。
コメント