CSS簡易リファレンス − フォント・テキスト関連
color − 文字の色を指定する
colorは文字色を指定するプロパティです。
colorの値
- #******
#000000から#ffffffまでのカラーコードにより色を指定できます。
HTMLの記述例
<div style="color:#ff0000;">フォントカラーを赤に指定</div>
<div style="color:#ff0000;">フォントカラーを赤に指定</div>
ブラウザでの表示例
フォントカラーを赤に指定
font-size − 文字の大きさを指定する
font-sizeは文字の大きさを指定するプロパティです。
font-sizeの値
- **px、**pt、**％
大きさをピクセル数、ポイント数、パーセンテージなどで指定できます。（上の例では％は全角になっています。コピーする際は半角に直してください。）
HTMLの記述例
<div style="font-size:200%;">フォントサイズを200％に指定</div>
<div style="font-size:200%;">フォントサイズを200％に指定</div>
ブラウザでの表示例
フォントサイズを200％に指定
line-height − 1行の高さを指定する
line-heightは1行の高さを指定するプロパティです。これを指定することで行間が開き、見やすいホームページを作ることができます。
line-heightの値
- **px、**pt、**％
高さをピクセル数、ポイント数、パーセンテージなどで指定できます。（上の例では％は全角になっています。コピーする際は半角に直してください。）
HTMLの記述例
<div style="line-height:12pt;">1行の高さを12ptに指定<br>行間が狭くなりました</div>
<div style="line-height:12pt;">1行の高さを12ptに指定<br>行間が狭くなりました</div>
ブラウザでの表示例
1行の高さを12ptに指定
行間が狭くなりました
行間が狭くなりました
font-weight − 太さを指定する
font-weightは文字の太さを指定するプロパティです。
font-weightの値
- bold、normal
boldは太字に、normalは標準の太さに指定できます。 - 400、800
数値で指定することもできます。標準の太さは400です。
HTMLの記述例
<div style="font-weight:bold;">文字を太字に指定</div>
<div style="font-weight:bold;">文字を太字に指定</div>
ブラウザでの表示例
文字を太字に指定
font-style − 斜体を指定する
font-styleは文字の斜体を指定するプロパティです。
font-styleの値
- italic、normal
italicは斜体に、normalは標準の書体に指定できます。
HTMLの記述例
<div style="font-style:italic;">文字を斜体に指定</div>
<div style="font-style:italic;">文字を斜体に指定</div>
ブラウザでの表示例
文字を斜体に指定
font − フォントに関係する指定を一括して行う。
fontは、フォントに関する指定を一括して行うためのプロパティです。文字の大きさ、1行の高さ、フォントの種類、太さ、斜体などがこれひとつで指定できます。各値は半角スペースで区切ることで追加でき、「フォントの大きさ/高さ」と「フォントの種類」を除く不要な値は省略できます。
fontの値
- 太さ（font-weight)、斜体（font-style）、サイズ（fon-size、高さ（line-height）は、上記を参照してください。
- 種類（font-family）
'フォント名'もしくは'フォントの種類'で指定し、複数あるときは「,」で区切ります。「フォントの種類」には「sans-serif」（ゴシック系のフォント）、「serif」（明朝系のフォント）、「monospace」（等幅フォント）などがあります。
fontの記述例
font { 太さ 斜体 サイズ/高さ '種類','種類','種類'; }
太さ、斜体については順序の逆転、省略は可能ですが、サイズ/高さ、種類は省略できません。
font { 太さ 斜体 サイズ/高さ '種類','種類','種類'; }
太さ、斜体については順序の逆転、省略は可能ですが、サイズ/高さ、種類は省略できません。