最初の文字だけ強調する

最初の文字だけいろいろな効果を使って強調することができます。
例えば、
・文字の色を変える
・文字の大きさを変える
・文字のフォントを変える
・文字の周りを線で囲む
などなど。

これにはいわゆる、擬似要素を使用します。
この場合は「:first-letter」を使用します。

<html>
<head>
<style type="text/css">
p:first-letter{font-size:200%;color:red;}
</style>
</head>
<body>
<p>
テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
</p>
</body>
</html>

以下サンプルを示します。

テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト


文字の色を変えるときは
p:first-letter{color:#999;}
文字のフォントを変えるときは
p:first-letter{font-family:Arial;}
文字の周りを線で囲むときは
p:first-letter{border:1px solid red;}
のような書き方をします。

マメ知識ですが、このような視覚的効果をドロップキャップと呼びます。
top