CSSによるフォントの操作について、プログラミング入門者向けに説明いたします。
目次
この記事は、HTMLやCSSなどが動画で学べる、オンラインプログラミング学習講座「Web開発入門完全攻略コース」サポート記事です。
CSSを使ってフォンのスタイルを設定することができます。
セレクタ {
font-family: フォント名 or フォントファミリー;
}
例えば、macOSであれば、
インストールされているフォントの種類は、Font Bookを使って確認ができます。
フォントファミリーとは、フォントや太字、イタリック体、斜体など、デザインを統一した複数のフォントをまとめたものです。
入っているフォントは端末それぞれで異なる問題を解決するために、フォントファミリーを使った指定も併用します。
良く使う、フォントファミリーとして、セリフと、サンセリフ、があります。
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;の指定が使われて、端末にある、何かしらのゴシック体が使われることになります。
欧文（英語など）を表示できる「欧文フォント」と
欧文（英語など）と日本語を表示できる「日本語フォント」があります。
フォント名に半角スペースの入るフォントは「”（ダブルクォーテーション）」または、「’（シングルクォート）」で囲います。
フォントの指定方法は、決まりがあるわけはありません。
プロジェクトごとに決定する必要があります。
フォント指定は、時代によっても流行りがあるので、普段つかっている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（プログラス）でプログラミングを学び、創れる人になろう！
プレミアムプランを2週間無料体験しよう
今すぐ詳細を確認する