TopCSS > 2006年3月
2006年3月11日

標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する

March 11,2006 1:55 AM
Tag:[, , , ]
Permalink

IEでドロップシャドウ画像に枠を表示する以前エントリーした「CSSで画像に影をつける(ドロップシャドウ)」で、IEで画像枠が表示されない不具合についての対処方法です。
対処することで、スクリーンショットのようにIEでも画像枠が表示されるようになります。*1

元エントリーで記しているとおり、実験サイトではIEで画像枠(= padding プロパティ)がついていたのですが、エントリー時には画像枠がつかない状態になっていました。そのことについてあまり気にしていなかったのですが、先日この件に関するご質問を頂いて調べたところ、原因が判明しました。

おおざっぱな結論から申し上げますと、テンプレート1行目にあるXML宣言

<?xml version="1.0" encoding="utf-8"?>

が画像枠の表示に影響しています。当サイトでは1行目にXML宣言を記述しているため、実験サイト(XML宣言なし)と異なる結果になっていました。
表示の違いについては以下のサンプルでご確認ください。

XML宣言ありXML宣言なし

XML宣言が影響する原因は、下記の2点です。

  1. XML宣言が記述されている場合に「後方互換モード」になる
  2. IE6 の後方互換モード(および5.5以前)の場合、img 要素に padding プロパティが有効にならない

以下、順を追って説明します。

概要(標準準拠モードと後方互換モード・DOCTYPE宣言)

IEやMozilla 等のブラウザには、CSSに準拠してHTMLを表示するモードを「標準準拠モード」と、古い形式でマークアップされたHTMLに対応するための「後方互換モード」に対応しています。どちらのモードで表示されるかについては、以下のような DOCTYPE 宣言(文書型宣言)に依存します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

標準準拠モードと後方互換モード、および DOCTYPE 宣言の種類等については下記に詳細な説明があります。

今すぐ調べる!ホームページ作成リファレンス標準モードと互換モードについて
カスタムチャンス! 雑記帖文書型宣言とブラウザの表示モード

XML宣言が記述されている場合に「後方互換モード」になる

1番目の原因で、IE6 では DOCTYPE 宣言を1行目(先頭)に書かないと、必ず「後方互換モード」として解釈されてしまうバグが存在します。つまり1行目にXML宣言が記述されているとこのバグが発生します。
カッコ書きで「先頭」と明記しているのは、同じ行の前にXML宣言を記述しても後方互換モードとして解釈されるためです。

Lucky bag::blogxml宣言について

後方互換モードで img 要素の padding プロパティが有効にならない

そして2番目の原因として、IE6 の後方互換モードでは img 要素の padding プロパティが有効にならないというバグがあります。標準準拠モードでは問題なく表示されます。

CSSバグリスト@CSSバグ辞典スレッドimg要素にパディングが効かない

このような経緯で、マークアップ1行目のXML宣言によって「画像枠が表示されない」という問題が発生します。

まとめ

IEで画像枠(padding)を表示するためには、下記の条件を満たしている必要があります。

  1. 1行目の先頭に DOCTYPE 宣言がある
  2. 標準準拠モードが有効になるDOCTYPE 宣言が記述されている

2番目の「標準準拠モードが有効になるDOCTYPE 宣言が記述されている」の意味は、DOCTYPE宣言を1行目の先頭に記述しても、宣言内容によっては後方互換モードとして解釈される場合があります。
下記の DOCTYPE 宣言では標準準拠モードとして解釈され、画像枠が表示されることを確認しています。

HTML 4.01 Strict DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

HTML 4.01 Frameset DTD(URLあり)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01 Tranditional DTD(URLあり)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

DOCTYPE宣言と標準準拠モード対応について

2番目にある「標準準拠モードが有効になるDOCTYPE 宣言が記述されている」ですが、DOCTYPE宣言と標準モードの対応状況については Microsoft の下記のサイトに掲載されています。

MSDN OnlineInternet Explorer 6 における CSS の拡張の !DOCTYPEの例

該当部分を引用させて頂くと下記の通りです。

LabelDefinitionURLありURLなし
HTML 4.0指定なし有効有効
HTML 4.0Frameset有効無効
HTML 4.0Transitional有効無効
HTML 4.0Strict有効有効
XHTML 有効有効

一覧の「Label / Definition / URL あり / URLあり」の組み合わせで有効(=標準準拠モード)・無効(後方互換モード)が決まります。例えば「HTML 4.01 Transitional」については「URLあり」の場合のみ有効になることがお分かりになると思います。
XHTMLについてはXML宣言を削除すれば有効になります。


*1 スクリーンショットは完成イメージです。

Comments [14] | Trackbacks [8]
2006年3月 6日

エントリーを透過して背景画像を薄く表示する

March 6,2006 1:10 AM
Tag:[, ]
Permalink

背景画像を固定するのエントリーで背景画像を透過させるカスタマイズを紹介しましたが、背景画像を薄く透過する方法についてご質問を頂きましたので、本エントリーで紹介致します。

以下、公開テンプレートの3カラム固定レイアウトを例にした説明です。リキッドレイアウトの場合、ここで紹介する方法では全てのカラムできれいに透過させることができませんが、部分的に透過する方法を4項で説明しています。
完成サンプルはいずれもエントリーの最後のリンクからご覧ください。

1.背景色の削除

カラム横に表示される背景色の設定(赤色部分)をを削除します。この背景色の代わりに背景画像を表示します。

body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #36414d;
}

2.背景画像の表示

CSSに body セレクタを追加して背景画像を指定します。ここでは background-attachment プロパティを追加して画像を固定していますが固定しない場合は不要です。

body {
    background-image: url(hogehoge.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-attachment: fixed;
}

3.ブログ全体を透過する

2項の body セレクタに下記の filter プロパティおよび opacity プロパティ(青色部分)の追加します。これでブログ全体を透過して背景画像を表示することができます。

body {
     :
    (略)
     :
    filter: Alpha(opacity=80);
    opacity:0.8;
}

プロパティ値にある「80」 や「0.8」がブログ全体の透明度を表しますのでお好きな比率に調整してください。

4.リキッドレイアウトの場合

本サイトで公開しているリキッドレイアウトテンプレートはCSSの制約上、左右サイドバーの余白部分について背景画像を薄く表示することができません。ということでここでは中央カラムのみ透過する方法を紹介します。

2項および3項の設定を行った後、.blog セレクタに background プロパティを設定してください。

.blog {
    padding: 10px;
    font-size: small;
    color: #36414d;
    background: #ffffff;
}

公開テンプレートに設定したサンプル(リキッドレイアウト固定レイアウト

画像は Suggestive Contour Gallery より拝借しました。

2006.03.10 追記
Firefoxで正常に表示されていなかったため、CSSを修正しました(@import 文が誤ってました)。

Comments [3] | Trackbacks [1]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3