バナー画像

HTMLで文字の大きさを変更する処理は、どんなサイトを作成するにせよ必須と言えるでしょう。

本記事では、HTMLで文字の大きさを変更するやり方について、HTML4までの手法とHTML5以降で推奨される手法の両方をご紹介したいと思います。

HTMLで文字の大きさを変更する方法


HTMLで文字の大きさを変更する方法として、fontタグのsize属性で変更する方法とCSSのfont-sizeプロパティで指定する2種類の方法に大きく分けられます。

fontタグのsize属性を利用する

まずHTML4までの主流の方法として、fontタグにsize属性を指定して文字の大きさを変更する方法が一般的でした。

<font size="3">サンプルテキストです。</font>

size属性に指定可能な値は1~7までの整数で、1が一番小さく、7が一番大きなフォントで表示されます。

CSSのfont-sizeプロパティを利用する

HTML5からはfontタグが非推奨扱いとなり、文字の大きさを変更したい場合には、CSSにfont-sizeプロパティを指定する方法が推奨されるように変更となりました。

html

<p class="sample">サンプルテキストです。</p>

css

sample {
  font-size: 10px;
}

このように、HTML側にはクラスを指定し、指定したクラスに対してfont-sizeプロパティを設定する方法です。

HTML4までの主流fontタグで文字の大きさを変更しよう


では実際にHTML4までの主流fontタグを使って、文字の大きさを変更してみたいと思います。

fontタグでのサイズ変更

fontタグのsize属性に1~7までの数値を設定して表示してみましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>html size modify Sample</title>
</head>
<body>
  <font size="1">サイズ1のテキスト</font><br>
  <font size="2">サイズ2のテキスト</font><br>
  <font size="3">サイズ3のテキスト</font><br>
  <font size="4">サイズ4のテキスト</font><br>
  <font size="5">サイズ5のテキスト</font><br>
  <font size="6">サイズ6のテキスト</font><br>
  <font size="7">サイズ7のテキスト</font>
</body>
</html>

ブラウザに表示すると下記の通りです。

HTML5から推奨のCSSデザインで文字の大きさを変更しよう


次にHTML5から推奨されているデザイン部分は外部CSSに切り分ける方法で、文字の大きさを変更してみたいと思います。

font-sizeプロパティでのサイズ変更

font-sizeプロパティに指定出来る値は、複数存在します。

パーセント指定

ブラウザが設定している標準文字サイズからのパーセンテージで指定する方法です。

index.html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>html size modify Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p class="class1">50%指定のテキストです。</p>
  <p>サイズ指定なしのテキストです。</p>
  <p class="class2">200%指定のテキストです。</p>
</body>
</html>
style.css
.class1 {
  font-size: 50%;
}

.class2 {
  font-size: 200%;
}

Webブラウザに表示した結果が下記の通りです。

基準値指定

基準値指定では、「xx-small」「x-small」「small」「medium」「large」「x-large」「xx-large」の7段階の値を設定することで、ブラウザが定めている基準値に沿った大きさの文字が表示されます。

index.html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>html size modify Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p class="class1">xx-small指定のテキストです。</p>
  <p>サイズ指定なしのテキストです。</p>
  <p class="class2">xx-large指定のテキストです。</p>
</body>
</html>
style.css
.class1 {
  font-size: xx-small;
}

.class2 {
  font-size: xx-large;
}

Webブラウザに表示した結果が下記の通りです。

ポイント指定

ポイントと呼ばれる単位で、文字の大きさを指定することが可能です。

特徴として、画面の解像度や広さに影響を受けないため、どんな端末で表示した場合でも同じように見えます。

index.html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>html size modify Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p class="class1">5pt指定のテキストです。</p>
  <p>サイズ指定なしのテキストです。</p>
  <p class="class2">20pt指定のテキストです。</p>
</body>
</html>
style.css
.class1 {
  font-size: 5pt;
}

.class2 {
  font-size: 20pt;
}

Webブラウザに表示した結果が下記の通りです。

ピクセル指定

ピクセルと呼ばれる単位で、文字の大きさを指定することが可能です。

ポイント指定とは異なり、画面解像度により文字の見え方に影響を与えます。

index.html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>html size modify Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p class="class1">5px指定のテキストです。</p>
  <p>サイズ指定なしのテキストです。</p>
  <p class="class2">20px指定のテキストです。</p>
</body>
</html>
style.css
.class1 {
  font-size: 5px;
}

.class2 {
  font-size: 20px;
}

Webブラウザに表示した結果が下記の通りです。

エム指定

ブラウザが設定している標準文字サイズを1emとして、大きさを設定することが可能です。

基準より大きい場合は2em、3emなどと1emより大きい値を指定し、小さい場合は0.5emなどのように値を設定します。

index.html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>html size modify Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p class="class1">0.5em指定のテキストです。</p>
  <p>サイズ指定なしのテキストです。</p>
  <p class="class2">2em指定のテキストです。</p>
</body>
</html>
style.css
.class1 {
  font-size: 0.5em;
}

.class2 {
  font-size: 2em;
}

Webブラウザに表示した結果が下記の通りです。

さいごに:HTML5からは文字の大きさもCSSで変更しよう


本記事では、HTMLでの文字の大きさを変更する方法について、HTML4までの主流な方法とHTML5から推奨される方法をご紹介してきました。

HTML5からはfontタグ自体が非推奨のタグとして設定されています。

まだまだfontタグを利用したソースコードは多数存在しますが、新規で作成するプログラムではCSSのfont-sizeプロパティを利用して文字の大きさを変更するように意識していきましょう。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。