【初心者向け】HTML・CSS上でfontタグを使ってできること | プログラミング入門ならWEBCAMP NAVI
【3月枠も残りわずか】転職保証コース

【初心者向け】HTML・CSS上でfontタグを使ってできること

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

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

「font-size」や「font-color」、「font-family」など「font-◯◯」というタグが他にも多くあります。
それらを上手く使う使うことによって、ユーザーに与える印象を大きく変えることができます。

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

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

実は、HTMLとCSSでは、どちらでもフォントサイズや色、種類の指定ができます
学習を始めたばかりの方は混乱してしまいますよね。

でも大丈夫です。
フォントの指定はCSSでしましょう!

理由は後ほど詳しく記述しますが、CSSだと細かい数値を用いて編集ができるからです。

なぜ、HTMLでもフォントの指定ができるのにやらないのか、不思議ではありませんか?
まずは、HTMLでのフォントの指定方法と使わない理由、その次にCSSの指定方法を説明します。

HTMLでのフォント指定

フォントの指定はCSSですることを進めていますが、旧バージョンのHTML4ではフォントの指定ができます
旧バージョンであるHTML4では、fontタグというものが存在しており、以下のようにfontタグを使ってサイズ、色、種類の変更ができます。

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

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

なお、現在の最新のバージョンであるHTML5では、このfontタグはサポートされていません。
fontタグを使えるのはHTML4まで
です。
(出典:https://www.w3schools.com/tags/tag_font.asp

旧バージョンのHTML4ではフォントの指定ができますが、作業量が増え、ミスも多くなるのでCSSで指定しましょう。

CSSでのフォント指定

フォントサイズや色、種類等をCSSで指定する理由を説明します。

先ほども少し記述したように、CSSでフォントの指定をすることで、文字の大きさの微調整が可能になります。
また、レスポンシブ対応時に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初心者の方に向けて、よく使われる3つの項目についてわかりやすく解説していきます。

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

1. 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という単位は、画面のサイズに関わらず、文字の大きさが変化しません
そのため、サイトのレスポンシブ時にはpxではなく、remを使いましょう。
HTML上で16pxの時、1rem=16pxとなります。
レスポンシブについて詳しく知りたい方はこちら。
レスポンシブは難しくない!CSS初心者のためにわかりやすく解説

2. font-family フォントの種類の指定

【font-family】とは、フォントの種類を指定するものです。
font-familyを使うことで、サイト全体の印象を大きく変えることができ、訪れるユーザーに大きな影響を与えます。

使い方

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

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

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

一番左に来るフォントが優先され、英数字のフォント名は日本語のフォント名より前に置きます。

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

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

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

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

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

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

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

注意点

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

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

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

2、書き方


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

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

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

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

3. color フォントの色指定

colorとは、フォントの色の指定ができます。

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

CSS
color: #カラーコード;

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

色は#の後に16進法で表した英数字を使って表しており、複雑な値です。
そのため、覚える必要はないです。
簡単にカラーコードを求められるツールを紹介しますので、これを活用しましょう!

また、文字は色の指定の他に、透明にすることもできます。
要素を透明にする方法について詳しく知りたい方はこちら。
CSSで透明にするopacityとrgbaを使い分けよう!

簡単に色の数値をだす

複雑なカラーコードを簡単に求めることができるツールがあります。
あなたの理想のカラーを見つけましょう!

そのツールがこちらです。

カラーコード一覧表
http://www.netyasun.com/home/color.html



これ以外にも様々な色のコードが紹介されています。

#に続いている値をコピーしてCSSに貼り、好きな色を表現しましょう!

まとめ

fontのプロパティを使うと様々な表現ができ、ユーザーにとても大きな影響を与えます。

今回は主に、サイト全体に使えるような要素である、font-size、font-family、colorについて紹介しました。

どれも簡単にサイトの雰囲気を一気に変えられる要素ですので、初心者の人でも、すぐに魅力的なサイトが作れますよ!

3月枠も残りわずか!!未経験からエンジニアを目指すならDMM WEBCAMP

DMM WEBCAMPは転職保証型のプログラミングスクールです。転職成功率は、98%!短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

「未経験だから不安…」、「転職できるんだろうか…」などの不安があると思います。そんな不安や心配を解消する、無料のカウンセリングを実施しています。

無理な勧誘や面倒な電話は一切ありませんので、お気軽にお越しください。

【無料】キャリア相談の日程を見る

転職保証付のDMM WEBCAMPで
安心してエンジニア転職を目指そう

「スキルがないし…」「失敗したくないし…」
カウンセラーがあなたのキャリアを真剣に考え、
ご相談に乗ります。