HTMLでfont-sizeを設定する方法｜単位の使い分け・レスポンシブ対応・SEO配慮

文字の大きさって、思った通りに変えられないとちょっと困りますよね。

特にHTMLでホームページを作っていると、「どこで文字サイズを変えればいいの？」「単位がいっぱいあってわかりにくい！」なんてこと、よくあると思います。

そこで今回は、HTMLでfont-sizeを使って文字の大きさを設定する方法について、わかりやすく説明します。

pxやem、remといった単位の違いから、スマホやパソコンなど画面の大きさに合わせた設定方法まで、しっかりと紹介していきます。

この内容がわかるようになれば、自分のサイトの文字を読みやすく、きれいに整えることができるようになりますので、ぜひ最後まで読んでみてくださいね。

HTMLでfont-sizeを設定する基本方法とは？

font-size属性とは何か

font-sizeとは、HTMLやCSSで文字の大きさを指定するためのプロパティです。

HTML単体では直接文字サイズを変えるタグはありませんが、CSSと組み合わせることで自由に文字の大きさを変えることができます。

font-sizeは、Webサイトの読みやすさやデザインに大きな影響を与えるため、正しく使うことが大切です。

font-sizeで文字サイズを指定する方法には、さまざまな単位や指定方法があります。

次のような特徴があります。

このように、font-sizeはWebサイトの見た目を左右する重要なプロパティです。

初心者の方もまずここから理解するのがオススメです。

style属性を使ったインライン指定の方法

HTMLでは、タグの中にstyle属性を使って、font-sizeを直接指定することができます。

これを「インラインスタイル」と呼びます。

たとえば次のように書きます。

インライン指定の特徴は以下の通りです。

ただし、同じスタイルをたくさんの場所で使いたいときには、後述のCSSでまとめて指定する方法の方が便利です。

内部スタイルシートでfont-sizeを指定する方法

内部スタイルシートとは、HTMLファイルの中にstyleタグを使ってCSSをまとめて書く方法です。

複数の要素に対して一括でfont-sizeを指定することができます。

この方法は以下のように使います。

たとえば次のように書きます。

<style>
p { font-size: 18px; }
h1 { font-size: 32px; }
</style>

このようにすると、ページ内のすべてのpタグやh1タグに指定したサイズが適用され、コードがすっきりします。

外部スタイルシートで統一して指定する方法

Webサイトを複数のページで統一したデザインにするには、外部スタイルシートの使用が便利です。

これは別ファイルにCSSを書いて、HTMLとリンクする方法です。

外部スタイルシートのメリットは次の通りです。

HTMLでは次のように読み込みます。

<link rel=”stylesheet” href=”style.css”>

CSSファイルの中に以下のように記述します。

body { font-size: 16px; }
h2 { font-size: 24px; }

このようにすることで、ページ全体で統一感のある文字サイズを保つことができます。

CSSで使用できるサイズ単位の種類

font-sizeを指定するときには、さまざまな単位を使うことができます。

それぞれに特徴があり、目的に合わせて使い分ける必要があります。

主な単位とその特徴は次の通りです。

それぞれの単位は、目的や表示環境に合わせて使い分けるのがコツです。

特にレスポンシブ対応を考える場合には、emやrem、vwなどが重宝されます。

単位の違いを理解しておくことで、より柔軟で使いやすいデザインが可能になります。

サイズ指定でよくあるミスと注意点

font-sizeを使うときには、いくつかのよくある失敗に注意が必要です。

以下のようなポイントを見落とすと、デザインが崩れたり、読みづらいサイトになることがあります。

このようなミスを避けるためにも、サイズの単位や親要素との関係を理解したうえで指定することが大切です。

しっかり確認しながら書くことで、誰にでも読みやすく、きれいなWebページを作ることができます。

よく使われるfont-sizeの単位とその違い

px（ピクセル）の特徴と使いどころ

px（ピクセル）は、画面上の正確な大きさで文字サイズを指定できる単位です。

Web制作で最もよく使われている単位のひとつで、細かい調整がしやすいのが特徴です。

パソコンやスマートフォンなど、表示環境に関係なく見た目が安定するのが魅力です。

pxの特徴をわかりやすくまとめると以下の通りです。

ただし、文字が小さすぎると読みにくくなるので、12px以下はできるだけ避けるのがおすすめです。

pxはコントロールしやすい反面、柔軟性には欠けるため、使いすぎには注意が必要です。

emの特徴と親要素との関係

emは、文字サイズを親のサイズを基準にして決める単位です。

たとえば、親の文字サイズが16pxなら、1emは16px、1.5emは24pxになります。

emを使うことで、画面サイズやデザインに柔軟に対応できるメリットがあります。

以下はemを使うときに知っておきたいポイントです。

emはうまく使えばとても便利ですが、複雑な構造になると計算が難しくなることもあります。

しっかりと親子関係を意識して使うことが大切です。

remの特徴とHTMLルートとの関係

remは「root em」の略で、HTMLのルート要素（htmlタグ）を基準にして文字サイズを指定する単位です。

親要素の影響を受けないので、デザインが安定しやすいという特徴があります。

remのメリットは以下のような点にあります。

たとえば、htmlに「font-size: 16px;」と書けば、1rem = 16pxになります。

remを使えば、コードの見通しがよくなるので、最近のWeb制作ではよく使われるようになっています。

%（パーセント）指定の使い方

%（パーセント）は、親要素の文字サイズを何％にするかで文字の大きさを決める方法です。

100%が基準になり、120%なら1.2倍の大きさになります。

見た目に合わせて細かく調整したいときに便利な単位です。

パーセント指定の特徴をまとめると以下のようになります。

ただし、%の指定も親のサイズ次第で変わってしまうので、思った通りに表示されないこともあります。

計算が苦手な人にはやや扱いづらい面もあります。

vw・vhなどビューポート単位の使用法

vwやvhは、画面のサイズに合わせて文字サイズを自動で調整できる単位です。

vwは画面の幅、vhは高さを基準とし、1vwは画面幅の1%、1vhは高さの1%になります。

画面にぴったり合わせたいときに使いやすいです。

ビューポート単位の特徴を以下にまとめます。

とくにスマホやタブレットなどで見たときに、文字が自然に読みやすいサイズになるため、デザインの幅が広がります。

ただし、小さな文字には向いていないこともあるので、使い分けが大切です。

相対指定と絶対指定の違い

文字サイズには、絶対指定と相対指定という考え方があります。

それぞれの違いを理解しておくと、より自由なデザインができるようになります。

まずは、それぞれの特徴を見てみましょう。

どちらが良いというわけではなく、目的によって使い分けることが大事です。

固定したい部分はpx、柔軟に動かしたい部分はemやremを使うなど、上手に組み合わせて使いましょう。

単位ごとのメリット・デメリットまとめ

ここまで紹介した文字サイズの単位には、それぞれメリットとデメリットがあります。

場面に合わせて適切な単位を選ぶことが、見やすくて使いやすいWebデザインのポイントです。

以下に単位ごとの特徴をまとめます。

それぞれの単位の特徴を活かせば、ユーザーにとって読みやすい・わかりやすいWebページを作ることができます。

目的に合った使い方を心がけましょう。

レスポンシブ対応でのfont-sizeの設定方法

メディアクエリを使ったサイズ調整

レスポンシブデザインでは、パソコンやスマホなどさまざまな画面サイズに合わせて文字サイズを調整することが必要です。

そこで活躍するのがCSSの「メディアクエリ」です。

画面の幅に応じて、適切なfont-sizeを指定できます。

以下に、メディアクエリを使った方法のポイントを紹介します。

たとえば、「@media screen and (max-width: 600px)」と書けば、スマホの画面幅以下での指定が可能です。

柔軟な調整ができるため、あらゆるユーザーにやさしい表示を作れます。

clamp()関数を使った柔軟な指定方法

CSSのclamp()関数を使うと、画面サイズに合わせて自動的に文字サイズを調整することができます。

これは最小サイズ・理想サイズ・最大サイズの3つを一度に指定する便利な方法です。

以下のように、clamp()関数には多くのメリットがあります。

たとえば、「font-size: clamp(14px, 2vw, 20px);」のように書くと、画面の大きさに応じて14pxから20pxの範囲で文字が自動調整されます。

clamp()を使うと、メディアクエリ不要でレスポンシブ化が可能です。

ブラウザ幅に応じて動的に変わるサイズ設定

レスポンシブ対応では、vw（ビューポート幅）や%などの相対単位を使って、画面のサイズに応じて文字を調整することも重要です。

こうした方法を使えば、どんな端末でも文字が大きすぎたり小さすぎたりしません。

以下のようなテクニックを活用すると効果的です。

特に見出しやキャッチコピーなどは、動的なサイズ指定で印象的な表現ができるようになります。

文字の見せ方を工夫することで、ページ全体が読みやすく、バランスの取れたデザインになります。

ユーザーの閲覧環境に配慮した設定方法

すべてのユーザーが同じ環境でWebサイトを見ているわけではありません。

年齢や視力、使用しているデバイスによって読みやすい文字サイズは変わってきます。

だからこそ、誰でも見やすくなるように設定することが大切です。

配慮すべきポイントは以下の通りです。

また、OSやブラウザによってデフォルトの文字サイズも異なるため、強制的なサイズ指定は避けた方がよい場合もあります。

ユーザーの立場で考えた調整が必要です。

スマホとPCで文字サイズを変える方法

スマホとPCでは、画面サイズだけでなく閲覧距離や操作方法も違います。

そのため、同じ文字サイズでは最適な読みやすさを実現できません。

デバイスごとに文字サイズを変えることがポイントです。

デバイス別に文字サイズを設定する基本の考え方は以下の通りです。

たとえば、メディアクエリで「max-width: 768px」を条件にすると、スマホ向けに調整できます。

このように使い分けることで、どのデバイスでも快適な読書体験が可能になります。

レスポンシブデザインで避けたい設定ミス

便利なレスポンシブ対応ですが、font-sizeを調整する際によくあるミスがあります。

それを知らずに使うと、読みにくいページになってしまう恐れがあります。

以下のようなミスには注意が必要です。

こうしたミスを防ぐためには、ブラウザの開発者ツールなどを活用して実際の表示を常に確認することが大切です。

丁寧にテストすることで、失敗を減らせます。

font-sizeを調整する際のベストプラクティス

最後に、レスポンシブ対応で文字サイズを設定するときのベストプラクティスを紹介します。

これを意識するだけで、誰にとっても読みやすく、きれいなWebページが作れます。

おすすめの方法は以下の通りです。

文字サイズはデザインの中でもとても重要な要素です。

適切に設定することで、ユーザーにとってストレスのない体験を提供できます。

丁寧に設定して、読みやすいサイト作りを心がけましょう。

font-size設定のSEOとアクセシビリティへの影響

文字サイズとユーザー体験の関係性

Webサイトにおいて文字サイズはユーザーの読みやすさに直結する重要な要素です。

小さすぎる文字は読みにくく、すぐに離脱されてしまう原因になります。

一方で、大きすぎる文字も見た目が崩れたり、スクロールが多くなって読みづらくなります。

読みやすさを高めるために意識したいポイントは以下の通りです。

ユーザーがストレスなく読めるサイトは、滞在時間が長くなり、結果的にSEOにも良い影響を与えます。

まずは誰にとっても読みやすい文字サイズを心がけることが大切です。

検索エンジンが評価するfont-sizeの基準

Googleなどの検索エンジンは、ページの見やすさを評価する要素のひとつとして文字サイズをチェックしています。

特にモバイルファーストインデックスが主流になった今、スマホでもしっかり読める文字サイズかどうかが重要です。

評価されやすい文字サイズのポイントをまとめると以下のようになります。

また、Googleの「モバイルフレンドリーテスト」では、文字が小さすぎるとエラー警告が表示されることもあります。

SEOのためにも文字サイズの設定は軽視できません。

読みやすさとSEOに効果的なサイズ設定

読みやすくてSEOにも強い文字サイズの設定にはコツがあります。

ただ大きくするだけではなく、コンテンツの構造や目的に合わせてメリハリをつけることがポイントです。

以下に効果的な設定の例を紹介します。

このようにサイズに一貫性を持たせることで、読みやすさがアップし、検索エンジンからも「ユーザーに優しいページ」として評価されやすくなります。

特にスマホでの見え方を重視すると、自然とSEOにも強くなります。

アクセシビリティ対応で重要なポイント

アクセシビリティとは、誰もがストレスなくWebサイトを利用できるようにする考え方です。

その中でもfont-sizeは視力に自信がない人にとって特に大切です。

サイズが小さいと、画面を拡大しないと読めなくなり、操作の手間が増えてしまいます。

アクセシビリティで大切なポイントは以下の通りです。

WCAG（Web Content Accessibility Guidelines）では、ユーザーが簡単に拡大して読めるようにすることが求められています。

font-sizeを適切に設定することは、すべてのユーザーへの思いやりになります。

視覚障がい者への配慮とWCAGとの関係

視覚に障がいがある人でも快適に情報を得られるようにするためには、WCAGというガイドラインに沿った対応が求められます。

この中でも文字サイズに関する要件は特に重要です。

自分で拡大できることや、画面リーダーでも正しく読み取れる構造が求められます。

そのために意識すべき点は次の通りです。

特に日本語は文字が詰まっていると読みにくくなるため、サイズだけでなく行間のバランスも調整すると良いです。

WCAGに沿った対応をしておくと、公共サイトや教育機関向けの信頼性も上がります。

小さすぎる文字サイズが引き起こす問題

文字が小さすぎると、読みづらいだけではなく多くの問題を引き起こす原因になります。

スマホでは特に顕著で、ユーザーが拡大操作をしないと内容が読めないサイトは、すぐに離脱されてしまいます。

以下のようなデメリットがあります。

たとえば12pxや10pxといった極端に小さい文字は、装飾的な場面を除いて使わない方が良いです。

適切なサイズ設定はユーザーの信頼にもつながります。

Google Lighthouseでのfont-size評価とは

Googleの提供するLighthouseは、Webサイトの品質をチェックできる便利なツールです。

この中には「font-sizeの適切さ」もチェック項目として含まれています。

Lighthouseはモバイルでの読みやすさを特に重視しており、改善ポイントも具体的に教えてくれます。

評価基準を知るためのポイントは以下の通りです。

Lighthouseでのスコアが悪いと、検索順位にも悪影響を及ぼす可能性があります。

定期的にチェックし、適切なfont-sizeを設定していくことが大切です。

文字の見やすさは、Webサイトの価値そのものと言っても過言ではありません。

まとめ

これまで紹介してきた内容をもとに、font-sizeを使ってHTMLで文字サイズを設定する際に大切なポイントをまとめました。

文字サイズをうまく設定すると、読みやすくて見やすいWebサイトになります。

今日学んだことをぜひあなたのページ作りに活かしてみましょう。