注目キーワード

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

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

HTMLで文字の大きさを変える場合、<font>タグを利用する方法があります。本記事では<font>タグを使ったフォントサイズの変更方法を解説します。また、HTML要素の装飾を担うCSSでの変更方法も併せて紹介します。

font要素は文字のサイズや色を指定するHTML要素です。「size」属性を指定することで文字の大きさ、「color」属性で文字色を、「face」属性でフォントの種類を設定できます。

目次

HTMLでフォントサイズを変更する

font sizeの使用方法

HTMLでは、フォントのサイズ・色・種類を変更する場合に<font>タグを使用します。そのうち、フォントのサイズを変更する場合は、<font>タグにsize属性を付加して大きさを指定します。

<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>

注意点

HTMLでは<font>タグを使用してフォントサイズを変更できますが、HTMLは本来、コンピュータがテキスト構造を理解できるようタグをつける言語です。文字のデザインを指定する場合はスタイルシート言語であるCSSでの記述が推奨されています。

CSSが標準利用されるまでは<font>タグが用いられていましたが、HTMLとデザイン指定をするCSSの使い分けが行われ、HTMLで行われていたフォント指定はCSSで代替されるようになりました。ただ、モバイル端末のなかにはCSS未対応のものもるため、そういった場合に<font>タグが使用されます。

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

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

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

CSSでフォントサイズを変更する方法

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

【基本構文】

font-size:数値+単位;

フォントサイズの単位

フォントサイズの単位には「px」、「em」、「rem」、「%」の4種類があります。それぞれの特徴を説明します。

px

pxは縦のピクセルを表し、親要素のフォントサイズに関係なく、デバイスやブラウザに依存しない固定値となります。ロゴや画像に適しています。ただ、レスポンシブ対応には不向きです。今後はレスポンシブ対応のWebページが増えていくことが予想されるので、pxを使う機会は減るでしょう。

em

emは親要素のフォントサイズに対して何倍かを表現する単位です。そのため、親要素のサイズが変われば子要素のフォントサイズも自動的に変わります。サブメニューなどに適してており、%と同様に相対的な表現になります。親要素のフォントサイズが16pxであれば、1emは16px、2emは32pxのようになります。

rem

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

%

%は親要素のフォントサイズに対する倍率で表現する単位です。親要素のフォントサイズが変われば子要素のフォントサイズも自動で変更されます。レスポンシブ対応しており、これもサブメニューに適しています。親要素を指定しない場合は、基本的に16pxとなります。

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

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

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

【HTML実行コード】

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

h1タグ内のテキストのフォントサイズを40ピクセルに指定します。

HTMLファイルにCSSファイルを組み込む方法

CSSファイルの記述内容をHTMLファイルのタグ内に組み込む方法です。Webページ内で共通の設定をする場合に適しています。

【HTML実行コード】

<head>
 <style>
 h1{
  font-size:40px;
 }   
 </style>
</head>

<body>
 <h1>フォントサイズを40ピクセルに指定する</h1>
</body>

headタグ内にstyleタグとフォントサイズの設定を記述します。

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

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

【HTML実行コード】

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

【CSS実行コード】（style.css）

h1{
 font-size:40px;
}

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

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

最後に

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

HTML/CSS部門

HTMLの勉強方法は？

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

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

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

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

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

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

【おまけ】そのほかの属性

文字色を指定する方法

文字色は、color属性を用いて、ハッシュ（#）を先頭に置いた6桁のカラーコード、または、redやgreenといった、カラーネームで指定します。

色の指定方法

color="#ff0000"
color="red"

カラーコード

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

フォント名を指定する方法

字体の指定は、faceの属性を用いて行います。左から優先順にカンマ(,)で並べることができ、複数指定できます。フォントを指定した場合でも、そのデバイスにフォントが未対応の場合は表示されません。

フォントの指定方法

font face="候補1,候補2,候補3"

【HTML実行コード】

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    フォントのサイズ・色・種類を指定しないテキスト
    <br>
    <font color="#0000ff">カラーを青色に指定したテキスト
    <br>
    <font size="5" color="red">フォントサイズを5でカラーネームを赤色に指定したテキスト</font>
    <br>
    <font size="2" color="black" face="ＭＳ 明朝">サイズを2でカラーネームを黒色でフォントを明朝体に指定したテキスト</font>
    <br>
    <font size="6" color="#00ff00" face="ＭＳ Ｐゴシック,ＭＳ ゴシック">フォントサイズを6でカラーを緑色、字体をゴシック体に指定したテキスト</font>
    </font>
  </body>
</html>

【実行結果】

     

Otherカテゴリの最新記事