ページ全体の背景色、文字色、フォント
HTMLページの全体の背景などを設定する場合は、CSSのhtml要素とbody要素のどちらに指定しても行うことができます。しかし、CSS2.1やCSS3ではページ全体の指定するにはhtml要素ではなく、body要素に対して行うことが推奨されています。
ページ全体の背景色と文字色の設定(CSS)
ページ全体の背景色「background」と文字色「background」を指定する場合は、CSSのbody要素に次のように記入します。
body {
color: #000000; //ページ全体の文字色(黒)
background: #ffffff; //ページ全体の背景色(白)
}
色の指定方法
色を指定するには上記のように16進数カラーコードで指定する方法のほか、キーワードやRGB、HSLで指定することができます。また、RGBとHSLで指定した場合は透過度も同時に指定することができます。
色の指定例(白)
指定形式 | コード |
---|---|
キーワード | white |
16進数カラーコード | #ffffff |
16進数カラーコード(短縮) | #fff |
RGB | rgb(255, 255, 255) |
RGB(透過度指定)※0.5で指定 | rgba(255, 255, 255, 0.5) |
HSL | hsl(0, 0%, 100%) |
HSL(透過度指定)※0.5で指定 | hsla(0, 0%, 100%, 0.5) |
フォントの指定
フォントを指定するには、CSSプロパティの「font-family」を使用します。
このプロパティにはカンマ区切りで複数のフォントを設定しておくことができます。ユーザーの利用環境に1番目に設定したフォントがインストールされていない場合、2番目以降に設定されているフォントを順番に検索し、最初に見つかったフォントが適用されます。
また、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でフォントを指定するときには、第一候補、第二候補…などで指定したフォントファミリーがユーザの環境にインストールされていない場合に備えて、最後には総称フォントを指定しておきます。