記事の監修者
1000万PVを超える新規メディアの立ち上げを開発責任者として行う。株式会社ウィルゲートを退社後、民泊の運用代行業者のTwistを設立し上場企業に売却。2016年株式会社Market Drive（現テックアイエス）を設立し、取締役副社長に就任。200万ダウンロードを超えるアプリを開発。現在はプログラミングスクールのカリキュラム制作も担当。現場でのエンジニアリングと経営の両面を支えている。
HTMLでWebページを作成しているとき、文字のフォントを大きくしたい、もしくは小さくしたいと思うことは多いです。
これが、MicrosoftOfficeのExcelやWordであれば、フォントサイズの設定ボタンをクリックするだけで調整できます。
しかし、HTMLではそうはいきません。
フォントサイズを変更するために、タグにフォントサイズを調整するための設定を追記する必要があります。
本記事では、HTMLでフォントサイズを変更する方法とHTMLの書き方を紹介します。
CSSでフォントサイズを設定する
HTMLでフォントサイズをCSS（Cascading Style Sheets、カスケーディング・スタイル・シート）で設定します。
CSSとは、Webページの見た目を定義する技術のことです。
HTML ファイルに記述された内容（構造）とは別に、CSSファイルにはWebページの見た目に関する情報が記述されています。
テキストのフォントサイズや色、余白など複数のルールを設定することで、ページ全体のレイアウトを決定することができます。
CSSの書き方は下記の3種類です。
・HTMLファイルの各種タグ内にフォントサイズの情報を書く
・HTMLファイルにheadタグにCSS（フォントサイズの情報）を書く
・HTMLファイルからCSSファイルのフォントサイズの情報を読み込む
それぞれ解説していきます。
HTMLファイルの各種タグ内にフォントサイズの情報を書く
h1タグなど各種タグ内にフォントサイズの情報を記載することができます。
文章内の一部などピンポイントでフォントサイズを設定するときに適した書き方です。
HTMLの書き方は下記の通りです。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
h1タグ内の「style=”font-size: 50px;”」がフォントサイズの設定です。
このh1タグ内のテキストのフォントサイズが50ピクセルになります。
HTMLファイルにheadタグにCSS（フォントサイズの情報）を書く
CSSファイルに記述した内容をHTMLファイルのheadタグ内に書くことで、フォントサイズを設定できます。
これは、1つのWebページで共通の設定をするときに適した書き方です。
HTMLの書き方は下記の通りです。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
headタグ内にstyleタグとフォントサイズの設定を記載します。
styleタグ内の内容は、「h1タグのフォントサイズは50ピクセル」という設定を表しています。
そして、bodyタグ内でh1タグを記載するとheadタグに記載した設定を参照するため、画面に表示される文字は50ピクセルになります。
HTMLファイルからCSSファイルのフォントサイズの情報を読み込む
HTMLファイルからCSSファイルを読み込み、HTMLファイルにフォントサイズの設定を反映します。
これは、Webサイトなど複数のWebページで設定を統一するときに適した書き方です。
今回の例として、h1タグのフォントサイズを50ピクセルに設定します。 HTMLは下記のように書きます。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
headタグの内容で「style.css」というCSSファイルを読み込みます。
続いて、CSSファイルは下記のように「h1タグのフォントサイズは50ピクセル」という情報を書きましょう。
h1 { font-size: 50px; } これでHTMLファイルを開くとCSSファイル設定内容が読み込まれ、画面に表示されるフォントサイズが50ピクセルとなります。
以上のように設定方法は3つです。
どの方法を採用するかは作成するWebページの数や大きさによります。
自分が作るものにあわせて書き方を選びましょう。
フォントサイズの単位は4種類
フォントサイズの単位は「px」、「em」、「rem」、「%」の4種類です。
それぞれの特徴は下記の通りです。
px
pxはピクセルを表します。
1px はデバイスに依存しない固定の大きさを表します。
pxを使用すると、親要素のフォントサイズと関係なく、固定の大きさでフォントサイズを指定することができます。
例えば、ロゴや固定のサイズを持った画像などに適しています。
em
emは親要素のフォントサイズの何倍かを表します。
emを使用すると、親要素のフォントサイズが変更されると、子要素のフォントサイズも自動的に変更されます。
サブメニューなどに適している単位です。
rem
remは「root em」の略で、HTML のルート要素 (HTML 要素) のフォントサイズの何倍かを表します。
remを使用すると、HTML のルート要素のフォントサイズが変更されると、それ以下の全ての要素のフォントサイズも自動的に変更されます。
すべてのテキストを同じサイズにする必要がある場合に適しています。
%
%は親要素のフォントサイズのパーセンテージを表します。
%を使用すると、親要素のフォントサイズが変更されると、子要素のフォントサイズも自動的に変更されます。
emと同様にサブメニューなどに適しています。
これらの単位は、ウェブページのレイアウトを調整することができるので、適切な単位を使用することが大切です。
また、「em」や「rem」や「%」を使用すると、フォントサイズのレスポンシブな調整ができるため、これらを使用することが好ましいです。
fontタグは非推奨
フォントサイズの設定を検索すると「fontタグでフォントサイズを設定する」という記事をまだ見かけると思います。
しかし、fontタグは非推奨とされています。
理由は主に３つです。
1．「Webページの構造はHTML、装飾はCSS」と役割を分離することが重要
webページ構造はHTML、装飾はCSSと役割を分離する考え方が定着し、HTML のタグに装飾の設定を行わないようになったこと。
2．font タグは、標準的な HTML 要素ではない
標準的なHTML要素ではないため、検索エンジンのインデックス作成などに影響を与える可能性があること。
3．CSSの方が柔軟な設定ができる
font タグは、文字の大きさ、色、フォントなどを設定できるが、CSSの設定のほうが柔軟に設定をすることができること。
以上のようにフォントサイズのようにWebページの装飾を設定したいときはCSSを使うことが望ましいです。
HTMLで好みのフォントサイズにするため、CSSを使いこなそう！
HTMLでフォントサイズの設定をする方法を紹介しました。
方法は３つ。
・HTMLファイルの各種タグ内にフォントサイズの情報を書く
・HTMLファイルにheadタグにCSS（フォントサイズの情報）を書く
・HTMLファイルからCSSファイルのフォントサイズの情報を読み込む
いずれも長所と短所があり、自分が作成するものにあわせて適切な書き方を選ぶ必要があります。
今回ご紹介した内容を参考に、自分好みのフォントサイズの設定をしてください。
HTMLやCSSはフロント言語
さて、今回ご紹介したフロント言語は副業を始める時や、エンジニアとして活躍していきたい人にとっては必ずマスターしなければならない言語になります。
独学でもし、手が止まっている方は時間の無駄になっているかもしれません…！
実は、エンジニア転職やエンジニアとしての副業は、早いうちからトライした方が良いです。
学習で手が止まる回数多くなっている人は、テックアイエスの無料プログラミング体験ぜひきてみてくださいね。
全国どこにいても学べる！超優良のプログラミングスクールまとめました【国内完全網羅】現役エンジニアが厳選したおすすめのプログラミングスクール
自分の住んでるエリアでプログラミングスクールを探したい⭐️
エリア別で、おすすめのプログラミングスクールをまとめました。
ぜひ参考にしてみてくださいね。
北海道 / 東北
関東
群馬 / 栃木 / 埼玉 / 茨城 / 東京 / 千葉 / 神奈川
中部
福井 / 石川 / 岐阜 / 愛知 / 富山 / 長野 / 山梨 / 静岡 / 新潟
近畿
兵庫 / 京都 / 大阪 / 滋賀 / 奈良 / 三重 / 和歌山
