CSS

2017/05/03

ドロップキャップの作り方。first-letter擬似要素というのがありまして、文字通り1文字目に対するスタイルを設定します。1文字めは何に対しての1文字目かといいますとブロックを形成する要素の1文字目ということになります。いわゆるインラインな要素、改行を伴わない、ブロックを形成しない要素に対しては、効果はありません。詳しくは、https://www.w3.org/TR/css3-selectors/#first-letterにあります。

HTML

<p class="dc">first-letter擬似要素というのがありまして、…</p>

CSS

.dc:first-letter{
  font-size:200%;
  color:#ff0000;
  float: left;
  margin:6px 4px -6px 0;
}

文字サイズを倍にして文字色を赤にしています。floatしなければ文字の頭が上に飛び出してしまうからです。あとはマージンで微調節です。

この行はワードでいう、1行目のインデントにも使えます。いわゆる字下げというやつです。Webではどちらもあんまり、というか見たことないくらいのレベルで使われていませんが 😅

CSS

.dc1:first-letter{
  margin:0 0 0 1em;
}

1文字目が字下げされました。