HTMLでテキストサイズを変更する方法と実用例｜font-sizeの使い方・単位・レスポンシブ対応

「ホームページの文字が小さすぎて読みにくい…」って思ったこと、ありますよね。

せっかく良い内容を書いていても、文字が見づらいと読んでもらえません。

この記事では、HTMLで文字サイズを調整する方法について分かりやすく解説します。

基本の書き方から、実際に役立つテクニックまで、すぐに使える内容をたっぷり紹介しています。

文字サイズの仕組みや調整のコツが分かれば、どんな人にも読みやすいホームページが作れるようになりますので、ぜひ最後まで参考にしてください。

HTMLでテキストサイズを変更する基本的な方法

font-sizeプロパティの基本と単位の種類

HTMLでテキストサイズを変えるときに使う一番基本的な方法は、CSSのfont-sizeプロパティです。

このプロパティを使えば、文字の大きさを自由に調整することができます。

設定するには、サイズの値と単位をセットで指定する必要があります。

単位にはいくつかの種類があり、それぞれ特徴があります。

ここでは、よく使われる単位について簡単に説明します。

どの単位を使うかによって、デザインのしやすさや見た目の変化が変わってくるので注意が必要です。

最初はpxかremを使うと分かりやすいでしょう。

相対値と絶対値の使い分け方

テキストサイズを設定するとき、指定の仕方には相対値と絶対値の2種類があります。

それぞれにメリットとデメリットがあります。

まずは簡単に違いを見てみましょう。

絶対値は「この文字は必ずこのサイズ」と決めたいときに便利ですが、スマホやタブレットなど画面サイズが違うと見にくくなることがあります。

それに対して相対値は、親の文字サイズや画面の広さに合わせて変化します。

たとえば、スマホで見たときに文字が小さくなりすぎないようにできます。

場面によって使い分けるのがコツです。

たとえば、見出しなどは絶対値、本文や説明文は相対値を使うとバランスがよくなります。

px、em、remの違いと使いどころ

px、em、remは、よく使われる文字サイズの単位ですが、それぞれ使い方や意味がちがいます。

間違って使うと、思ったとおりに表示されないこともあるので、違いを知っておきましょう。

ここでは、それぞれの特徴と使いどころを紹介します。

初心者にはremが特におすすめです。

理由は、親のサイズに左右されないため、予想通りのサイズを出しやすいからです。

インラインスタイルでの指定方法

テキストサイズをすぐに変えたいときは、HTMLタグの中に直接スタイルを書く方法もあります。

これをインラインスタイルといいます。

書き方の例を紹介します。

このように、style属性の中に「font-size: 数値＋単位」と書くだけで、すぐにサイズを変えることができます。

ただし、インラインスタイルはHTMLがごちゃごちゃしやすく、たくさん使うと見づらくなります。

一時的な調整やテストには便利ですが、本番のコードではできるだけCSSで管理した方がよいです。

CSSファイルを使ったスタイルの管理方法

本格的にWebサイトを作る場合、HTMLの中にすべてのデザインを書くのは大変です。

そのため、スタイルは外部のCSSファイルにまとめて管理するのが一般的です。

CSSファイルを使うメリットはたくさんあります。

CSSファイルを読み込むには、HTMLのheadタグの中に以下のように書きます。

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

この方法を使えば、デザインをきれいに整理することができます。

テキストサイズも、たとえば以下のようにCSSに書いておけばOKです。

p { font-size: 16px; }

プロっぽいWebページを作りたいなら、CSSファイルの使い方をしっかり覚えておくことが大切です。

具体的なテキストサイズの調整テクニックと実用例

見出しタグ（h1〜h6）のサイズ変更例

HTMLでは、h1からh6までの見出しタグが用意されています。

これはタイトルや小見出しを表すタグで、もともとそれぞれに異なる大きさが設定されています。

でも、ページのデザインによっては、そのままのサイズでは合わないこともあります。

そんなときはCSSで見出しタグの文字サイズを変更しましょう。

例えば以下のような使い方があります。

これで見出しの順番を保ちつつ、自分好みのサイズに調整できます。

見出しは大事な情報を目立たせる役目があるので、文字サイズの調整がとても重要です。

段落（p）やspanタグへのサイズ適用

段落を表すpタグや、文章の一部分にスタイルをつけるspanタグにも、文字サイズの指定は簡単にできます。

以下のようにCSSで設定する方法があります。

pタグは長い文章に使うことが多いので、読みやすいサイズを選びましょう。

また、spanタグを使えば文章の一部だけ文字を大きくしたり、小さくしたりできます。

例えば、

<p>今日は<span style="font-size:20px;">とても暑い</span>日です。

</p>

のように書くと、「とても暑い」だけ文字が大きくなります。

この方法を使えば、読者の目を引きたい部分だけを目立たせることができます。

レスポンシブ対応のテキストサイズ調整

スマホやパソコン、タブレットなど、いろんな画面サイズに対応するためにはレスポンシブ対応が必要です。

文字のサイズも、画面の広さに合わせて変わるようにすると読みやすくなります。

レスポンシブ対応には、次のような方法があります。

たとえば、以下のように書くと便利です。

body { font-size: clamp(14px, 2vw, 18px); }

この方法を使えば、小さいスマホでも、大きなモニターでも、文字がちょうどよく表示されます。

読む人の環境に合わせたやさしいデザインが作れます。

メディアクエリを使ったサイズ変更

メディアクエリとは、画面の幅によってCSSの内容を変える方法です。

これを使うことで、スマホ用とパソコン用に文字サイズを分けて指定できます。

以下に具体例を紹介します。

このように設定すれば、画面が小さいときは文字が小さくなり、広い画面では大きくなります。

とてもシンプルな方法で、どんなデバイスでも読みやすくなるのがポイントです。

クラスを活用した共通スタイルの設定

テキストサイズを何度も設定するのは大変です。

そんなときは、CSSクラスを使うと効率よく管理できます。

クラスを使った設定方法は以下のとおりです。

そしてHTMLの中ではこのように使います。

<p class="large-text">大きな文字です</p>

この方法を使えば、同じスタイルをいろいろな場所で簡単に再利用できます。

統一感が出て、作業も早くなります。

特に複数ページにわたるサイトでは、とても便利です。

ユーザー操作に応じたサイズの変更方法

ユーザーの行動によって文字サイズを変えたいときもあります。

たとえば、ボタンを押したときに文字を大きくしたり、小さくしたりするなどです。

こうした動きは、JavaScriptやCSSの擬似クラスで対応できます。

以下によく使われるやり方を紹介します。

このような動きを入れることで、ユーザーにとって楽しい・分かりやすいデザインになります。

特に、子どもや高齢者にも優しいインターフェースを作るときに役立ちます。

Webアクセシビリティを考慮した調整方法

テキストサイズは、誰にでも読みやすくするためにとても大切です。

アクセシビリティとは、体に不自由がある人でも使いやすいようにすることです。

以下のようなポイントに気をつけましょう。

アクセシビリティに配慮することで、より多くの人にやさしいサイトを作ることができます。

誰でも安心して見られるページ作りが、これからの標準になります。

よくある問題とテキストサイズが変わらない原因

CSSの優先順位と競合の影響

HTMLで文字サイズを変えたはずなのに、見た目がまったく変わらないことがあります。

その原因のひとつがCSSの優先順位や競合です。

CSSは、どのスタイルを優先するかをルールに従って決めています。

間違った順番や指定方法をしていると、意図したデザインが反映されません。

ここではよくある競合の原因をまとめます。

これらの影響で、指定したfont-sizeが効かないことがよくあります。

スタイルがどう重なっているかをしっかり見直すことが解決の第一歩です。

外部スタイルシートと内部スタイルの競合

HTMLでは、スタイルの書き方がいくつかあります。

外部スタイルシート、内部スタイル、そしてインラインスタイルです。

これらが混ざっていると、どれが優先されるか分からなくなってしまい、文字サイズが思うように変わらない原因になります。

優先順位は以下のようになっています。

もし外部CSSでサイズを変えたつもりでも、HTMLの中にインラインスタイルがあると、そちらが優先されます。

どこに書いたスタイルが有効になっているか確認することが大切です。

継承と初期化の理解不足による問題

HTMLでは、あるスタイルを設定すると、子どもの要素にそのまま引き継がれる（継承）ことがあります。

逆に、初期値が設定されていて、それが原因で思ったとおりに反映されないこともあります。

これらの考え方は、初心者にとってややこしく感じるかもしれませんが、以下のように覚えると簡単です。

また、ブラウザが自動で入れている初期スタイル（User Agent Stylesheet）も原因になることがあります。

意図しないサイズが適用されているときは継承や初期化を疑ってみると良いです。

ブラウザのデフォルトスタイルの影響

実はHTMLを何も装飾しないまま表示しても、ある程度整った見た目になります。

これは、各ブラウザが持っているデフォルトスタイルがあるからです。

でもこのデフォルトが、デザインを邪魔してしまうこともあります。

以下のような影響がよく見られます。

こうしたデフォルトスタイルは、* { margin: 0; padding: 0; }のようにリセットすることで防げます。

自分で全体を整える方が確実に思い通りになります。

!importantの使用による意図しない結果

CSSには、スタイルを絶対に反映させたいときに使える!importantという指定があります。

しかし、これをむやみに使うと、あとで変更したいときに困ることがあります。

以下のような問題が起こる可能性があります。

!importantは最後の手段として使うのが基本です。

正しくセレクタを使い、優先順位を理解したうえでスタイルを調整することが大切です。

キャッシュが原因で変更が反映されない

CSSをちゃんと書き直したのに、ブラウザで見たときに変わっていない…。

そんなときはキャッシュが原因かもしれません。

ブラウザは一度読み込んだファイルを一時的に保存しておくので、前のCSSが表示されることがあります。

キャッシュが原因のときは、以下の対処法があります。

変えた内容が表示されないときは、まずキャッシュを疑ってみるとよいでしょう。

セレクタ指定のミスによる影響

CSSで文字サイズを変更したいとき、セレクタの指定ミスが原因でスタイルが当たらないことがあります。

たとえば、クラス名やタグ名を間違えていると、どんなに正しいCSSを書いても意味がありません。

よくあるミスは以下のようなものです。

セレクタはCSSを正しく動かすための住所のようなものです。

どこにスタイルを当てたいのか、しっかり確認して書きましょう。

テキストサイズ調整に役立つツールとリソース

オンラインフォントサイズチェッカーの活用

文字サイズを変えるとき、どれくらいが読みやすいのか分からなくなることがあります。

そんなときに便利なのがオンラインのフォントサイズチェッカーです。

これは、実際の画面で文字の大きさを試せるツールで、初心者にもとても分かりやすいです。

使うときは、文字を入力しながらサイズを調整したり、表示される見え方を確認したりします。

主な特徴をまとめると以下のとおりです。

こういったツールを使うことで、感覚ではなく、実際の見え方で判断できるようになります。

迷ったときはまず試してみましょう。

デザインツールとの連携方法

Webサイトを作るときには、FigmaやAdobe XDなどのデザインツールを使って見た目を決めることがあります。

これらのツールで決めた文字サイズをHTMLやCSSに正しく反映させることが大切です。

デザインとコードを連携させるために、次のようなポイントを押さえておくとスムーズです。

デザインと実装がバラバラだと、実際のサイトで違和感が出てしまいます。

見たままを正確に再現するためにも、ツールとコードの連携はとても大切です。

CSSフレームワーク（Bootstrapなど）の使い方

自分で細かくCSSを書くのが大変なときは、CSSフレームワークを使うととても便利です。

中でも有名なのがBootstrapです。

最初からきれいなスタイルが用意されていて、文字サイズもクラス名を使って簡単に変えられます。

以下のようなクラスを使えば、すぐに見た目を調整できます。

このように、Bootstrapなら簡単なクラス名をHTMLに書くだけで、きれいで統一感のあるデザインが作れます。

初めての人でも使いやすいのでおすすめです。

ブラウザの開発者ツールでの検証方法

文字サイズがうまく変わらないとき、どこが原因なのかを調べるための道具がブラウザには用意されています。

それが「開発者ツール」です。

これはGoogle ChromeやFirefoxなどのブラウザに標準でついている機能です。

以下のようなことができます。

開発者ツールを使えば、直接コードを書き換えなくても試せるのでとても便利です。

文字が思った通りにならないときは、まずこれで調べてみるとよいです。

テキストの可読性を向上させるガイドライン

テキストのサイズはただ変えるだけではなく、読みやすくするために適切なルールに従うことも大切です。

可読性を高めることで、読者が内容をスムーズに理解できます。

ここでは、文字サイズに関する可読性のガイドラインを紹介します。

これらを守ることで、どんな人でもストレスなく読むことができるページになります。

特に高齢者や視力の弱い方にはやさしい配慮になります。

Google LighthouseでのUX評価と改善

Googleが提供しているLighthouse（ライトハウス）というツールでは、Webサイトの使いやすさや読みやすさを自動でチェックしてくれます。

これを使うことで、テキストサイズに関する問題も見つけられます。

主にチェックできる項目は以下のとおりです。

レポートの結果をもとに改善すれば、Googleの評価も上がり、SEOにも良い影響が出ます。

とても便利な無料ツールなので、ぜひ活用してみてください。

信頼できる学習サイトや参考書籍の紹介

テキストサイズの調整やCSSの使い方をもっと知りたい人は、学習サイトや本を参考にするとよいです。

特に初心者向けの教材は、イラストや図を使ってやさしく解説してくれます。

おすすめのリソースには以下のようなものがあります。

良い教材を選べば、文字サイズだけでなく、Web全体の知識がしっかり身につきます。

ゆっくりでもコツコツ学んでいけば、だれでもスキルアップできます。

まとめ

これまでに紹介してきた内容をふりかえって、特に大切なポイントを以下にまとめます。

この記事を参考に、あなたのWebページももっと見やすく、読みやすくなるように、実際に手を動かして文字サイズを調整してみましょう。