CSSの先頭行と先頭文字の要素を持つ段落Dropcap

実際にはめったに使用されないと思われるCSSセレクターまたはプロパティがいくつかありますが、実際にはCSS 1の時代から存在していました。いくつかの彼らは含まれています ：一行目 そして ：最初の一文字 ペスド要素.

使い方?

これらの擬似要素は基本的に、その兄弟、 - ：beforeと：after - に似た働きをします、そして私もそれらが非常に簡単であると思います。の ：最初の一文字 選択した要素の最初の文字または文字をターゲットにします。 疑似要素 ドロップキャップのような文字体裁効果を作成するためによく使用されます。これがどのように行われるかです。.

 p：最初の文字フォントサイズ：50ピクセル;

このコードは次のようになります。.

注意すべき点がいくつかありますが、この効果は最初の文字の前に別の要素、たとえば画像がない場合にのみ適用されます。また、同じターゲット要素が連続している場合は、それらすべても影響を受けます。.

さらに、 ：一行目, この 疑似要素 以下の例は、段落の最初の行を太字にする方法を示しています。.

 p：1行目フォントの太さ：太字。

の前置きコードのように ：最初の一文字, これは、ページ内にある段落要素の最初の行すべてにも影響します。.

そのため、実際には、ドロップキャップを追加したり、最初の行を変更したりする場合が一般的です。のみ最初の段落では、クラス属性を追加するか、これらの擬似要素を一緒に適用することによって、より具体的にする必要があります。 ：第一子 または ：ファースト・オブ・タイプ セレクタ、そう.

 p：最初の子：最初の文字フォントサイズ：50ピクセル;  p：最初の子：最初の行フォントの太さ：太字。

そこへ行くと、影響を受けた段落は最初の段落になります.

仕事中の擬似要素

それでは、擬似要素を利用して段落の外観をよくしてみましょう。しかし、始める前にドロップキャップ用の特別なフォントが必要です。ここが私の選択です：Paul LloydによるHominis。次に、次のようにスタイルシートに新しいフォントファミリを定義します。.

 @ font-face font-family： 'HominisNormal'; src：url（ 'fonts / HOMINIS-webfont.eot'）; src：url（ 'fonts / HOMINIS-webfont.eot？#iefix'）形式（ 'embedded-opentype'）、url（ 'fonts / HOMINIS-webfont.woff'）形式（ 'woff'）、url（ 'fonts / HOMINIS-webfont.ttf '）形式（' truetype '）、url（' fonts / HOMINIS-webfont.svg＃HominisNormal '）形式（' svg '）;フォントの太さ：普通。フォントスタイル：普通。

次に、段落のデフォルトのフォントファミリーを設定します。.

 ｐ ｛色：＃５５５。フォントファミリー： 'Georgia'、タイムズ、セリフ。行の高さ：24ピクセル。

この例では、 ：第一子 最初の段落を対象とし、より目立つように装飾的なスタイルを適用するためのセレクタ。

 p：最初の子パディング：30ピクセル;左ボーダー：5ピクセルソリッド＃7f7664。背景色：＃f5f4f2;行の高さ：32ピクセル。ボックスシャドウ：5px 5px 0px 0px rgba（127、118、100、0.2）。位置：相対;

次に、を使ってドロップキャップを追加します。 ：最初の一文字, フォントサイズを拡大し、それに新しいフォントファミリーを割り当てます。

 p：最初の子：最初の文字フォントサイズ：72px;フロート：左。パディング：10px。高さ：64ピクセル。フォントファミリー： 'HominisNormal';背景色：＃7F7664。右マージン：10px。カラー：ホワイト。 border-radius：5ピクセル。行の高さ：70ピクセル。

また、最初の行を強調します。 ：一行目, そのようです.

 p：最初の子：最初の行フォントの太さ：太字。フォントサイズ：24px。カラー：＃7f7664。

最後に、クリップを使用して最初の段落に装飾属性を追加します。 ：後 疑似要素.

 p：最初の子：後background：url（ "…/images/paper-clip.png"）繰り返しなしスクロール0 0透明。内容： "";表示：インラインブロック。高さ：100ピクセル。位置：絶対右：-5px。上：-35ピクセル幅：100ピクセル。

これで必要なコードがすべて見つかりました。今度は段落の見栄えがよくなります。

以下のリンクからライブデモを見ることもできます。

デモを見る
ソースをダウンロード

最終的な考え

この記事で前述したように、これらの擬似要素、具体的には ：最初の一文字 そして ：一行目 CSS1以降に含まれているので、それ以前のInternet Explorer 8でもサポートされています。.

それでも、私の知る限りでは、それらは大部分が実際には実装されていません。それで、このチュートリアルが何らかの形であなたのウェブサイト上でこれらのCSS機能を試すことを促すことができることを私たちは願っています.