HTMLで文字の大きさを設定する方法と単位の違いをわかりやすく解説

文字の大きさって、サイトを見ていて「小さすぎて読みにくいな」と感じることありますよね。

自分の作ったページなのに、見る人に伝わりにくくなってしまうのは、とてももったいないことです。

この記事では、HTMLで文字の大きさを設定する方法や、よく使われる単位の違いについてわかりやすく説明していきます。

文字サイズの仕組みがわかれば、スマホでもパソコンでも見やすいページを作れるようになりますので、ぜひ最後まで読んで参考にしてください。

HTMLで文字の大きさを設定する基本方法

文字サイズを変更する理由と効果

文字の大きさを変えることには、読みやすさやデザイン性を高める大切な意味があります。

特にスマホやタブレット、パソコンなど、見る人の環境が違う時に「ちょうどいい文字サイズ」にすることは、とても重要です。

文字が小さすぎると読みにくくなり、すぐにページを閉じられてしまうこともあります。

逆に大きすぎても見づらくなってしまうので、バランスが大切です。

ここでは、文字サイズを変更する主な理由をわかりやすく紹介します。

これらの理由から、文字の大きさを正しく設定することは、とても大切なポイントなのです。

HTMLタグでの文字サイズ指定方法

HTMLだけでも文字のサイズを変えることはできます。

昔ながらの方法になりますが、基本を知っておくと役に立ちます。

以下のようなタグが使えます。

ただし、最近はCSSでサイズを指定するのが主流なので、これらの方法は古いHTMLでも使われているという理解にとどめておきましょう。

CSSを使った文字サイズの変更方法

今のHTMLでは、CSSを使って文字の大きさを変えるのが一般的です。

CSSを使うと、同じデザインをたくさんの場所にまとめて適用できるため、効率もよくなります。

文字サイズを変えるための基本的な書き方は次のようになります。

p { font-size: 16px; }

このように書くことで、<p>タグに入っている文字のサイズを16ピクセルに設定できます。

ここでは主に次の3つの方法があります。

CSSでの設定は柔軟に変更できるので、初心者の方も少しずつ慣れていきましょう。

style属性とclassの使い分け

文字サイズを設定するとき、style属性とclass属性のどちらを使えばよいか、迷うことがあります。

ここではその違いをはっきりさせておきましょう。

まず、style属性はHTMLタグの中に直接スタイルを書く方法です。

<p style="font-size:18px;">こんにちは</p>

この方法は簡単ですが、あとでデザインをまとめて変更しにくくなる欠点があります。

一方、classを使うと、CSSファイルにスタイルをまとめて書いておき、HTMLのタグにはそのclass名をつけるだけで使えます。


.my-text { font-size:18px; }
<p class="my-text">こんにちは</p>


このように、長期的に見るとclassを使うほうが便利です。

レスポンシブ対応のポイント

文字サイズは、見る人の画面の大きさによって変えることができます。

これを「レスポンシブ対応」と言います。

スマホとパソコンで同じ文字サイズにすると、小さすぎたり大きすぎたりすることがあります。

そこで、CSSの「メディアクエリ」を使う方法が便利です。


@media screen and (max-width: 768px) {
p { font-size: 14px; }
}


このように書くことで、画面が768px以下（スマホサイズなど）のときに、文字サイズが14pxになります。

見ている人に合わせたサイズで表示できると、ページ全体の印象がとても良くなります。

文字サイズ指定に使われる単位の違いと選び方

px（ピクセル）の特徴と使い所

文字サイズの指定でよく使われるのが「px（ピクセル）」という単位です。

ピクセルとは、画面の中の点のことで、1pxはその点ひとつ分の大きさです。

たとえば、文字サイズを16pxにすると、16個分の点の高さの文字になります。

とてもわかりやすくて、決まった大きさを指定したいときに便利です。

ここでは、pxの主な特徴を紹介します。

pxは決まった大きさを作りたいときにとても使いやすいですが、画面サイズが違う端末では読みにくくなることもあるため、状況に合わせて使い分けることが大切です。

em（エム）の特徴と使い所

emは、親の要素（親タグ）の文字サイズを基準にして決まる単位です。

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

つまり、親に合わせて大きさが変わるという仕組みです。

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

emは柔軟にサイズを調整できるので便利ですが、入れ子構造が深くなると文字が想定より大きくなったり小さくなったりしてしまうので注意が必要です。

rem（ルートエム）の特徴と使い所

remは、HTMLの一番外側（ルート要素）の文字サイズを基準にして決まる単位です。

これは「root em（ルートエム）」の略です。

たとえば、html { font-size: 16px; }と書いてあれば、1rem = 16pxになります。

親の影響を受けずに、いつもルートに合わせて大きさが決まるのがポイントです。

remの良い点は次のとおりです。

複雑なレイアウトやレスポンシブデザインをするときには、remを使うことで効率的に調整できます。

%（パーセント）の特徴と使い所

%は、その要素の親のサイズに対して何％かを指定できる単位です。

文字サイズにも使うことができ、たとえばfont-size: 120%;とすれば、親のサイズの1.2倍になります。

これはemと似ていますが、パーセントのほうが直感的に使いやすいと感じる人も多いです。

ここでは、%の特徴をまとめます。

%は見た目のバランスを整えやすいですが、入れ子が多いと影響を受けやすいので、使う場所をしっかり考える必要があります。

vw・vhなど相対単位の特徴

vwやvhは、画面の大きさに合わせて変わる新しいタイプの単位です。

vwは「ビューポートの幅（Width）」のことで、画面の横幅の1％を表します。

vhは「ビューポートの高さ（Height）」で、画面の縦の1％です。

たとえばfont-size: 5vw;とすれば、画面の横幅の5％の大きさになります。

vwやvhには次のような特徴があります。

vwやvhをうまく使うと、どんな画面でも文字がちょうどよく見えるようになりますが、文字が極端に小さくなることがあるので、最小サイズの設定をしておくと安心です。

単位の違いによる表示の比較

ここまで紹介したpx、em、rem、%、vw、vhは、それぞれ特徴が違います。

そのため、実際にどのくらいの大きさになるのか、比べてみることが大事です。

たとえば、次のように書くとそれぞれ違うサイズで表示されます。


html { font-size: 16px; }
p.px { font-size: 16px; }
p.em { font-size: 1em; }
p.rem { font-size: 1rem; }
p.percent { font-size: 100%; }
p.vw { font-size: 5vw; }


このように同じ「16px相当」を目指しても、画面サイズや親のサイズによって見え方が変わることがあります。

ですから、どの単位を使うかは目的に合わせて選ぶのが大切です。

目的別におすすめの単位

どの単位を使えばいいのか迷ったときは、「なにを作るのか」に注目しましょう。

使い分けの目安を以下に紹介します。

このように、使う目的によって単位を選べば、より見やすくてきれいなページを作ることができます。

ユーザー環境に応じた最適な文字サイズの設定方法

PC・スマホ・タブレットでの見え方の違い

文字の大きさは、見る端末によって感じ方が大きく変わります。

パソコンで見たときにちょうどいいサイズでも、スマホだと小さく見えたり、逆に大きすぎてレイアウトが崩れてしまうことがあります。

これを防ぐには、それぞれの画面サイズに合わせた設定が必要です。

以下は、端末ごとに気をつけるポイントです。

このように、どの端末でも読みやすい文字サイズを意識することが大切です。

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

CSSの「メディアクエリ」を使えば、画面サイズに応じて文字の大きさを変えることができます。

これにより、スマホでは大きめの文字、パソコンでは標準サイズといった細かい調整ができます。

基本的な書き方は以下のとおりです。


p { font-size: 16px; }
@media screen and (max-width: 768px) {
p { font-size: 18px; }
}


メディアクエリを使うときのポイントをまとめました。

この方法で、どんな端末でもちょうどいい文字サイズに見えるようにできます。

アクセシビリティを考慮した設計

文字サイズの設計では、アクセシビリティもとても重要です。

アクセシビリティとは、誰でも使いやすいサイトを作ることです。

高齢者や視力の弱い人でも読みやすくするには、適切な文字の大きさと行間、色の組み合わせなどに気を配る必要があります。

ここでは、アクセシビリティに配慮するためのポイントを紹介します。

これらを守ることで、すべての人が読みやすくなるサイトになります。

ユーザーが文字サイズを変更した場合の対応

ブラウザには、ユーザーが自分で文字の大きさを変更できる機能があります。

この機能を使ってもレイアウトが崩れないように、柔軟なデザインにしておくことが重要です。

特にpxで固定してしまうと、拡大縮小に対応できなくなることがあります。

文字サイズの変更に対応するポイントは以下のとおりです。

こうすることで、ユーザーが自由に文字サイズを調整しても快適に使えるサイトになります。

ダークモード時の文字の可読性

最近は多くの端末やブラウザでダークモードが使われています。

背景が黒やグレーになるため、文字色とのバランスがとても大事です。

明るすぎる色や暗すぎる色を使うと、目が疲れたり読みにくくなったりします。

ダークモードで文字を見やすくするポイントを紹介します。

これらを意識することで、夜でも目にやさしい、読みやすい文字表示ができます。

Webフォントと文字サイズの関係

Webフォントは、サイトの雰囲気を変えるとても便利なツールですが、フォントによって同じサイズでも見た目がかなり違ってきます。

たとえば同じ16pxでも、細いフォントは小さく見えることがあります。

逆に太字のフォントは大きく見えることもあります。

ここでは、Webフォントを使うときに気をつける点を紹介します。

このように調整すれば、見た目も読みやすさもバランスのとれたデザインになります。

表示速度と可読性のバランス

文字サイズの設定では、読みやすさと一緒に表示速度にも気をつけたいところです。

とくにWebフォントを多用すると、読み込みに時間がかかってしまうことがあります。

スピードと可読性の両方を意識することが大切です。

バランスを取るためのポイントを紹介します。

こういった工夫をすることで、速くて見やすいページが作れるようになります。

文字サイズを変更するための実践テクニックとコード例

基本的なHTMLとCSSコード例

文字サイズを変更するには、HTMLとCSSを組み合わせるのが基本です。

CSSを使うことで、複数の場所に同じスタイルを適用でき、あとから修正もしやすくなります。

ここでは、実際に使えるコードの例を紹介します。

まずはHTMLとCSSのシンプルな組み合わせ例です。


<!DOCTYPE html>
<html lang="ja">
<head>
<style>
.big-text { font-size: 24px; }
.small-text { font-size: 12px; }
</style>
</head>
<body>
<p class="big-text">大きな文字です</p>
<p class="small-text">小さな文字です</p>
</body>
</html>


このように、クラスを使えばHTML内のどこにでも文字サイズを適用できます。

ボタンで文字サイズを変更する方法

Webサイトに「文字サイズを変えるボタン」をつけることで、ユーザー自身が見やすいサイズに調整できるようになります。

これは特に高齢者向けのサイトや教育用のサイトでよく使われています。

以下はJavaScriptを使った簡単な例です。


<button onclick="changeSize('small')">小さく</button>
<button onclick="changeSize('large')">大きく</button>

<p id=”text”>この文字の大きさを変えられます</p>

<script>
function changeSize(size) {
var element = document.getElementById(“text”);
if (size === ‘small’) {
element.style.fontSize = “12px”;
} else if (size === ‘large’) {
element.style.fontSize = “24px”;
}
}
</script>

この方法を使えば、ユーザーが自分の見やすい文字サイズに簡単に変えられるようになります。

JavaScriptを使った動的な文字サイズ変更

JavaScriptを使えば、ページの読み込み後でも文字サイズを動的に変えることができます。

これは「＋」や「−」のボタンを押すことで段階的に文字を大きくしたり小さくしたりする仕組みです。

以下のような方法で実装できます。


<button onclick="resizeText(2)">文字を大きく</button>
<button onclick="resizeText(-2)">文字を小さく</button>

<p id=”target”>サイズを変えられるテキストです。

</p>

<script>
let currentSize = 16;
function resizeText(step) {
currentSize += step;
if (currentSize < 10) currentSize = 10;
if (currentSize > 36) currentSize = 36;
document.getElementById(“target”).style.fontSize = currentSize + “px”;
}
</script>

このようにすると、より細かくユーザーが好みに合わせて調整できる仕組みになります。

Sass・SCSSを使った効率的な設定

CSSをたくさん書いていると、同じようなコードが増えてしまい、管理が大変になります。

そこで活躍するのがSassやSCSSといったCSSプリプロセッサです。

これを使うと、繰り返しのスタイルをまとめて管理しやすくなります。

Sassを使うときの例を紹介します。


$base-font-size: 16px;
.small-text { font-size: $base-font-size * 0.75; }
.medium-text { font-size: $base-font-size; }
.large-text { font-size: $base-font-size * 1.5; }


このように変数を使うことで、あとから一か所の変更だけで全体のサイズを変えられます。

チームでの開発や大きなサイトにも向いています。

WordPressでの文字サイズ設定方法

WordPressを使っている場合は、プラグインやテーマの設定から文字サイズを簡単に変更することができます。

コードを書かなくても操作できるため、初心者の方にもおすすめです。

よく使われる方法は以下のとおりです。

WordPressでもCSSと同じようにfont-sizeを使って調整できます。

使いやすい方法を選ぶことがポイントです。

ブラウザ別の挙動の違いと対策

文字サイズの表示は、ブラウザによって少しずつ違う場合があります。

Chrome、Safari、Firefoxなどでは、同じCSSを書いても文字の見た目が微妙に変わることがあります。

これを「ブラウザ依存」と言います。

その対策として、以下のようなポイントがあります。

事前にいろいろなブラウザで確認しておけば、見た目のズレを最小限に抑えることができます。

実際のサイトでの活用事例

ここまで学んだ内容を活かして、実際にどんなふうに使えるのかを考えてみましょう。

たとえば企業のホームページやECサイト、教育系サイトでは、それぞれに合った文字サイズが使われています。

以下はよくある活用例です。

目的やターゲットに合わせて、文字サイズを調整することがサイトの質を高めるカギになります。

まとめ

これまで「文字の大きさ HTMLの設定方法と単位の違い」についてくわしく紹介してきました。

最後に、特に大切なポイントをまとめておきます。

この記事を参考に、あなたのサイトでも見やすくて使いやすい文字サイズを設定してみましょう。