ホームページ作成/テキストの配置・装飾 (HTML,CSS)

CSSで見出しの頭に画像を加える(前編)(4ページ目)

見出しのデザインとして、見出しの先頭に画像を加えてみたいと思ったことはありませんか? スタイルシートを使えば、たった1つスタイルを定義するだけで、すべての見出しの先頭に同じ画像を加えることができます!

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

疑似要素を使う大きな問題点とは

前ページまでにご紹介してきた「before疑似要素」と「contentプロパティ」を用いた方法には、問題点があります。
それは、 Internet Explorerでは非対応 だという点です。
Internet Explorer 6.0 では、これらの指定は一切解釈されず、無視されてしまいます。

※ただ、今回ご紹介した方法は、CSS2の規格として正式に存在するものですし、将来的にはIEでもサポートされるでしょう。現在のところ、Netscape Navigator 7、Opera 7、Safari 1 などでは正常に表示されます。

結局、使えない?

IEで表示されないのなら、「結局、使えないんじゃないか」と思われる方々も多いでしょう。というわけで、次回は、これの代替案として現実的な方法をご紹介致します。

この「現実的な方法」なら、IEでも完全に表示されますし、Netscape 4.xなどの古いブラウザでも、そこそこ表示されます。記述量が少々増えますが、スタイルシートだけで実現できる方法です。

それでは、次の記事「見出しの頭に画像を加える(後編)」へ!

また、以下の関連記事もぜひご参照下さい。

【関連記事】

【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
  • 3
  • 4
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます