文字のスタイルと太さを変える～ドリル式ホームページの作り方

文字のスタイルと太さを変える

font-styleとfont-weight

文字のスタイルを変えるタグは、「font-style:○○;」で、○○には、デフォルトならnormal、斜体ならitalicが入ります。

この二つすら使うことが少ないので、二つだけ覚えるだけで十分です。

h1 {
font-style:italic;
}

文字の太さを変えるタグは、「font-weight:○○;」で、○○には、デフォルトならnormal、太字ならbold、細めならlighter、100～900までの数値のいずれかで指定します。（例：normal＝400、bold＝700）。

h1 {
font-weight:normal;
}

サンプルの文字のスタイルを変える

これを使ってサンプルのaddressタグがイタリック体になっているのをノーマルに変えます。

@charset "shift_jis";
body {
background-color:#efe;
}
h2 {
font-size:16px;
color:#494;
}
h3 {
font-size:14px;
color:#f44;
}
dl {
background-color:#fff;
}
dt,dd {
font-size:13px;
}
ul {
font-size:14px;
color:#555;
}
address {
font-style:normal;
}

ここまでの作成経過はコチラ→サンプル（ホームページ作成講座）