単純なCSSドロップキャップ

新しいブログのデザインで使用しているドロップキャップ効果と、ほとんどのブラウザーが表示する第一選択のアッパーシングに気付くことはできません（Safariを除く、すぐに説明します）。

この効果を実装するにはかなりの数のハッキーな方法がありますが、最もクリーンで最もメンテナンス可能なものは、純粋なCSSです。

このアプローチは、追加のマークアップも画像も、コンテンツについて知る必要もないことを意味します。最初の文字と最初の行が何であれ、効果が適用されます。

これがそれを実現するCSSです：

#post-content > p:first-child:first-line, 
#post-content > .ad:first-child + p:first-line
{
    text-transform:uppercase;
    position:relative;
    font-size:0.95em;
    letter-spacing:1px;
}

#post-content > p:first-child:first-letter, 
#post-content > .ad:first-child + p:first-letter
{
    letter-spacing:0;
    text-transform:uppercase;
    color:#628fbe;
    font-family:times,serif;
    font-size:3.5em;
    float:left;
    margin:0.13em 0.2em 0 0;
    line-height:0.7;
}

コンテンツ領域内の最初の段落に、効果を適用しようとする2つの異なるセレクターがどのようにあるかがわかります。それは、

としてマークアップされた段落の直前に、の直前に広告の存在または不足を可能にするのに十分柔軟である必要がありました。そのため、理想的には、親コンテキスト内で指定されたタイプの最初の要素を選択するFirst-of-Typeを使用していました。

#post-content > p:first-of-type:first-line
{
}

#post-content > p:first-of-type:first-letter
{
}

しかし、それは広くサポートされていません。私たちが使用しているセレクターは、そうでなければそうしないIE8

のサポートを得ることを意味します。

ファーストラインの大文字の場合、残念ながらSafariのサポートは得られません。それはセレクターのためではなく、ここに示すすべての例をサポートし、それらのルール内に他のプロパティを適用します - テキストトランスフォームを適用しません。これは、Safariが変換を適用しない多くの異なる状況で、すぐに面倒な理由で気づいたものです。対応するのために機能した要素に適用できないことがわかりました。ここでは、段落全体に適用された場合に機能するにもかかわらず、段落の最初の行に適用できないことがわかります。図に行く。

ドロップキャップ自体については、実装が非常に簡単であることがわかります。そのルールの注目すべきことは、マージントップとラインハイイトの組み合わせで、文字を所定の位置に持ち込むことです。これらの2つのプロパティを省略した場合、これを取得します。

ラインハイトの前のドロップキャップが適用されます。

左から右に見ているのは、Firefox、Opera、Safariです。実際、オペラとサファリが正しくなる間、誤ってレンダリングしているのはFirefoxです。Firefoxは、親段落のラインハイトを最初の文字に適用しており、他のブラウザーは文字のフォントサイズに対応するラインハイトを正しく適用しています。

したがって、違いを利用して、ブラウザ間の結果を均等にすることができます。ラインハイイトを徐々に減らします。これは、オペラとサファリ（およびIE8

）で同様の結果が得られるまで、Firefoxに違いはありません。

ラインハイト後のドロップキャップが適用されます。

次に、垂直方向の位置が正しく見えるまでマージントップを追加するだけです。

Firefoxでこのレンダリング行動を見たのは初めてではありません。また、Firefoxにのみ適用できるCSS ハックがないため、このような違いは、ブラウザの調整を適用できる唯一の方法です。また、ブラウザの調整が進むにつれて、これは完全に将来の根拠です。Firefoxが実装を修正し、正しいラインハイイトを適用すると、そもそも他の人と同じように出てきます。

皮肉なことに、Firefoxが間違っている唯一のブラウザである場合、Firefoxを除くすべてのブラウザを修正することになります。しかし、それが私たちの業界の仕組みです。あなたのミサスと同様に、Firefoxは「常に正しい」です。

サムネイルクレジット：thoth

CSSドロップキャップに関するよくある質問（FAQ）

CSSドロップキャップとは何ですか？なぜ使用されるのか？作品の始まりに注意を引くために使用され、視覚的に魅力的で読みやすくします。このスタイルは、ユーザーのエクスペリエンスとエンゲージメントを強化するために、本、雑誌、ウェブサイトでよく見られます。

CSSドロップキャップを作成するにはどうすればよいですか？

CSSドロップキャップの作成には、CSS擬似要素の使用が含まれます。この擬似要素は、ブロックレベルの要素の最初の文字をターゲットにします。その後、フォントサイズ、ラインハイイト、フロートなどのスタイルを適用してドロップキャップエフェクトを作成できます。

CSSドロップキャップの外観をカスタマイズできますか？フォント、色、サイズを変更し、背景や境界線を追加することもできます。これにより、ウェブサイトのスタイルとブランディングに合ったユニークで視覚的に魅力的なデザインを作成できます。ただし、特に垂直アライメントとパディングに関しては、異なるブラウザがドロップキャップをどのようにレンダリングするかについては、いくつかの矛盾がある場合があります。デザインを複数のブラウザでテストして、意図したとおりに見えるようにすることをお勧めします。

任意のテキスト要素でCSSドロップキャップを使用できますか？ただし、インライン値の表示値を持つインライン要素または要素では予想どおりに機能しない場合があります。

なぜ私のCSSドロップキャップが機能しないのですか？

CSSドロップキャップが機能していない場合、いくつかの理由があるかもしれません。最も一般的な問題は、誤ったCSS構文であり、スタイルをインライン要素またはブラウザの互換性の問題に適用します。 CSSが正しいことを確認し、要素がブロックレベルの要素であり、ブラウザは:: First-letterの擬似要素をサポートします。これにより、デスクトップから携帯電話まで、すべてのデバイスでドロップキャップがよく見えるようになります。フェードイン、バウンス、回転などの効果を作成して、ドロップキャップをよりダイナミックで魅力的にすることができます。色、画像、またはグラデーションを背景として指定できます。背景のサイズと位置を調整して、デザインに合わせて調整することもできます。

WebフォントでCSSドロップキャップを使用できますか？ CSSのフォントファミリーを指定して、ドロップキャップにカスタムフォントを使用できます。これにより、ウェブサイトのスタイルとブランディングに合ったユニークでパーソナライズされたデザインを作成できます。

以上が単純なCSSドロップキャップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。