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文字目に適用させる場合

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

ブロックレベル要素の先頭の1文字目だけに適用させたい場合は、下の書式のように指定します。書式の「適用先」部分には、要素名の他にクラスやIDなども指定できます。

「:first-letter」のスタイルとして使用できるのは、以下のプロパティです。

colorプロパティ
background関連プロパティ
margin関連プロパティ
padding関連プロパティ
border関連プロパティ
floatプロパティ
clearプロパティ
font関連プロパティ
line-heightプロパティ
text-decorationプロパティ
text-transformプロパティ
vertical-alignプロパティ(floatプロパティの値が「none」の場合のみ)

 

■ 作例

CSSソース

h1 {
font-family: "Arial Black", sans-serif
}
h1:first-letter {
font-size: 1.2em;
color: #339900;
background: #ffffff
}

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>1文字目の色を変える</title>
<link href="../assets/style_sheets/02-05.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>First letter</h1>
</body>
</html>

<<<戻る

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