HTMLで文字のサイズを変更、指定する方法！

2025年12月26日

侍テック編集部

今回はHTMLで文字の大きさを変える方法について、解説をしていきます！

HTMLではfontタグを、CSSではfont-sizeプロパティで指定した文字の大きさを変えることが出来ます。HTMLの初心者の方は、このラジオボタンをどのように作るか分からない方もいるのではないでしょうか？

この記事では、

fontタグ、bigタグ、smallタグの使い方
CSSで文字のサイズを変える方法

について解説をしていきます。HTMLを学び始めた方でも分かりやすいように解説していくので、ぜひご覧ください！

HTMLで文字の大きさを変える方法を学ぶことは、Web制作の基本スキルの一つです。しかし、HTMLやCSSの基礎を学ぶだけでなく、これからの時代に求められる生成AIの知識を組み合わせることで、より一層の収入アップを目指すことができます。もし、「自分一人では難しいかも…」と感じたなら、専門的なサポートが受けられる環境を活用してみるのも一つの手です。

このセミナーでは、稼ぐための具体的なノウハウを学べます。机上の空論は一切なしで、実践的なスキルを凝縮してお伝えします。興味がある方は、ぜひセミナーの詳細を確認して、自分に合った方法を探してみませんか？

セミナーの詳細をみる

fontタグの使い方

それではまずは基本的なfontタグの使い方から見ていきましょう。こちらのコードをご覧ください。

<html>
    <p><font size="1">Hello</font></p>
    <p><font size="3">Hello</font></p>
    <p><font size="5">Hello</font></p>
    <p><font size="7">Hello</font></p>
</html>

実行結果

このコードでは、fontタグで囲った「Hello」という文字に対して、size属性で文字の大きさを指定しています。size属性で指定する大きさは、1〜7の間で指定するように決められています。

これが、fontタグを使った文字のサイズを決める基本的な方法です。

bigタグとsmallタグの使い方

文字のサイズをタグで変える方法として、bigタグとsmallタグを使う方法もあります。こちらのコードをご覧ください。

<html>
    <p><big>大きめ</big></p>
    <p>普通</p>
    <p><small>小さめ</small></p>
</html>

実行結果

このコードではbigタグとsmallタグで、文字を一回り大きめにするか、一回り小さめにするかを決めることが出来ます。ただ、このタグを使ってしまうと、CSSで文字の大きさを管理するよりも管理が厄介になってしまいます。

どうしてもHTMLだけで文字のサイズを変えたい場合はfontタグとsize属性を使っていきましょう。

CSSで文字のサイズを変える方法

次にCSSを使って文字のサイズを変える方法について見ていきましょう。先程まで解説してきた方法よりも、より一般的に使われている方法になります。

font-sizeプロパティ

まずは、font-sizeプロパティの使い方を見ていきましょう。こちらのコードをご覧ください。

<style>
    .title {
        font-size: 32px;
    }

    .body {
        font-size: 12px;
    }
</style>
<html>
    <p class="title">This is title.</p>
    <p class="body">This is body. This is body. This is body.</p>
</html>

実行結果