海外のサイトで一文字目の文字だけ大きくなっていて記事が始まるよーなデザインをよく見かける。
これ、かっちょいいよね。
このデザインはドロップキャップと呼ばれるデザイン方法らしい。段落の1文字めだけを大きくするのはタブロイド紙などでよく見かけるな。
で、どーやってやるのかなと思って調べたらCSSを使っているよーだ。
よくわかんないが first-letter というものを使うようだ。
first-letterって文字通り「はじめの文字」についての設定のようだね。
CSSのセレクタ(選択子)とか擬似要素とかよく理解できてないが、こんな感じで設定するようだ。
たとえば段落<p></p>の中でdropcapを掛けたい場合を考えよう。
いづれの御時にか、女御更衣あまたさぶらひたまひける中に、いとやむごとなき際にはあらぬが、すぐれて時めきたまふありけり。はじめより我はと思ひあがりたまへる御方々、めざましきものにおとしめそねみたまふ。同じほど、それより下臈の更衣たちは、ましてやすからず。朝夕の宮仕につけても、人の心をのみ動かし、恨みを負ふつもりにやありけん、いとあつしくなりゆき、もの心細げに里がちなるを、いよいよあかずあはれなるものに思ほして、人のそしりをもえ憚らせたまはず、世の例にもなりぬべき御もてなしなり。上達部上人なども、あいなく目を側めつつ、いとまばゆき人の御おぼえなり。唐土にも、かかる事の起りにこそ、世も乱れあしかりけれと、やうやう、天の下にも、あぢきなう人のもてなやみぐさになりて、楊貴妃の例も引き出でつべくなりゆくに、いとはしたなきこと多かれど、かたじけなき御心ばへのたぐひなきを頼みにてまじらひたまふ。
先ずスタイルシートを読み込んでおくな。
<link rel="stylesheet" type="text/css" href="https://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>
結果:
いづれの御時にか、女御更衣あまたさぶらひたまひける中に、いとやむごとなき際にはあらぬが、すぐれて時めきたまふありけり。はじめより我はと思ひあがりたまへる御方々、めざましきものにおとしめそねみたまふ。同じほど、それより下臈の更衣たちは、ましてやすからず。朝夕の宮仕につけても、人の心をのみ動かし、恨みを負ふつもりにやありけん、いとあつしくなりゆき、もの心細げに里がちなるを、いよいよあかずあはれなるものに思ほして、人のそしりをもえ憚らせたまはず、世の例にもなりぬべき御もてなしなり。上達部上人なども、あいなく目を側めつつ、いとまばゆき人の御おぼえなり。唐土にも、かかる事の起りにこそ、世も乱れあしかりけれと、やうやう、天の下にも、あぢきなう人のもてなやみぐさになりて、楊貴妃の例も引き出でつべくなりゆくに、いとはしたなきこと多かれど、かたじけなき御心ばへのたぐひなきを頼みにてまじらひたまふ。
うまく使うとカッコイイかもね。
