CSSで文章の頭文字を大きくする(ドロップキャップ)方法

時として、文字しかないページに装飾したい一つの手段の覚書。

以下のCSSを入れればドロップキャップと呼ばれる文章内の頭文字を大きくすることができます。

簡単にできるんで状況に応じて試してみてはいかがでしょうか。

必要なCSS


p:first-letter {
font-size: 3em;
line-height: 1;
float: left;
margin: 0 .2em 0 0;
padding: .1em 0;
}

表示サンプル

黒山のたぬきさんがおしりを隠していたのに出てしまったことで人間につかみだされて火あぶりにされてしまうところをちょうど通りかかった一寸法師が助けようとおもったが、小さすぎてがっかりしてその場を通り過ぎてしまい、次に通りかかったのはルパン三世だったが、ふじこちゃんがいたから釘付けになってたぬきなんてどうでもよくなってしまった。落ちのない話はこれにて終了!

コメント

タイトルとURLをコピーしました