Mac版IEでは適用されないようにするには

Mac版IEには適用されないようにスタイルシートを記述するには、Holly Hackと呼ばれる方法を使って、以下のように記述します。

/* これ以下はMac版IEでは無効 */
p:first-letter {
   ~~~
}
/* ここまで */

これは、コメント領域の終了を表す「 */ 」の直前に「 」記号があると、Mac版IEではコメントの終了を認識できないというバグを利用した方法です。
※最後に必ず「 /* ここまで */ 」のような、Mac版IEでも終了を認識できる(普通の)コメントを記述して下さい。

下記は、この方法を使ってドロップキャップを作った例です。

特定のスタイルをMac版IEのみ適用外にするには、Holly Hack(ホーリーハック)と呼ばれる方法が有効です。 「 */ 」の直前に「 」記号を置き、「 */ 」と記述すると、Mac版IEはコメントの終了を認識せず、続く内容もコメントだと判断してしまうバグを利用した方法です。

Mac版IE以外のブラウザでは、ドロップキャップが表示されているはずです。

おわりに

今回は、スタイルシートを使ってドロップキャップを実現する方法と、「先頭の段落」のみに適用させる方法などをご紹介致しました。
簡単に使えますので、ぜひ試してみて下さい。

【関連記事】




■All Aboutで「お金」について、アンケートを実施中です!
回答いただいた内容をAll About記事企画の参考にさせていただきます
※2021/6/1~2021/6/30まで

・【誰でも回答可】「毎月の家計についてのアンケート」に回答する
抽選で10名にAmazonギフト券1000円分プレゼント

・【40歳以上限定】「相続と親の資産管理についてのアンケート」に回答する
抽選で20名にAmazonギフト券1000円分プレゼント

※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。