ドロップキャップの作成

ドロップキャップというのは，この文章でやっているように，書き出しの一文字を大きくして，文の中に埋め込むようにする表示法です。これは外国語文化でしょう。和文であまりやっているのを見かけませんが，横書きの文章に印象的な効果をもたらすと思います。

これをやると，タイトルの下のブログの紹介文やらコメント欄にまでこの効果が出てしまうので，ちょっとウザい感じがしてこの頃はあまり使っていませんが，やり方は，ページの文頭に以下の様なhtmlコードを挿入するだけで簡単にできます。以後のドロップキャップ化したい文章をパラグラフ毎に<p>と</p>で囲めば良いわけです。

<style type="text/css">
<!-- p:first-letter {font-size: 300%;float:left;} -->
</style>

ここでは，だいたい3文字分くらい食う様に，300%の指定ですが，このパーセンテージを変える事で効果を調整出来ます。

コメント 4

メモメモ！（微笑）
by Ujiki.oO (2014-09-27 11:28) 

Ujiki.oOさん，先頭文字をデカくし過ぎると訳が分からなくなりますね（笑）。それと，かなり広範囲まで影響が出てしまいます。
by Enrique (2014-09-27 20:11) 

Enrique さん、こんにちは。
CSSのデザインに関わることは全て「個人の嗜好」ですので、どんなデザインも許されます。(微笑）　わたし的に好きなのは、アンダーラインが同じになる事です。　しかしながらアンダーラインが美しく引けるのか引けないかも現状は文字サイズや太字、そして色に連動してしまって、困難です。　まあ、近似的に「同じアンダーラインかな・・・・」と許されることを期待して、
　　　　　float:left;
のところですけど、　bottom　を追加して
　　　　　float:left bottom;　とするのも一計です。　釈迦に説法で失礼しました。　どのブラウザーでも同じ結果かは未確認です。（笑）
by Ujiki.oO (2014-09-30 12:42) 

Ujiki.oOさん，有用なコメントありがとうございます。
>釈迦に説法で
どなたのかのページを参考にしただけで，htmlやCSSのデザインに関する知識は殆どありません。で，私はあまりデザインには凝ってないのですが，英文の先頭文字を記事のパラグラフに埋め込む手法がカッコいいなと思っておりました。でやって見ましたが，日本語文では余り合いませんね。欧文では，もともと先頭が大文字で角張って大きいのでアクセントになりますが，漢字仮名ローマ字混じりの和文では，とって付けた様な（笑）。
ご教示の，bottom追加ですと食い込みが無くなって，アンダーラインが揃って，確かにこの方が和文としてはスッキリしますね。ただ，私のブラウザ（Safari）のせいか，次の文との間の改行間隔だけがあいてしまい，余りカッコよくないかなと。これを調整する方法もあるのかもしれませんが。。
by Enrique (2014-10-01 07:01)