spanを使ったドロップキャップ

firs-letter を使ったドロップキャップはマークアップ時の手間が少ない分、何かと制限が多くていまひとつ思い通りにできない場合があります。そこで、一文字目をspanで囲ってもっと自由な表現が可能なドロップキャップを作ってみましょう。

.drop-box span {
      font-size: 3em;
      float: left;
      margin: 5px;
      padding-top: 15px;
      color: #600;
}

<div class="drop-box">
<p><span>ペ</span>ージランクがどのように決定されているかというと「外部からのリンク」の数です。沢山のページからリンクをもらえればそれだけページランクは高くなっていきます。これは選挙みたいなもので、有権者（ホームページ管理者）から投票してもらっていると思ってもらうと分かりやすいかと思います。また、リンクの中でも同じ物を取り扱っているページや、その物事に関係のあるページなどからのリンクはより強力な投票として取り扱われます。更に、ページランクの高いページからのリンクはもっと強力な投票として扱われます。これは、「信頼できる人からの投票」と考えてもらえると分かりやすいかと思います。例えば、口の軽い人間（リンクファームなど）から「この人は信頼できる人です」といくら説明されても信用できないのと同じことです。逆にみんなが信頼している人（ページランクの高いページ）の一言は普通の人の言葉より心に響くと言った感じですね。このことからも分かるように、相互リンクページやリンクファームなどからのリンクはマイナスとまでは言わないまでもあまり意味のないリンクだといえます。</p>
</div>

この場合、一文字目をfloatさせているのでp要素の中のテキストが少ない場合はfloatを解除するようにしましょう。

first-letter擬似要素を使ったドロップキャップ

本文の一文字目を大きくして以後に続く文字を普通のサイズで表現するドロップキャップは雑誌などでよく使われる手法です。

CSSなら、first-letter擬似要素を使って一文字目にスタイルを適用させることができます。

.drop-box p:first-letter {
      font-size: 2em;
}

<div class="drop-box">
<p>CSS(Cascading Style Sheets)はWebサイトのレイアウトを指定する目的で生まれたスタイルシート言語です。このCSSが誕生する前はWebサイトはHTML言語（Hyper Text Markup Language）という言語だけで構成されていましたが、インターネットの普及により次々とリリースされるブラウザで独自にHTMLの要素や属性を拡張したりして、W3Cが意図しない方向へと進み始めたためにこのCSSが生まれたのです。</p>
</div>