段落の最初の１文字を装飾（first-letter）
<html>
<head>
<title>段落の最初の１文字を装飾</title>
<style type="text/css">
<!--
p:first-letter {
color: red;
font-size: 30px;
float: left;
}
.c1:first-letter {
color: green;
font-size: 30px;
float: left;
}
//-->
</style>
</head>
<body>
<p>
段落１。この段落の最初の１文字のみ赤色の太字で表示されます。
この段落の最初の１文字のみ赤色の太字で表示されます。
この段落の最初の１文字のみ赤色の太字で表示されます。
この段落の最初の１文字のみ赤色の太字で表示されます。
この段落の最初の１文字のみ赤色の太字で表示されます。
この段落の最初の１文字のみ赤色の太字で表示されます。
この段落の最初の１文字のみ赤色の太字で表示されます。
この段落の最初の１文字のみ赤色の太字で表示されます。
</p>
<p>
段落２。この段落の最初の１文字のみ赤色の太字で表示されます。
この段落の最初の１文字のみ赤色の太字で表示されます。
この段落の最初の１文字のみ赤色の太字で表示されます。
この段落の最初の１文字のみ赤色の太字で表示されます。
この段落の最初の１文字のみ赤色の太字で表示されます。
この段落の最初の１文字のみ赤色の太字で表示されます。
この段落の最初の１文字のみ赤色の太字で表示されます。
この段落の最初の１文字のみ赤色の太字で表示されます。
</p>
<p class="c1">
この段落の最初の１文字のみ緑色の太字で表示されます。
この段落の最初の１文字のみ緑色の太字で表示されます。
この段落の最初の１文字のみ緑色の太字で表示されます。
この段落の最初の１文字のみ緑色の太字で表示されます。
この段落の最初の１文字のみ緑色の太字で表示されます。
この段落の最初の１文字のみ緑色の太字で表示されます。
この段落の最初の１文字のみ緑色の太字で表示されます。
この段落の最初の１文字のみ緑色の太字で表示されます。
</p>
<p>
この段落の最初の１文字のみ赤色の太字で表示されます。
この段落の最初の１文字のみ赤色の太字で表示されます。
この段落の最初の１文字のみ赤色の太字で表示されます。
この段落の最初の１文字のみ赤色の太字で表示されます。
この段落の最初の１文字のみ赤色の太字で表示されます。
この段落の最初の１文字のみ赤色の太字で表示されます。
この段落の最初の１文字のみ赤色の太字で表示されます。
この段落の最初の１文字のみ赤色の太字で表示されます。
</p>
</body>
</html>
〔 実行する 〕