DropCaps

DropCapsとは先頭の文字を拡大して回り込ませる表現をするもので、連続する段落のアイキャッチとしてインパクトを与えたい場合に使用する。CSS3のfirst-letterを使うことで実現することができる。

試したHTML

<div id="#drop_content">
 <div id="column">
  <p>数字の1が二つ並んで「いい」と語呂合わせができる11月は「いい〇〇の日」がいくつかある。
  解散後の騒がしさに忘れていたが11月22日は「いい夫婦の日」だった。だが、熟年離婚やら物騒な言葉が胸に浮かんで、
首筋が寒くなる日だとこぼす人もいる。</p>
  <p>一般論だが、夫婦の暮らしは夫の側にいささかの「負い目」があるようだ。40代以上に聞いたあるアンケートによれば、「将来配偶者を介護したいと」と答えたのは女性36%に対し、男性は55%と多かった。</p>
  <p>語呂合わせ数字の解釈も色々とあるようだが、男の「罪滅ぼし」の意識もまじる気がする。「有料老人ホームに入るなら同じ部屋に入りたい」は男性は82%なのに、女性は66%だそうである。昨今は、夫と一緒の墓をいやがる奥さんも多いそうだ。すきま風の手当ては、早め、こまめが肝要になる。</p>
 </div><!--/column-->
</div><!--/content-->

CSS

/*----------- Layout------------*/
#drop_content {
   background: #f0f7e0;
   border: 2px solid #fff;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
   width: 620px;
   padding: 0 20px;
   margin: 20px auto 10px;
   font-size: 14px;
   line-height: 1.6;
}
/*----------- content --------------*/
#drop_content p {
    margin-bottom: 20px;
}
/*------------ column -------------*/
/*  1文字目のみ適用する           */
#drop_content #column p:first-letter {
    font-size: 3em;
    float: left;
    padding: 10px;
    margin-right: 10px;
    line-height: 1;
    font-weight: bold;
    background: #49a342;
    color: #fff;
    text-shadow: 0 0 5px #000;
    border-radius: 20px;
}

サンプル

数字の1が二つ並んで「いい」と語呂合わせができる11月は「いい〇〇の日」がいくつかある。
  解散後の騒がしさに忘れていたが11月22日は「いい夫婦の日」だった。だが、熟年離婚やら物騒な言葉が胸に浮かんで、
首筋が寒くなる日だとこぼす人もいる。

一般論だが、夫婦の暮らしは夫の側にいささかの「負い目」があるようだ。40代以上に聞いたあるアンケートによれば、「将来配偶者を介護したいと」と答えたのは女性36%に対し、男性は55%と多かった。

語呂合わせ数字の解釈も色々とあるようだが、男の「罪滅ぼし」の意識もまじる気がする。「有料老人ホームに入るなら同じ部屋に入りたい」は男性は82%なのに、女性は66%だそうである。昨今は、夫と一緒の墓をいやがる奥さんも多いそうだ。すきま風の手当ては、早め、こまめが肝要になる。