ページ全体の背景色、文字色、フォント

HTMLページの全体の背景などを設定する場合は、CSSのhtml要素とbody要素のどちらに指定しても行うことができます。しかし、CSS2.1やCSS3ではページ全体の指定するにはhtml要素ではなく、body要素に対して行うことが推奨されています。

ページ全体の背景色と文字色の設定（CSS）

ページ全体の背景色「background」と文字色「background」を指定する場合は、CSSのbody要素に次のように記入します。

body {
  color: #000000; //ページ全体の文字色（黒）
  background: #ffffff; //ページ全体の背景色（白）
}

色を指定するには上記のように16進数カラーコードで指定する方法のほか、キーワードやRGB、HSLで指定することができます。また、RGBとHSLで指定した場合は透過度も同時に指定することができます。

フォントを指定するには、CSSプロパティの「font-family」を使用します。

このプロパティにはカンマ区切りで複数のフォントを設定しておくことができます。ユーザーの利用環境に１番目に設定したフォントがインストールされていない場合、２番目以降に設定されているフォントを順番に検索し、最初に見つかったフォントが適用されます。

また、CSS3では「Webフォント」の仕組みが実装されています。そのため、ここにWebフォントを指定しておくことで、ユーザーの利用環境によらず、同一のフォントを使用することができます。

body {
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", YuGothic, "游ゴシック体", sans-serif;
}

フォントを指定するときには、フォントファミリーならば引用符で囲んで指定することが推奨されています。引用符で囲わなくても機能はしますが、フォントファミリーと総称フォントを区別するために引用符が使われます。

ただし、「Hiragino Kaku Gothic Pro」のようにフォント名に半角スペースが入る場合は必ず引用符で囲わなければなりません。なお、引用符はダブルクォーテーションとシングルクォーテーションのどちらでも構いません。

フォントファミリーとは「Helvetica」や「メイリオ」などのように、具体的なフォントのことを指します。一般には、同じフォントファミリーに属する文字は統一されたデザインとなっています。

総称フォントとは「sans-serif」（ゴシック体）や「serif」（明朝体）のようにフォントのカテゴリのことです。たとえば、フォントファミリーの「メイリオ」はsans-serifに属しています。

CSSでフォントを指定するときには、第一候補、第二候補…などで指定したフォントファミリーがユーザの環境にインストールされていない場合に備えて、最後には総称フォントを指定しておきます。