フォント | プログラミング入門ナビ

CSSによるフォントの操作について、プログラミング入門者向けに説明いたします。

プログラミング入門

この記事は、HTMLやCSSなどが動画で学べる、オンラインプログラミング学習講座「Web開発入門完全攻略コース」サポート記事です。

CSSによるフォントの操作

CSSを使ってフォンのスタイルを設定することができます。

構文

セレクタ { 
  font-family: フォント名 or フォントファミリー;
}

フォント名

フォント名の例

メイリオ
Hiragino Kaku Gothic ProN

フォント名で指定する場合の問題点

PCやスマホなどに入っているフォントはそれぞれ異なる。
デザイナーやエンジニアが意図しないフォントが表示される可能性がある。

例えば、macOSであれば、
インストールされているフォントの種類は、Font Bookを使って確認ができます。

フォントファミリー

フォントファミリーとは、フォントや太字、イタリック体、斜体など、デザインを統一した複数のフォントをまとめたものです。

入っているフォントは端末それぞれで異なる問題を解決するために、フォントファミリーを使った指定も併用します。
良く使う、フォントファミリーとして、セリフと、サンセリフ、があります。

serif・・・明朝体
sans-serif ・・・ゴシック体

font-familyの事例

font-familyプロパティには、複数のフォント名または、フォントファミリーを指定できます。
カンマ区切りで、複数していします。

具体例

具体例で見てみましょう。

特に決まりがあるわけでは無いのですが、日本のサイトでは、
Windows向けのフォト名の指定 + Mac向けのフォント名の指定 + フォントファミリーの指定とすることがあります。

複数のフォント、フォントファミリーをカンマ区切りで記述します。

左に書かれたフォントから優先して利用されます。

font-family: , "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;

“Hiragino Kaku Gothic ProN”は、Macに入っているフォント、

メイリオは、Windowsに入っています。環境によっては。Macに入っていることもあります。
sans-serif;はフォントファミリーでゴシック体の指定です。Hiragino Kaku Gothic ProNも、メイリオも入っていない場合、端末にあるゴシック体が使われます。開発者・デザイナーは、どのフォントが使われるかは、わかりません。

Macの場合は、Hiragino Kaku Gothic ProNがつかわれて、
Windowsの場合は、メイリオが使われて、
例えば、Linux で見た場合などは、sans-serif;の指定が使われて、端末にある、何かしらのゴシック体が使われることになります。

補足

欧文フォントでは日本語を表示できない。

欧文（英語など）を表示できる「欧文フォント」と
欧文（英語など）と日本語を表示できる「日本語フォント」があります。

英語フォントの例

Arial
Helvetica

日本語フォントの例

“メイリオ”
“ヒラギノ角ゴ Pro W3”

フォント名に半角スペースの入るフォントは「”」で囲う

フォント名に半角スペースの入るフォントは「”（ダブルクォーテーション）」または、「’（シングルクォート）」で囲います。

“Hiragino Kaku Gothic Pro”
“ヒラギノ角ゴ Pro W3”
“MS PGothic”

普段使用しているサービスのフォント指定を研究してみる。

フォントの指定方法は、決まりがあるわけはありません。
プロジェクトごとに決定する必要があります。
フォント指定は、時代によっても流行りがあるので、普段つかっているWebサイトのCSSがどうなっているか、研究してみると勉強になりますよ。

Chromeに付属しているWeb Developpert Toolなどで確認するのが便利です。

おわりに

この記事では、CSSによるフォントの操作について、プログラミング入門者向けに説明しました。

CSSの入門については、関連記事を参照してください：
CSSの基礎についてプログラミング初心者のみんなが知りたいこと

オンライン講座「Webエンジニア入門総合コース」では、この記事で説明したCSSの基礎はもちろんのこと、プログラミミング初心者向けに、HTML5, CSS3, JavaScript, Bootstrap, SQL, Ruby, Ruby on Rails, Cloud9, Git, GitHubなどを動画をつかって説明しています。

動画は文字情報の5,000倍と言われることもあります。動画で学習すると、手順が目に見えて理解できるので、学習がはかどりますよ。

264レクチャー・18時間の大型コースとなっています。内容をしっかり確認できるように、無料プレビュー60分を公開していますので、ぜひご覧ください！

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

CSSによるフォントの指定について初心者が知りたいことを説明します