• HOME
  • HTML/CSS
  • 【HTML/CSS】文字の大きさを変える方法(大きさの目安も)
  • HTML/CSS
  • css
  • 文字サイズ

【HTML/CSS】文字の大きさを変える方法(大きさの目安も)

【HTML/CSS】文字の大きさを変える方法(大きさの目安も)

「HTMLやCSSで文字の大きさを変える方法を網羅的に知りたい。また、どれくらいのpxの合わせればいいかも把握したい。」と思ったことはありませんか？

この記事では、「HTML/CSSで文字の大きさを変える方法」「文字の大きさはどれくらいにすればいいのか」「文字の大きさを変更する例」の3つをそれぞれ解説していきます。

それでは、まずHTMLとCSSで文字の大きさを変える方法をみていきましょう。

【HTML/CSS】文字の大きさを変える方法

文字の大きさを変える方法として以下の2つを解説します。

  1. font-sizeを使う
  2. smallタグを使う

font-sizeを使う

文字の大きさを変える一般的な方法として、CSSの「font-size」を使うということが挙げられます。

コードはたとえば、以下のように書きます。

<p id="fifteen">15pxです。</p>
<p id="twenty">20pxです。</p>
#fifteen {
  font-size: 15px;
}
#twenty {
  font-size: 20px;
}

出力すると以下の通りになります。

上の例では、単位を「px(ピクセル)」にしました。

※pxは、画面の中の、色をもった一番小さい単位のことです。

pxのほかに、「em」「rem」や「%」でも文字のサイズを指定できます。

pxは大きさを絶対指定しますが、これら3つは相対指定します。

「em」「rem」「%」の3つの単位をそれぞれ説明していきます。

まず、emに関してです。

emは、「1em=親要素の1文字の大きさ」に相当します。

たとえば、2emだと親要素の文字の大きさの2倍の文字の大きさになります。

0.5emだと、親要素の文字の大きさの0.5倍(半分)になります。

remは一番上の階層にある要素の文字の大きさを1とします。

たとえば、一番上の階層にある要素の文字の大きさが20pxだとします。

ここで、その要素より下の階層にある要素内の文字の大きさを0.5remとします。

すると0.5remで指定した文字は10pxになるということです。

%は親要素の文字の大きさを基準とします(つまりemと同じです)。

たとえば、親要素の文字の大きさが16pxだとします。

変えたい要素の文字の大きさを50%と指定します。

すると、その部分の文字の大きさは、8px(16pxの50%)になるわけです。

文字の大きさを変更するときはCSSのfont-sizeプロパティを使うということ、また、指定する単位が複数あるということを覚えておきましょう。

smallタグを使う

フォントの大きさを変える方法として、HTMLの「small」タグを使うという手段も挙げられます。

smallタグを使うと文字が小さくなります。

文字が小さくなるので、注釈などに利用します。

コードを以下のように書いてみます。

<p>
  ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
  ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</p>
<small>これは注釈です。これは注釈です。これは注釈です。</small>

出力すると以下のようになります。

通常の文字より小さくなりました。

※注意点として、smallタグの文字のブラウザの環境に左右されます。

(※補足)「fontタグ」や「bigタグ」でも文字の大きさは変えられましたが、HTML5よりこれらのタグは廃止されました。

以上、文字を小さく表示するsmallタグがあるということでした。

文字の大きさはどれくらいにすればいいのか

だいたい標準サイズの文字は一般的に14~16pxくらいです。

デフォルトの文字の大きさは16pxなので、そのままでも上記の範囲に入っています。

標準サイズの文字はとりあえずは16pxでいいといえるでしょう。

ただし、つきつめた話をすると、文字の大きさの目安は状況によって異なります。

ユーザーや環境ごとに見やすい文字のpx数があるということです。

また、どのブラウザで見ているのか、どの機器で見ているのかの環境にも左右されます。

文字の大きさをこだわりたい人は、伝えたいユーザーを想定して、実際にいろいろな環境でテストしてみるのがよいでしょう。

補足として、文字の大きさもSEO(検索エンジン最適化)に関係する可能性があります。

文字の大きさを見やすくすることで、ユーザーが使いやすいWebページになります。

そうすることで、ユーザーにとって良いコンテンツとみなされるためです。

以上、文字のサイズの目安についてでした。

文字の大きさを変更する例

文字の大きさを変更する例としてヘッダーの例を見てみましょう。

ヘッダーで重要なキーワードだけ大きくする例です。

下の画像を見てください。

<header>
  <h1>これは<span>ヘッダー</span>の<span>文字</span>です</h1>
</header>
header {
  width: 100%;
  height: 500px;
  position: relative;
  background-color: whitesmoke;
}
h1 {
  display: inline-block;
  position: absolute;
  top: 77px;
  left: 11%;
}
h1 span {
  font-size: 53px;
}

目立たせたいキーワードの文字の大きさを、ほかの文字にくらべて大きくしています。

ちなみに、文字のサイズを変えたい部分にspanタグを使っています。

ヘッダーで伝えたいワードの文字を特に大きくするという手法を参考にしてみてください。

まとめ

いかがでしたでしょうか。

文字の大きさを変える方法に関して理解が深まったことでしょう。

文字の単位や、見やすい文字の大きさはしっかりおさえておきましょう。

上記の内容を一通り理解したら、実際のコードを書いてみてください。

今回の知識が役に立てば幸いです。