スクリーンショット 各ブラウザの見栄え CSS機能・疑似要素編

CSS 機能・疑似要素編(before 疑似要素 or after疑似要素)の説明

• content プロパティは、befor疑似要素 or after疑似要素で指定した内容を要素の前後に追加します。
• 疑似要素の内容にはテキストの他、url(〜)を指定して画像を表示することも出来ます。
• この疑似要素は、Windows 版 IE と Mac 版 IE は対応していません。
  • 参考文献 Impress 刊「CSS2 スタイルシート大辞典」

• CSS ファイル内の内容。一例です。(before 疑似要素)
  • p.samplea: before {content: "おしらせ" ;}
  • p.sampleb: before {content: url(*****.png) ;}
• HTML 文書の記述例
  • <p class="samplea">Windows 版 IE と、Mac 版 IE は、対応していません。</p>

あなたがお使いのブラウザで、この文章の先頭に表示されている、白い背景色に赤文字の「Note」という文字は見えていますか ?

リスト項目へ ↑

当サイトのトップページ、Windows 版 Firefox 2.x 。「あいさつと、新着情報」で使用されている自動的に生成する疑似要素、 が正しく表示されています。２００６年１１月１２日撮影。

サイズ 960×720。45.94KB

リスト項目へ ↑

当サイトのトップページ、Windows 版 SeaMonkey 1.0.x です。「あいさつと、新着情報」で使用されている自動的に生成する疑似要素、 が正しく表示されています。２００６年１１月１２日撮影。

サイズ 960×720。42.43KB

リスト項目へ ↑

当サイトのトップページ、Windows 版 Opera 9.0.x。Opera も同様に、 が正しく表示されています。２００６年１１月１２日撮影。

サイズ 960×720。43.24KB

リスト項目へ ↑

当サイトのトップページ、Windows 版 IE 7。画面上部囲み部分、「あいさつと新着情報」で、残念ながら IE 7でも、 が、表示されていません。２００６年１１月１２日撮影。

サイズ 960×720。42.0KB

リスト項目へ ↑

当サイトのトップページ、Windows 版 IE 6。画面上部囲み部分、「あいさつと新着情報」で、IE では  が、表示されていません。２００６年９月２０日撮影

サイズ 960×720。41.53KB

関連ページWindows & Mac 版 IE が対応していないCSS機能

リスト項目へ ↑

当サイトのトップページ、Mac 版 Safari 2.0.3。各 OS の SeaMonkey Mozilla Opera と同様に、 が正しくでています。２００６年１１月１２日撮影。

サイズ 960×720。96.23KB

リスト項目へ ↑

当サイトのトップページです。Mac 版 Shiira(シイラ) 1.2.2。他のブラウザと同様に、 が正しく表示されています。２００６年１１月１２日撮影。

サイズ 960×720。90.62KB

リスト項目へ ↑