注目キーワード

【HTML】フォントサイズの指定方法をサンプルコードで解説

  • 2024.12.16
       
【HTML】フォントサイズの指定方法をサンプルコードで解説

HTMLで文書を作っているとき、見出しのテキストや段落の中の目立たせたい部分などで、「文字サイズを変更したい！」と思ったことはありませんか？

この記事では、HTMLで文字サイズを変更する方法をサンプルコードと実際のHTMLの実装結果付きで解説していきますので、ぜひ参考にしてみてください！

目次

HTMLのタグで文字サイズを変更する（従来の方法）

<font>タグを使用して文字サイズを指定する（※現在は非推奨です！）

HTMLだけで文字のサイズを変更したい場合、<font>タグを使用することで文字サイズを変えることができます。

古いバージョンのHTMLでは、表示するテキストのサイズ・色・書体を変更する場合に<font>タグを使用していました。

<font>タグはそのまま入れただけでは何も起こりませんが、size属性を指定することで、文字の大きさを変更することができるタグです。

ただし、<font>タグは現在のHTMLの標準仕様では廃止されています。そのため、たとえ現在使われているWebブラウザで動くからといっても、webページに使用するべきではありません。

現在の仕様で推奨されている文字サイズの指定方法については、後ほど詳しく解説していきます。

<font>の使用方法

<font>タグを使用する場合は以下のように書きます。

<font size="大きさ">テキスト</font>

文字サイズの指定方法

サイズ指定方法は、上記のコードの”大きさ” の部分に1（最小）～7（最大）の数値を指定します。また、このほかにも+、-といった符号を使用して相対値で指定する方法もあります。

基準のフォントサイズは3となるため、0だと3、-1だと2、+1 だと4というように表現できます。この場合でも、1～7に収まるようにする必要があります。

<font >タグでフォントサイズを指定する場合、そのページを訪れたユーザーのディスプレイのサイズや、ブラウザ内の設定によっても表示サイズが異なることがあります。

<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>
<br>
<font size="-2">フォントサイズ-2</font>
<br>
<font size="-1">フォントサイズ-1</font>
<br>
<font size="+0">フォントサイズ+0</font>
<br>
<font size="+1">フォントサイズ+1</font>
<br>
<font size="+2">フォントサイズ+2</font>
<br>
<font size="+3">フォントサイズ+3</font>
<br>
<font size="+4">フォントサイズ+4</font>

【実装結果】

フォントサイズ1
フォントサイズ2
フォントサイズ3
フォントサイズ4
フォントサイズ5
フォントサイズ6
フォントサイズ7
フォントサイズ-2
フォントサイズ-1
フォントサイズ+0
フォントサイズ+1
フォントサイズ+2
フォントサイズ+3
フォントサイズ+4

<font>タグの使用に関する注意点

旧来のHTMLでは<font>タグを使用してフォントサイズを変更できましたが、HTMLは本来、コンピュータが文書構造を理解できるように文書内の要素を定義するタグをつける、マークアップ言語です。

そのため、HTMLにおける文字のサイズやデザインなどといった文書の装飾の指定については、文書の装飾を定義するスタイルシート言語のCSS（Cascading Style Sheets）での記述が推奨されています。

CSSが標準利用されるまでは<font>タグが用いられていましたが、HTMLとデザイン指定をするCSSの使い分けが行われ、HTMLで行われていたフォント指定はCSSで代替されるようになりました。

現在でも<font>タグは、最新のHTML標準仕様である HTML Living Standards に対応していない古いWebブラウザで閲覧される場合を考慮して残されている場合がありますが、これからwebページを作成するといった場合には使わないほうが良いでしょう。

プログラミングの基礎からサイト制作まで
↓実践力が身につくプログラミングスクール↓

ITエンジニアの学校 テックマニアスクール

≫モニター割引キャンペーン実施中！≪

CSSでフォントサイズを変更する（こちらを使いましょう！）

先ほど述べたとおり、現在では文字のサイズや色・書体などの指定をするのはHTMLのタグではなくCSSの役目です。そのため、ここからはCSSでの文字サイズの指定・変更の方法について説明していきます。

CSSでフォントサイズを変更する場合は font-size プロパティを用います。

【基本構文】

font-size:数値+単位;

font-sizeプロパティで使用される単位

文字サイズを指定する際、 font-size プロパティで使用できる単位は何種類かあります。

単位の種類は、固定された値を基準とした絶対的な長さ（絶対長）で指定するもの、変動することがある値を基準とした相対的な長さ（相対長）で指定するものの2種類に分かれます。

絶対長、相対長の単位で代表的なものはそれぞれ以下のとおりです。

  • 絶対長
    • px
  • 相対長
    • em
    • rem
    • %
    • vw

それでは、これらの単位について個別に見ていきましょう。

px

pxは画面を構成するピクセル（pixel; 画素）に由来する単位です。1px は1inchの 1/96 と定義されています。長さが固定されているため、ページを表示するWebブラウザのウインドウサイズを変えたりしても見た目が変わらず、一定の大きさで表示することができます。
その代わり、ウインドウ・画面の大きさや縦横比によって見た目を変化させるレスポンシブデザインに取り入れるには、少々工夫が必要になる場合があります。

em

emは親要素のfont-sizeの値に対する倍率を表す単位です。そのため、親要素のfont-sizeプロパティが変われば、子要素のフォントサイズも自動的に変わります。
親要素のフォントサイズが16pxであれば、1emは16px、2emは32pxのようになります。

rem

remは「root em」の略称で、CSS3から導入された新しい単位です。HTMLのルート要素のフォントサイズを基準とした倍率を示す単位で、HTMLのルート要素のフォントサイズが変わるとすべての要素のフォントサイズが自動的に変更されます。
HTML のルート要素のフォントサイズが16pxであれば、0.5remは8px、2remは32pxとなります。
なお、HTMLのルート要素とは <html> 要素のことです。

%

%は親要素のフォントサイズに対する倍率を百分率（% パーセント）で表現する単位です。親要素のフォントサイズが変われば子要素のフォントサイズも自動で変更されます。
em や rem と同様に相対長の単位なので、親要素から段階的に文字の大きさを変更したい場合などに便利です。

vw

vw は”viewport’s width”の頭文字を取った単位で、ビューポートの横幅（width）に対する倍率を示ししています。
vwのもとになっているビューポート（viewport）とは、Webブラウザの中でウィンドウに表示されている領域を指す用語です。1vw はビューポートの横幅の1%になります。そのため、ビューポートの横幅が 600px だった場合、 1vw = 6px, 4vw = 24px となります。
PCのwebブラウザの場合、ウィンドウの大きさを変えるとビューポートの大きさもそれに合わせて変わるため、vwの基準値が変動します。
vwでフォントサイズを指定した場合、このように画面幅によって文字のサイズが変わるため、レスポンシブデザインへの対応はスムーズになります。

以上が、font-sizeプロパティで使用頻度の高い単位です。

レスポンシブ対応が主流になった現在では、ルート要素の文字サイズにvwを使用して継承先の子要素に%やemなどを使用するなど相対長の単位を使うことが多くなってきていますが、使いどころや使い方を選べば絶対長の単位であるpxも有用な単位です。

Webページのレイアウトによって適した単位を選択しましょう。

CSSでfont-sizeプロパティを指定する

HTMLファイルのタグ内に組み込む方法

タグ内にフォントサイズに関する情報を組み込みます。

【HTML実行コード】

<p style="font-size:40px;">フォントサイズを40ピクセルに指定する</p>

pタグ内のテキストのフォントサイズを40pxに指定します。ページを閲覧している端末の画面の大きさやウィンドウの大きさに関係なく40pxで表示されます。

HTMLファイルにCSSファイルの情報を読み込む

HTMLファイルにCSSファイルを読み込んで反映する方法です。複数のWebページで設定を統一する場合に適しています。

【HTML実行コード】

<head>
    <link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
    <p>フォントサイズを40ピクセルに指定する</p>
</body>

【CSSファイル】（style.css）

p {
    font-size:40px;
}

【実装結果】

フォントサイズを40ピクセルに指定する

headタグで「style.css」というCSSファイルを読み込むことで、HTMLファイルを開くとCSSファイルで設定した内容が読み込まれます。

作成するWebページによってどの方法を用いるか選択しましょう。

1ページだけのサイトを作る場合は、<style>タグ内に直接記述していく方法のほうが読み込みが速くなる場合があります。
一方で、複数のページを持つサイトを作る場合は、cssファイルにスタイルの設定をまとめることでデザインを統一し、設定を管理しやすくなります。

【おまけ】文字のスタイルを変更する様々なCSSプロパティ

文字色を指定する（colorプロパティ）

文字の色を変更する場合は、 colorプロパティを使用します。指定する際の書き方にはいくつかの方式がありますので参考にしてください。

【表記例】（いずれも赤色を表しています）

color: #ff0000; /* 16進法のカラーコードによる表記 */
color: red; /* 色の名称による表記 */
color: rgb(255, 0, 0); /* 10進法による表記 */

カラーコード

カラーコードは # の右の6文字からなる表記です。左から2桁ずつ赤、緑、青を意味し、色の強さを00～ffまでの16進数で表現します。00 に近いほど要素が弱く、ff (10進法で255) に近いほど強くなります。

書体（文字のデザイン）を指定する（font-familyプロパティ）

字体の指定は、font-familyプロパティを使用して行います。プロパティの値には複数のフォントをカンマ（，）区切りで指定することができ、左に並んでいるものほど優先的に読み込まれます。

複数のフォントを指定することで、万が一どれかが読み込めなかった場合にも他のフォントを使用することができるようになります。

また、特定のフォントを指定するだけでなくサンセリフ体（sans-serif）やセリフ体（serif）といった大まかな指定を行うことも可能です。

【基本構文】

font-family: "フォント名1", "フォント名2", "フォント名3", ..., sans-serif, serif

【HTML実行コード】

<p>フォントのサイズ・色・種類を指定しないテキスト</p>
<p style="color: #0000ff">カラーを青色に指定したテキスト</p>
<p style="font-size: 20px; color: red">フォントサイズが20pxでカラーネームを"red"に指定したテキスト</p>
<p style="font-size: 10px; color: black; font-family:'ＭＳ　Ｐ明朝', 'ＭＳ　明朝', serif">フォントサイズが10pxでカラーネームが"black"でフォントを明朝体に指定したテキスト</p>
<p style="font-size: 2.4rem; color: green; font-family: 'ＭＳ Ｐゴシック','ＭＳ ゴシック'">フォントサイズが2.4remでカラーが"green"で書体をゴシック体に指定したテキスト</p>

【実行結果】

フォントのサイズ・色・種類を指定しないテキスト

カラーを青色に指定したテキスト

フォントサイズが20pxでカラーネームを”red”に指定したテキスト

フォントサイズが10pxでカラーネームを黒色でフォントを明朝体に指定したテキスト

フォントサイズが2.4remでカラーを緑色、字体をゴシック体に指定したテキスト

最後に

ここまでHTMLの<font>タグで文字のサイズを変える方法やCSSでの変更方法を紹介しました。記事内で触れたとおり、現在は<font>タグの仕様は推奨されていません。特別な理由がない限りはCSSの「font-size」プロパティでの変更がおすすめです。

HTML/CSS部門

HTMLの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、HTMLに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

＜テックマニアの特徴＞
・たしかな育成実績と親身な教育　～セカンドキャリアを全力支援～
・講師が現役エンジニア　～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート　～「わからない」を徹底解決～
・実務ベースでスキルを習得　～実践的な凝縮カリキュラム～

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。

     

Otherカテゴリの最新記事