CSSでフォントサイズ・種類・色を思い通りに指定する方法! | プログラミング入門ならWEBCAMP NAVI
【11月枠も残りわずか】転職保証コース

CSSでフォントサイズ・種類・色を思い通りに指定する方法!

 

サイトの見た目を左右するフォント。

フォントといっても、サイズ、種類、色のように多くの指定ができます。

それらのフォントの指定によっては、ユーザーに与える印象も大きく変わってきます。

この記事さえ読めば、初心者でもフォント指定が簡単にできるよう説明していきます!

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

フォントのサイズや種類の指定は、HTMLかCSSどちらですればいいのでしょう?

実は、どちらでもフォント指定はできますが、CSSで編集することをオススメします。

その理由は、それぞれのフォント指定にあります。
一つずつ見ていきましょう!

CSSでのフォント指定

フォントをCSSで編集することをオススメする理由は、細かい編集が可能になるからです。

例えば、CSSでの文字サイズの指定は、細かい数値を用いて指定することができます。
方法は後ほど説明します。

また、CSSで文字サイズの設定をしていると、レスポンシブ対応時にとても楽です。
レスポンシブについて詳しく知りたい方はこちら。
レスポンシブは難しくない!CSS初心者のためにわかりやすく解説

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

これらの理由からCSSでフォントを指定することをオススメしています。
HTMLでフォント指定をするとどうなるのか見ていきましょう。

HTMLでのフォント指定

フォント指定はCSSですることを勧めていますが、HTMLでフォント指定する方法を見ていきましょう。

旧バージョンであるHTML4では、fontタグというものが存在しています。

以下のように、HTML4では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

フォント指定はCSSで!

HTMLでフォント指定を行うと、細かなフォントサイズの指定ができず、スマホなどへの対応をするレスポンシブ時にとても手間がかかります。

CSSでなら好みのフォントサイズの指定ができ、レスポンシブも簡単なのでミス無く簡単にできます。

これらの理由からHTML上でフォントの編集をせず、CSSを使いましょう。

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

CSSのfontプロパティには、以下のようなフォントを編集する方法があります。

これらのコードは、CSSで使われます。

プロパティ 効果 使用例
font-style フォントのスタイル指定
normal(初期設定), italic, oblique
 font-style: italic;
font-variant 大文字を小文字の大きさにする
font-variant: small-caps;
font-weight フォントの太さ指定
normal(初期設定), bold, lighter, bolder, 数値
font-weight: bolder;
font-size フォントのサイズ指定
5px, 5em, 5%
font-size: 10px;
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についてです。

このように文字の大きさの変更をすることができます。

以下のサンプルコードで表現が可能です。

HTML
<p class="size_40">これは40pxです</p>
<p class="size_20">これは20pxです</p>
<p class="size_10">これは10pxです</p>
CSS
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とは、フォントの種類を指定するものです。

サイト全体の印象を大きく左右するので、訪れるユーザーに大きな影響を与えます。

使い方

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について紹介しました。

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

11月枠も残りわずか!!

エンジニア転職を目指すなら…

転職保証付きプログラミングスクール

で未経験からエンジニア目指そう

 

✔︎未経験からの転職 ✔︎会社の将来が不安 ✔︎給与や待遇に不満がある

 

転職保証コースは質の高いカリキュラムで転職成功率98%