HTMLのフォントサイズを設定するCSSの書き方を解説

コラム

COLUMN

HTMLフォントサイズ

HTMLのフォントサイズを設定するCSSの書き方を解説

HTML/CSS 基礎

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タグは非推奨とされています。

理由は主に3つです。

1.「Webページの構造はHTML、装飾はCSS」と役割を分離することが重要

webページ構造はHTML、装飾はCSSと役割を分離する考え方が定着し、HTML のタグに装飾の設定を行わないようになったこと。

2.font タグは、標準的な HTML 要素ではない

標準的なHTML要素ではないため、検索エンジンのインデックス作成などに影響を与える可能性があること。

3.CSSの方が柔軟な設定ができる

font タグは、文字の大きさ、色、フォントなどを設定できるが、CSSの設定のほうが柔軟に設定をすることができること。

以上のようにフォントサイズのようにWebページの装飾を設定したいときはCSSを使うことが望ましいです。

HTMLで好みのフォントサイズにするため、CSSを使いこなそう!

HTMLでフォントサイズの設定をする方法を紹介しました。

方法は3つ。

・HTMLファイルの各種タグ内にフォントサイズの情報を書く
・HTMLファイルにheadタグにCSS(フォントサイズの情報)を書く
・HTMLファイルからCSSファイルのフォントサイズの情報を読み込む

いずれも長所と短所があり、自分が作成するものにあわせて適切な書き方を選ぶ必要があります。

今回ご紹介した内容を参考に、自分好みのフォントサイズの設定をしてください。

HTMLやCSSはフロント言語

さて、今回ご紹介したフロント言語は副業を始める時や、エンジニアとして活躍していきたい人にとっては必ずマスターしなければならない言語になります。

独学でもし、手が止まっている方は時間の無駄になっているかもしれません…!

実は、エンジニア転職やエンジニアとしての副業は、早いうちからトライした方が良いです。

学習で手が止まる回数多くなっている人は、テックアイエスの無料プログラミング体験ぜひきてみてくださいね。

プログラミングの無料体験はこちらから