CSS

フォント

フォントカラーの指定

フォントカラー(文字色)はcolorプロパティで指定する。

例:h1要素のフォントカラーを#3333ccにする。

h1 {
color: #3333cc;
}

例:p要素のフォントカラーを#333333にする。

p {
color: #333333;
}

RGBの各値がぞろ目の場合は各値を1桁で記述することもできる。

以下はh1要素のフォントカラーを#3399ccにしているのと同義である。

h1 {
color: #39c;
}

ページの先頭へ↑

フォントサイズの指定

フォントサイズ(文字の大きさ)はfont-sizeプロパティで指定する。

例:h1要素のフォントサイズを、基準フォントサイズの1.5倍にする。

h1 {
font-size: 1.5em;
}

例:h1要素のフォントサイズを、基準フォントサイズの0.8倍にする。

h1 {
font-size: 0.8em;
}

値が1未満の小数の場合、0を省略することもできる。

h1 {
font-size: .8em;
}

例:h1要素のフォントサイズを、基準フォントサイズの200%にする。

h1 {
font-size: 200%;
}

emと%は、親要素のフォントサイズが指定されていれば、それが基準のフォントサイズになるが、されていない場合、基準となるフォントサイズがブラウザごとに異なる。

例:h1要素のフォントサイズを、20pxに設定する。

h1 {
font-size: 20px;
}

ページの先頭へ↑

フォントウェイトの指定

フォントウェイト(フォントの太さ)はfont-weightプロパティで指定する。

幾つかの指定方法があるが、通常はnormalかboldの2つの値で指定をする。

例:p要素のフォントウェイトをboldにする。

p {
font-weight: bold;
}

ページの先頭へ↑

フォントファミリーの指定

フォントファミリー(フォント名)はfont-familyプロパティで指定する。

フォントファミリー名は"○○"(または'○○')と、"か'で囲って指定する。

総称ファミリー名と呼ばれる(個別のフォント名ではなく)フォントの種類を示す名前も用意されている。serif(日本語の明朝体のようなフォント)、sans-serif(日本語のゴシック体のようなフォント)、monospace(等幅フォント)などが利用できる。これらの場合は、"などでは囲まずに指定する。

ユーザの環境に指定フォントがインストールされていない可能性もあるので、通常は代替フォントを,で区切って複数指定する。

例:例えばbody要素で良く利用されるのは、以下のような指定である。

dody {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
}

ページの先頭へ↑