Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 reference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial
ASP ADO リファレンス | PHP関数リファレンス | MySQL関数リファレンス

フォントの種類を指定する

■ 1文字目に適用させる場合

フォントの種類を設定します。指定したフォントがユーザーの環境にインストールされているとは限りませんので、優先して表示させたい順に複数のフォントをカンマ(,)で区切って指定できます。

指定できる値

フォント名

フォント名(フォントファミリー名)を直接指定できます。フォント名にスペースが含まれている場合は、フォント名の前後を二重引用符(”)または一重引用符(’)で囲ってください。また、フォント名を指定する時には、全角・半角・大文字・小文字などの違いに注意してください。

serif, sans-selif, cursice, fantasy, monospace

フォントの一般分類名を表すキーワードで指定することができます。これらの名前はキーワードですので、引用符で囲まないでください。通常は、指定したフォントが利用できない環境向けの最終的な大体フォントとして、一番最後に指定しておきます。
serif 明朝系のフォント
sans-serif ゴシック系のフォント
cursive 草書体・筆記体系のフォント
fantasy 装飾的なフォント
monoscope 等幅のフォント

 

■ フォント名での指定例

CSSソース

@charset "shift_jis";
p {
margin: 0;
font-size: 3em
}
.c1 { font-family: "MS 明朝",平成明朝,serif }
.c2 { font-family: "MS ゴシック",Osaka,sans-serif }
.c3 { font-family: DF行書体,HG行書体,cursive }
.c4 { font-family: HG創英角ポップ体,fantasy }

HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>フォント名での指定例</title>
<link href="../assets/style_sheets/03-01.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="c1">明朝体</p>
<p class="c2">ゴシック体</p>
<p class="c3">行書体</p>
<p class="c4">角ポップ体</p>
</body>
</html> </head>
<body>
<h1>First letter</h1>
</body>
</html>

■ 一般分類名での指定

CSSソース

p {
margin: 0;
font-size: 3em
}
.c1 { font-family: serif }
.c2 { font-family: sans-serif }
.c3 { font-family: cursive }
.c4 { font-family: fantasy }
.c5 { font-family: monospace
}

HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>一般分類名での指定例</title>
<link href="../assets/style_sheets/03-02.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="c1">明朝系</p>
<p class="c2">ゴシック系</p>
<p class="c3">草書体系</p>
<p class="c4">装飾系</p>
<p class="c5">等幅フォント</p>
</body>
</html>

■ フォームへの適用例
CSSソース
@charset "shift_jis";
select, input, textarea {
font-family: HG創英角ポップ体,fantasy
}
textarea { margin-top: 1em }

HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>フォームへの適用例</title>
<link href="../assets/style_sheets/03-03.css" rel="stylesheet" type="text/css">
</head>
<body>
<form action="">
<p>
<select>
<option>select要素</option>
<option>選択肢2</option>
</select>
</p>
<p>
<input type="text" value="input要素">
<br>
<textarea rows="3" cols="20">
textarea要素
</textarea>
</p>
<p>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</p>
</form>
</body>
</html>

 

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box | CSS Trial