CSSでフォントサイズを変更する方法を徹底解説！

2024.01.06

「サイトの雰囲気がなんか違う、、」
「もっとカッコイイwebサイトを作りたい！」
HTMLやCSSの学習をしている際にそう思ったことはありませんか？

CSSでフォントサイズや色などを指定することで、
初心者の方でも簡単にサイトの見た目を変化させることができます！

CSSでは「font-size」以外にも「font-◯◯」というタグが多くあります。
それらをうまく使いこなせるようになれば、ユーザーに与える印象を大きく変えることができます。

この記事では、様々なfontタグの種類と使い方を丁寧に説明していきます。
サイトの雰囲気を大きく左右する、色々なfontタグをマスターしましょう！

フォントサイズの変え方をコピペで使いたい方は、目次「font-size フォントのサイズ指定する方法」から確認してみてください。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

HTMLとCSSどちらでフォント指定をすればいい？

フォントに関する指定はCSSで指定するようにしましょう。

HTML4では、HTMLでも指定することが可能でした。
その時に使っていたfontタグはHTML5で廃止されました。

また、HTMLで指定することができるかに関わらずCSSで指定することをお勧めします。
理由は後ほど詳しく記述しますが、CSSだと細かい数値を用いて編集ができるからです。

HTML4上で指定する方法が知りたい方のために、この記事の最後で解説していきます。
まずは、CSSでフォントサイズなどの変更を行う方法を説明します。

【初心者向け】CSS（スタイルシート）基本の書き方を５ステップで解説

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！

＼プログラミングを学んで／
人生を変えた3名

インタビュー記事一覧＞

CSSのfontを使ってできることは何？

ここからはCSSを用いて実際にフォントについて設定していく方法を説明します。
CSSの「font-〇〇」を使うことで、サイズだけではなく様々な表示方法を決めることができます。

また、レスポンシブ対応時にCSSを使用していると、とても便利です。
レスポンシブの方法について詳しく知りたい方はこちらをご覧ください。
非公開: cssのレスポンシブ対応方法！初心者向けにわかりやすく解説

加えて、フォントなどの見た目の編集は、HTMLよりCSSが推奨されています。
「HTMLはサイトの構造を決め、CSSはそれを飾り付けるもの」というように覚えましょう。

これらの理由から、フォントを指定する際にはCSSを使用しましょう。

CSSのフォントの指定でできること

CSSでは様々なフォントの指定ができるので、種類を見ていきましょう。

以下は、「font-◯◯」というタグを表で紹介しています。

プロパティ	効果	使用例
font-size	フォントのサイズ指定例：5px, 5em, 5%

 font-size: 10px;

font-variant 大文字を小文字の大きさにする

font-variant: small-caps;

font-weight フォントの太さ指定
normal(初期設定), bold, lighter, bolder, 数値

font-weight: bolder;

font-style フォントのスタイル指定
normal(初期設定), italic, oblique

font-style: italic;

font-family 文字のフォント変更

font-family: sans-serif;

font-height * 行の高さ
5px, 5em, 5%, 単位なし

font-height: 15;

* font-heightについて詳しく知りたい方はこちら。
非公開: line-heightを使ったHTMLとCSSの行間指定をわかりやすく解説

フォントについての様々な指定を行うことがわかっていただけたでしょうか？
ここではHTMLとCSS初心者の方に向けて、よく使われる３つの項目についてわかりやすく解説していきます。

1. font-size フォントのサイズ指定
2. font-family フォントの種類と指定
3. color フォントの色指定

DMM WEBCAMPでは、自宅から講師に質問できるプログラミング学習コースがあります！

最短一か月でプログラミングスキルを身につけることができるので、興味のある方はまず無料のオンラインカウンセリングへお申し込みください！

font-size フォントのサイズ指定する方法

まずは、フォントのサイズ、大きさを指定する【font-size】について説明します。

font-size: 数値;を使うことで、このように文字の大きさの変更をすることができます。
以下のサンプルコードで表現が可能です。

HTML

<p class="size_40">これは40pxです</p>

<p class="size_20">これは20pxです</p>

<p class="size_10">これは10pxです</p>

CSS

. size_40 {
font-size: 40px;
}
. size_20 {
font-size: 20px;
}
. size_10 {
font-size: 10px;
}

CSSで指定するfont-sizeの数値が、高ければ高いほどサイズも比例して大きくなります。
Safariで表示できる最小の文字サイズは9px、Chromeは10pxとなっているのでこれよりも大きな数値を設定しましょう。

単位をつける際の注意

文字の単位を指定するために使える単位を４つご紹介します。

px
%
em
rem

どれを使っていいのかわからない！という方もいると思いますが、まずはそれぞれの考え方を理解しましょう。

まず大きく分けると、「絶対値」と「相対値」に分けることができます。
絶対値とはその数字を指定すればどんな時でもその数字の大きさになる指定です。
反対に相対値は、親要素への指定に左右されるものを指します。

px

絶対値は「px」だけです。
どんな時でも指定の大きさ通りになるので、

css

font-size: 16px;

と指定すれば、その文字は16pxに表示されます。

%

%は相対値です。
「親要素に指定されている文字の大きさの何％の大きさ」という風に指定することができます。

例えば、以下のように指定されている場合を考えてみましょう。

css_親要素

font-size: 8px;

css_子要素

font-size: 50%;

この場合、親要素内の文字は8px、子要素内の文字は4pxに表示されることになります。
親要素に何も指定されていない場合、16pxとして扱われます。

em

emは相対値です。
考え方はほとんど％と同じで、親要素の何割という考え方になります。

1em＝100%ととして考えます。
例えば以下の場合を見てみましょう。

css_親要素

font-size: 8px;

css_子要素

font-size: 2em;

この場合、親要素内の文字は8px、子要素内の文字は16pxで表示されることになります。

rem

remは相対値です。
emとほとんど同じ考え方ですが、影響を受けるのは親要素ではなくHTML自体です。
HTMLに対してなので、元は16pxになります。

例えばこの以下の場合を考えてみましょう。

css_親要素

font-size: 8px;

css_子要素

font-size: 2rem;

この場合、親要素内の文字は8px、子要素内の文字はHTMLの16pxの2倍なので32pxになります。

使い分けの仕方

4つの単位を紹介しましたが、その違いは大きく分けると絶対値と相対値の二つだけです。

絶対値であるpxは、どんなデバイスでも同じサイズになります。
そのため、自分が作業をしているパソコンとは違うサイズのパソコンで見てみると、レイアウトが崩れてしまうことがあります。
それに比べて、相対値であるem,rem,%はデバイスに左右されません。

現場によってどちらを使用するかが異なってきます。
まずはどんな特徴があるのかを知った上で、使えるようにしておけば良いでしょう。
自分で何かを作るときは、使うものを統一しておくことをオススメします。

知っていますか？IT業界は市場価値が高まっています！市場価値の高い業界で働くことで、現在より年収UPが可能です。

また、 ITスキルを身につけることで、どの業界でも必要とされる人材に成長できます！

【DMM WEBCAMP】のプログラミングスクールでは、未経験から最短3ヶ月でエンジニアとして転職が可能です。

DMM WEBCAMPでは転職成功率９８％の転職コースを複数提供しています

✔︎︎︎企業が本当に求めるビジネススキルを優先的に取得可能！

✔︎︎︎︎キャリアカウンセラーとメンターがあなたの転職活動とスキル獲得を両面サポート‼

✔︎︎︎紹介可能企業は６００社以上！？

IT業界に転職したい方はぜひご覧ください！

「なんか今の仕事合わないな・・・」

「IT業界に転職してみたいなぁ・・・」

という方、DMMが運営する「WEBCAMP エンジニア転職」をご検討してみてはいかがですか？

「WEBCAMP エンジニア転職」では最短12週間でITエンジニアを目指すことが可能です！

WEBCAMPの卒業生は転職後に年収もUP！（例：年収250万円→500万円）

しかも今なら受講料の最大70%が給付金として支給されます。

DMM WEBCAMPは経済産業省・厚生労働省が認定した専門実践教育訓練給付金制度の対象です

DMM WEBCAMPについてもっと詳しく

font-family フォントの種類の指定する方法

【font-family】とは、フォントの種類を指定するものです。
font-familyを使うことで、サイト全体の印象を大きく変えることができます。

より自分のイメージにちかいWebページにするために役立ちます。

使い方

CSS

font-family: "英数字のフォント名" "日本語のフォント名” 総称ファミリー;

セレクタには、font-familyを適応させたい要素を指定します。

”　”の中に適応させたいフォント名を入れます。
フォント名については以下で紹介します。
また、” “の数は例のような２つでなくても、それ以上でも以下でも構いません。

この時に気をつけていただきたいポイントは二つです。

一番左に来るフォントが優先される
英数字のフォント名は日本語のフォント名よりも左に置く

最後に配置されている総称ファミリーとは、それ以前に指定したフォントがブラウザと合わなかった時に表示されるフォントです。
忘れずに配置しましょう。

主に使われるフォントとその例

以下がよく使われるフォントの例です。
多くのサイトにはこれらのフォントが使われています。

サイトの雰囲気や、目的に合わせてフォントを選びましょう。

フォント名	フォントの種類	使用例
sans-serif	ゴシック系	これは例です。example
serif	明朝系	これは例です。example
cursive	筆記体・草書系	これは例です。example
fantasy	装飾的	これは例です。example
monospace	等幅	これは例です。example

他には、Windowsには”游ゴシック”と”メイリオ”がゴシック体に対応しており、Macには”ヒラギノ角ゴ”がゴシック体に対応しています。

ここでは紹介できないほど多くのフォントが存在しているので、自分の表現したい雰囲気に合うフォントを探してみるのもいいですね。

注意点

font-familyを使う上で注意点が３つあるので解説します。

１、ブラウザによって対応していないフォントがある
フォントには、MacとWindowsそれぞれに対応していないフォントがあります。
そのため、どちらでも表示されるようにしなくてはなりません。

ゴシック体を表す”游ゴシック”がMacとWindowsのどちらにも対応しているフォントです。
とても便利なフォントですので、初心者は”游ゴシック”を使うのがオススメです！

２、書き方
font-familyの書き方
上記でも少し触れたように、英数字を指定する場合には、日本語のフォントの前に配置し、最後に総称ファミリーを忘れずに入れましょう。

左のフォントほど、優先順位が高くなります。

３、ダブルクォテーションを使う

２単語に別れている名前のフォントは、ダブルクォテーションで囲みます。

フォントが文字に適応されていない時には、ダブルクォテーションがついているかチェックしましょう。

color フォントの色指定

【font-color】を使うと、フォントの色を指定することができます。

フォントのカラーによって、ユーザーが受ける影響はとても大きいので色の指定はとても重要なものです。

CSS

color: ＃カラーコード;

CSSにcolorのプロパティを使ってカラーコードを入れていきます。

色は＃の後に１６進法で表した英数字を使って表しており、複雑な値です。
覚える必要はないため、都度調べるようにしましょう。

また、文字は色の指定の他に、透明にすることもできます。
文字などの要素を透明にする方法について詳しく知りたい方はこちら。
非公開: CSSで透明度を指定する方法【opacityとrgbaの使い分け方】

簡単に色の数値をだす

複雑なカラーコードを簡単に求めることができるツールがあります。
自分の使いたい色のコードを探してみてください。

①カラーコード一覧表
セーフカラー基準

これ以外にも様々な色のコードが紹介されています。
＃に続いている値をコピーしてCSSに貼り、好きな色を表現しましょう！

②material design palette

こちらのサイトでは、2色を選択するとそれにあった他の色を紹介してくれたり、グラデーションから色を探すことができるサイトです。

ワンランク上のデザインを求めている方は是非使ってみてください。

HTMLでのフォント指定する方法

これまでフォントの指定はCSSで行うと解説してきましたが、旧バージョンのHTML4ではHTMLでフォントの指定ができます。
旧バージョンであるHTML４では、fontタグというものが存在しています。
fontタグを使うことでサイズや種類、色を決めることができます。

HTML

<font size="１〜７">フォントのサイズ</font>
<font color="カラーコード">フォントの色</font>
<font face="フォント名">フォントの種類</font>

HTML４の場合、フォントサイズが１〜７の７段階でしか指定ができません。
また、レスポンシブ対応の際には一つずつ手直しをしなくてはならず、時間がかかり、ミスも増えてしまいます。

また、現在の最新のバージョンであるHTML5ではfontタグはサポートされていないので気をつけてください。
（出典：https://www.w3schools.com/tags/tag_font.asp）

そのため、CSSで指定することをお勧めします。

まとめ

HTMLのフォントサイズの変更には、CSSのfontを使うようにしましょう。
その理由は主に二つです。

HTML5から、HTMLのfontタグがサポートされていない
CSSのfontであれば、細かい数値を用いて指定することができる

また、CSSのfontを使えば、サイズだけではなく色や種類も細かく指定することができます。

プログラミングを習得していくためには、どんどん試してみることが不可欠です。
どんな指定をすれば、どんな風に画面に表示されるのかを試しながら掴んでいきましょう。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

資料請求

DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

資料をダウンロードする
IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

資料をダウンロードする
働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

資料をダウンロードする