（最終更新日：2023年6月）
✔以下の疑問をお持ちの方へ向けた記事です
「HTMLでフォントサイズをどのように変更するのだろうか？」
「HTMLのフォントサイズ変更の書き方を学びたい」
「HTMLのフォントサイズ変更の具体的な使用例を見て理解したい」
✔この記事を読むことで得られる知識
- HTMLでのフォントサイズ変更の基本的な書き方
- フォントサイズ変更の応用法
- HTMLでのフォントサイズ変更を用いた具体的な使用例
この記事では、HTMLでのフォントサイズ変更の基本的な使い方から、その応用法まで、具体的な例を交えて詳細に説明します。
また、様々な単位でのサイズ指定や相対的なサイズ調整の方法など、より実践的な内容も含めて紹介します。
ぜひ最後までお読みください。
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
HTMLによるフォントサイズの変更方法
こちらでは、HTMLを使用したフォントサイズの変更方法を詳しくご紹介します。
必ず理解しておきましょう。
- HTMLのfontsize属性の活用
- フォントサイズ指定の手法
- フォントサイズ指定時の注意点
HTMLのfontsize属性の活用
HTMLでは、特定のテキストのフォントサイズを調整するためにfontsize属性を使用します。
具体的には、この属性は<font>タグ内で使用。
例えば、テキスト「こんにちは」のフォントサイズを3に設定したい場合、以下のように記述します。
<font size="3">こんにちは</font>このように記述することで、「こんにちは」というテキストのフォントサイズが3に設定されます。
フォントサイズ指定の手法
HTMLでフォントサイズを指定する方法はいくつか存在します。
前述したfontsize属性だけでなく、テキストのフォントサイズを相対的に大きくしたり小さくしたりすることが可能です。
- <big>タグ
- <smal>タグ
<big>大きなテキスト</big>
<small>小さなテキスト</small>これにより、「大きなテキスト」は一般的なテキストよりも大きく、「小さなテキスト」は一般的なテキストよりも小さく表示されます。
もしくはCSSを使用することで、さらに具体的なサイズ指定や細かな調整が可能となります。
フォントサイズ指定時の注意点
フォントサイズの指定に際してはいくつかの注意点があります。
1.使用しているブラウザやデバイスによって、見た目が微妙に異なる。
理由としては、各ブラウザやデバイスがフォントの描画方法を独自に定義しているから。
2.fontsize属性はHTML5では非推奨となっていて、現在ではCSSを使用したフォントサイズの指定が推奨されている。
これにより、Webページのデザインと内容が分離され、保守性と再利用性が向上するでしょう。
さらに、CSSを使用すれば、一度に複数の要素のフォントサイズを制御でき、デザインの一貫性も確保できます。
タグを使ったフォントサイズの調整
次に、HTMLの特定のタグを用いてフォントサイズを調整する方法について見ていきましょう。
以下のトピックで詳しく説明します。
- fontタグによるサイズ変更
- bigタグとsmallタグの利用
- CSSのfont-sizeプロパティを用いる方法
fontタグによるサイズ変更
fontタグを使うと、そのタグ内テキストのフォントサイズを指定することが可能です。
たとえば、「ようこそ」のテキストをフォントサイズ4で表示するには、次のように記述します。
<font size="4">ようこそ</font>しかし、HTML5ではfontタグは非推奨となっているため、現代のWeb開発ではあまり使用されません。
代わりにCSSのfont-sizeプロパティが一般的に利用されます。
.textsize4{
font-size:18px;
}bigタグとsmallタグの利用
bigタグとsmallタグを利用すると、テキストの相対的な大きさを簡単に調整可能。
bigタグはテキストを一段階大きくし、smallタグはテキストを一段階小さくします。
<p>これは<big>大きい</big>テキストと<small>小さい</small>テキストです。</p>このコードでは、「大きい」は通常のテキストよりも大きく、「小さい」は通常のテキストよりも小さく表示されます。
これらのタグもHTML5では非推奨となっていますが、現在でも一部の旧ブラウザでサポートされています。
CSSの場合は以下のようにします。
.bigtext{
font-size:20px;
}
.smalltext{
font-size:12px;
}<p>これは<span class="bigtext">大きい</span>テキストと<span class="smalltext">小さい</span>テキストです。</p>CSSのfont-sizeプロパティを用いる方法
HTMLのタグを使った方法と比べて、CSSのfont-sizeプロパティを用いる方法は、より柔軟性と精度を持ってフォントサイズを調整できます。
font-sizeプロパティでは、以下のような方法でテキストのサイズを指定可能です。
- ピクセル（具体的な数値）
- ％
- em
- rem
例えば以下のようにCSSを使用してサイズを指定します。
p {
font-size: 16px;
}この例では、すべての<p>タグ（段落）のテキストが16ピクセルに設定されます。
このようにCSSを利用すると、全体的なデザインの統一性を保ちつつ、特定のエリアや要素に対するフォントサイズの細かな調整が可能になります。
デフォルトのフォントサイズとは？
デフォルトのフォントサイズは16pxです。
デフォルトのフォントサイズとは、特にサイズ指定がなされていない時にブラウザが自動的に適用するテキストのサイズのこと。
しかし、これはブラウザやユーザーの設定により変更することが可能です。
Chrome（デスクトップ版）
- ブラウザの設定メニューを開きます（右上のメニューアイコンをクリック）
- 「設定」を選択します
- 「外観」セクションで、「フォントサイズ」を変更します
Firefox（デスクトップ版）
- ブラウザの設定メニューを開きます（右上のメニューアイコンをクリック）
- 「オプション」を選択します
- 「一般」タブで、「フォントと色」セクションを見つけ、フォントサイズを変更します
Windows 10（オペレーティングシステム）
- 「スタート」メニューを開きます
- 「設定」を選択します
- 「簡単操作」を選択します
- 「ディスプレイ」セクションで、「テキストのサイズの変更」をクリックします
- フォントサイズを変更します
macOS（オペレーティングシステム）
- 「システム環境設定」を開きます
- 「一般」を選択します
- 「ディスプレイ」セクションで、「テキストのサイズ」を調整します
CSSを用いたフォントサイズの指定方法
次に、CSSを用いてフォントサイズを指定する方法について詳しく見ていきましょう。
これらの方法を理解することで、フォントサイズを自由に調整できるようになります。
- ピクセル(px)による指定方法
- パーセント(%)による指定方法
- emの使用法
- remの活用
- ビューポート幅(vw)を用いた指定
ピクセル(px)による指定方法
ピクセル(px)は、最も一般的なフォントサイズ指定方法のひとつです。
ピクセルとは、画面の解像度に直接対応する絶対的な単位。
font-size: 20px;これは大体3mmほどの大きさですが、表示デバイスの解像度や設定により変動します。
パーセント(%)による指定方法
パーセント(%)は、親要素のフォントサイズに対する相対的なサイズを指定します。
例えば親要素のフォントサイズが16pxで、その子要素に「font-size: 150%;」と指定すると、子要素のフォントサイズは16pxの150%で、24pxになります。
パーセントを用いると、親要素のサイズ変更に対して柔軟に対応できます。
emの使用法
emもまた、親要素のフォントサイズに対する相対的なサイズを指定します。
emは親要素のフォントサイズを1emとし、それに対する倍率でサイズを指定します。
例えば、親要素のフォントサイズが20pxであれば、「font-size: 1.5em;」と指定すると、その子要素のフォントサイズは30pxになります。
.container {
font-size: 20px;
}
.text {
font-size: 1.2em;
}
.nested {
font-size: 0.8rem;
}remの活用
remは”root em”の略で、emと似ていますが、こちらはHTMLのroot要素（通常はタグ）のフォントサイズに対する相対的なサイズを指定します。
これにより、異なる深さの子要素間でも一貫したサイズを保つことができます。
以下に、emとremの違いを表にまとめました。
| 項目 | em | rem |
|---|---|---|
| 定義 | 親要素のフォントサイズに対する相対的な値 | ルート要素（通常は<html>）のフォントサイズに対する相対的な値 |
| 基準 | 直近の親要素のフォントサイズ | ルート要素のフォントサイズ |
| インヒェリット性 | 有り | 無し |
| 親要素の影響 | emの値は親要素のフォントサイズに依存 | remの値は親要素のフォントサイズに影響を受けない |
| スケーリング | ネストした要素のフォントサイズに影響を与える可能性がある | ネストした要素のフォントサイズに影響を与えない |
| 一般的な使用 | コンテンツ内での相対的なフォントサイズの調整に使用 | レスポンシブなデザインでのフォントサイズの調整に使用 |
ビューポート幅(vw)を用いた指定
ビューポート幅(vw)は、画面（ビューポート）の幅に対する相対的なサイズを指定します。
1vwはビューポート幅の1%に相当します。
これにより、画面サイズに応じて自動的にテキストサイズが変わるレスポンシブなデザインを実現できます。
ただし、小さな画面でテキストが読みにくくなる可能性もあるため、使用には注意が必要です。
フォントサイズの最大値と最小値の指定法
こちらでは、フォントサイズの最大値と最小値の設定方法について詳しくご説明します。
ウェブサイトの可読性を維持しつつ、ユーザーのデバイスやブラウザの設定に柔軟な対応が必要です。
CSS3では、’min-font-size’や’max-font-size’といったプロパティは存在しないため、異なる方法で最大値や最小値を制御します。
主に使われるのは、メディアクエリとビューポート単位の組み合わせ。
例えば、特定のビューポートの幅以下ではフォントサイズを変更しない、といった設定が可能です。
（例）html
<p class="text">Responsive Font Size</p>（例）CSS
.text {
font-size: 16px;
}
@media (max-width: 600px) {
.text {
font-size: 1.6vw;
}
}フォントサイズを小さく調整する方法
文字の大きさを小さくする方法はいくつかあります。
- HTMLタグの利用
- CSSプロパティの適用
CSSのfont-sizeプロパティを利用することで、ピクセルやパーセント、emなどさまざまな単位で具体的なサイズを指定できます。
.text {
font-size: 16px;
}
.container {
font-size: 150%;
}
.text-em {
font-size: 1.2em;
}
.text-rem {
font-size: 1.5rem;
}フォントサイズが反映されない時の対処法
このセクションでは、フォントサイズが期待通りに適用されない場合の対処法について説明します。
複数の要素にスタイルを適用する際には、特に問題が生じやすいです。
- フォントサイズ記述のエラー
- フォントサイズ指定の競合
フォントサイズ記述のエラー
一番可能性が高いのは、単純な記述ミスです。
CSSのシンタックスエラーや、指定した単位の誤りなどが考えられます。
まずは、指定したフォントサイズが正しく記述されているか、CSSルールが適切に閉じられているかを確認しましょう。
- ブラウザでウェブページを開きます。
- Developerツールを起動します。一般的には、右クリックメニューから「検証」または「要素を検証」を選択します。
- Developerツールが表示されたら、Elements（要素）またはInspector（検証）タブに移動します。
- HTMLの要素を選択します。要素をクリックするか、Developerツール内で要素を検索することができます。
- 選択した要素のスタイルとCSSルールが表示されます。一般的には、右側のパネルでスタイル情報が表示されます。
- スタイル情報を確認し、CSSプロパティとその値が確認できる
フォントサイズ指定の競合
スタイルルールの競合もよくあるエラーです。
なぜなら同じ要素に対する複数のルールが存在する場合、特定の優先順位（カスケーディング）に基づいて最終的なスタイルが決まるから。
もし意図したフォントサイズが適用されない場合、他のCSSルールにより上書きされている可能性があります。
解決方法の一つとして、ブラウザの開発者ツールを用いて適用されているCSSルールを確認することが挙げられます。
まとめ：フォントサイズの指定と調整
当記事では、HTMLとCSSを用いてフォントサイズを調整する方法を学びました。
フォントサイズの変更は、ウェブページの視認性を改善し、ユーザーエクスペリエンスを向上させる重要な手段です。
最初は難しく感じるかもしれませんが、HTMLタグやCSSプロパティの適切な利用により、プロフェッショナルなウェブデザインを作成することができます。
これらの知識を持つことは、ウェブ開発者にとって必要不可欠であり、技術的な課題を解決するための手段となります。