これ、かっちょいいよね。
このデザインはドロップキャップと呼ばれるデザイン方法らしい。段落の1文字めだけを大きくするのはタブロイド紙などでよく見かけるな。
で、どーやってやるのかなと思って調べたらCSSを使っているよーだ。
よくわかんないが first-letter というものを使うようだ。
first-letterって文字通り「はじめの文字」についての設定のようだね。
CSSのセレクタ(選択子)とか擬似要素とかよく理解できてないが、こんな感じで設定するようだ。
たとえば段落<p></p>の中でdropcapを掛けたい場合を考えよう。
いづれの御時にか、女御更衣あまたさぶらひたまひける中に、いとやむごとなき際にはあらぬが、すぐれて時めきたまふありけり。はじめより我はと思ひあがりたまへる御方々、めざましきものにおとしめそねみたまふ。同じほど、それより下臈の更衣たちは、ましてやすからず。朝夕の宮仕につけても、人の心をのみ動かし、恨みを負ふつもりにやありけん、いとあつしくなりゆき、もの心細げに里がちなるを、いよいよあかずあはれなるものに思ほして、人のそしりをもえ憚らせたまはず、世の例にもなりぬべき御もてなしなり。上達部上人なども、あいなく目を側めつつ、いとまばゆき人の御おぼえなり。唐土にも、かかる事の起りにこそ、世も乱れあしかりけれと、やうやう、天の下にも、あぢきなう人のもてなやみぐさになりて、楊貴妃の例も引き出でつべくなりゆくに、いとはしたなきこと多かれど、かたじけなき御心ばへのたぐひなきを頼みにてまじらひたまふ。先ずスタイルシートを読み込んでおくな。
<link rel="stylesheet" type="text/css" href="http://ryouchi.up.seesaa.net/css/dropcap.css" />
で、段落にドロップキャップを以下の要領で設定するのだ。
パターンA:dropcap.css
p.dropcap-first-ptn-a:first-letter {
color: #333333;
float: left;
font-size:64px;
line-height:60px;
padding-top:4px;
padding-right:5px;
font-family: Times, serif, Georgia;
}<p class="dropcap-first-ptn-a">いづれの御時にか、女御更衣あまたさぶらひたまひける中に、いとやむごとなき際にはあらぬが、すぐれて時めきたまふありけり。はじめより我はと思ひあがりたまへる御方々、めざましきものにおとしめそねみたまふ。同じほど、それより下臈の更衣たちは、ましてやすからず。朝夕の宮仕につけても、人の心をのみ動かし、恨みを負ふつもりにやありけん、いとあつしくなりゆき、もの心細げに里がちなるを、いよいよあかずあはれなるものに思ほして、人のそしりをもえ憚らせたまはず、世の例にもなりぬべき御もてなしなり。上達部上人なども、あいなく目を側めつつ、いとまばゆき人の御おぼえなり。唐土にも、かかる事の起りにこそ、世も乱れあしかりけれと、やうやう、天の下にも、あぢきなう人のもてなやみぐさになりて、楊貴妃の例も引き出でつべくなりゆくに、いとはしたなきこと多かれど、かたじけなき御心ばへのたぐひなきを頼みにてまじらひたまふ。</p>いづれの御時にか、女御更衣あまたさぶらひたまひける中に、いとやむごとなき際にはあらぬが、すぐれて時めきたまふありけり。はじめより我はと思ひあがりたまへる御方々、めざましきものにおとしめそねみたまふ。同じほど、それより下臈の更衣たちは、ましてやすからず。朝夕の宮仕につけても、人の心をのみ動かし、恨みを負ふつもりにやありけん、いとあつしくなりゆき、もの心細げに里がちなるを、いよいよあかずあはれなるものに思ほして、人のそしりをもえ憚らせたまはず、世の例にもなりぬべき御もてなしなり。上達部上人なども、あいなく目を側めつつ、いとまばゆき人の御おぼえなり。唐土にも、かかる事の起りにこそ、世も乱れあしかりけれと、やうやう、天の下にも、あぢきなう人のもてなやみぐさになりて、楊貴妃の例も引き出でつべくなりゆくに、いとはしたなきこと多かれど、かたじけなき御心ばへのたぐひなきを頼みにてまじらひたまふ。
パターンB:dropcap.css
p.dropcap-first-ptn-b:first-letter {
color: #FFFFFF;
background-color: #000000;
float: left;
font-size:64px;
line-height:60px;
padding-top:4px;
padding-right:5px;
font-family: Times, serif, Georgia;
}<p class="dropcap-first-ptn-b">いづれの御時にか、女御更衣あまたさぶらひたまひける中に、いとやむごとなき際にはあらぬが、すぐれて時めきたまふありけり。はじめより我はと思ひあがりたまへる御方々、めざましきものにおとしめそねみたまふ。同じほど、それより下臈の更衣たちは、ましてやすからず。朝夕の宮仕につけても、人の心をのみ動かし、恨みを負ふつもりにやありけん、いとあつしくなりゆき、もの心細げに里がちなるを、いよいよあかずあはれなるものに思ほして、人のそしりをもえ憚らせたまはず、世の例にもなりぬべき御もてなしなり。上達部上人なども、あいなく目を側めつつ、いとまばゆき人の御おぼえなり。唐土にも、かかる事の起りにこそ、世も乱れあしかりけれと、やうやう、天の下にも、あぢきなう人のもてなやみぐさになりて、楊貴妃の例も引き出でつべくなりゆくに、いとはしたなきこと多かれど、かたじけなき御心ばへのたぐひなきを頼みにてまじらひたまふ。</p>いづれの御時にか、女御更衣あまたさぶらひたまひける中に、いとやむごとなき際にはあらぬが、すぐれて時めきたまふありけり。はじめより我はと思ひあがりたまへる御方々、めざましきものにおとしめそねみたまふ。同じほど、それより下臈の更衣たちは、ましてやすからず。朝夕の宮仕につけても、人の心をのみ動かし、恨みを負ふつもりにやありけん、いとあつしくなりゆき、もの心細げに里がちなるを、いよいよあかずあはれなるものに思ほして、人のそしりをもえ憚らせたまはず、世の例にもなりぬべき御もてなしなり。上達部上人なども、あいなく目を側めつつ、いとまばゆき人の御おぼえなり。唐土にも、かかる事の起りにこそ、世も乱れあしかりけれと、やうやう、天の下にも、あぢきなう人のもてなやみぐさになりて、楊貴妃の例も引き出でつべくなりゆくに、いとはしたなきこと多かれど、かたじけなき御心ばへのたぐひなきを頼みにてまじらひたまふ。
うまく使うとカッコイイかもね。
