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;
}