CSS3 Pre-Reference



::first-letter

1文字目

試す

コード

p::first-letter { font-size: 200%; font-style: italic; float: left; }
p span { color:blue; }

サンプル

1段落目:1文字目のみドロップキャップされます。
2段落目:”「そ”までがドロップキャップされます。
3段落目:実装は任意ですが”(青”までがドロップキャップされるはず。”青”は青文字です。
4段落目:最初に改行が入っているのでドロップキャップされません。

吾輩がない、腹がこんな片輪(があとで運転して勤まるものであるか自分だけがいわゆる人間中からとにかく明るくてい上(かたわ)った。なぜそんな無闇(むやみ)をしたと聞く人があるかも知れぬ。

「その時の母親さえ姿を見た感じがつるつるしていないと持ち上げられた。」

青文字その後(けむり)したから火がある。ただその日がよかろう度毎まった。


「ここだけ文字が青です。ここだけ文字が青です。ここだけ文字が青です。ここだけ文字が青です。縁はないと思っても声があまりに突起している事を明いてまるで薬缶(くびすじ)が一疋(あ)が隣家(わら)り出して台所へ棄てられてスーとはつくづくいやこれという考もなかった所と寒いの上(たび)はよく云(あが隣家(あとである。

コメントする


対応ブラウザ

Firefox
Chrome/Safari
Opera
InternetExplorer
まだ

パラメータ

レベル 1
参考文献 Selectors Level 3#7.2. The ::first-letter pseudo-element

解説

ブロック要素の1文字目を選択します。

1文字目は1行目に出現する必要があります。つまり、要素の最初に<br>で改行されていた場合は適用されません。

鉤括弧(「)や引用符("や')等、UNICODEでパンクチュエーションとして分類されている文字は1文字としてカウントしません。スタイルは、次に現れるパンクチュエーション以外の文字を含めて適用されます。

よく、1文字目だけ文字の大きさを3倍くらいにして左側に3行をぶち抜いて表示するような表現がありますが、その技法は”ドロップキャップ”と呼ばれています。

CSS3では、ドロップキャップのための仕組みが新たに多数導入されています。

::first-letter疑似要素では、利用可能なプロパティが制限されています。プロパティが増えたにもかかわらず、まだ制限内容がほとんど変更されていないため、今後変更があると思われます。

トラックバック

投稿されたコメント