:first-letter擬似要素と隣接セレクタを使用する
XHTMLソース
<div id="wrapperAll">
<h1>ドロップキャップで文書にリズムを与える</h1>
<div class="section">
<h2>第1章について</h2>
<p>第1章について書かれているテキスト。各章のはじめの段落の1文字目にドロップキャップを適用。</p>
<p>第1章について書かれているテキスト。2番目以降の段落にはドロップキャップは適用されない。</p>
<p>第1章について書かれているテキスト。2番目以降の段落にはドロップキャップは適用されない。</p>
<p>第1章について書かれているテキスト。2番目以降の段落にはドロップキャップは適用されない。</p>
<p>第1章について書かれているテキスト。2番目以降の段落にはドロップキャップは適用されない。</p>
</div>
...
<!-- wrapperAll End --></div>
CSSソース
h1 {
font-size: 200%;
margin: 0.5em;
}
h2 {
font-size: 150%;
margin: 0.66em 0;
}
div.section {
margin:1em;
padding: 1px 1em;
background: #fff;
}
div.section h2 + p:first-letter {
float: left;
margin: 0 0.25em 0.25em 0;
line-height: 1.0;
color: #06C;
font-size: 300%;
}
div.section + p + * {
clear: both;
}
Internet Explorer 6の場合はp要素に直接classを指定する
XHTMLソース
<div class="section">
<h2>第1章について</h2>
<p class="lead">第1章について書かれているテキスト。各章のはじめの段落の1文字目にドロップキャップを適用。</p>
<p>第1章について書かれているテキスト。2番目以降の段落にはドロップキャップは適用されない。</p>
<p>第1章について書かれているテキスト。2番目以降の段落にはドロップキャップは適用されない。</p>
<p>第1章について書かれているテキスト。2番目以降の段落にはドロップキャップは適用されない。</p>
<p>第1章について書かれているテキスト。2番目以降の段落にはドロップキャップは適用されない。</p>
</div>
CSSソース
div.section p.lead:first-letter {
float: left;
margin: 0 0.25em 0.25em 0;
line-height: 1.0;
color: #06C;
font-size: 300%;
}
見出しの装飾への使用例
XHTMLソース
<h1>見出しの装飾</h1>
<p class="note">※ 注意書きなどに使用される「※」マークの装飾</p>
CSSソース
h1 {
border: 1px solid #C33;
}
h1:first-letter {
color: #FFF;
font-size: 120%;
font-weight: bold;
background: #C33;
}
p.note:first-letter {
color: #C33;
}
