最近は、wordpressのテーマなど、様々なテンプレートに当たり前のようにHTML5とCSS3が導入されつつあります。
しかし、IEでは、IE9まではHTML5とCSS3への対応がとても遅れていて、HTML5とCSS3でデザインされたサイトは表示が崩れてしま
html5shiv
html5shivはhtml5特有のタグをIEで使えるようにするためのツールです。
これについては、簡単です。以下の内容を<head>～</head>に書けばいいだけです。
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
なお、wordpressデフォルトテーマのtwentyelevenとかtwentytwelveでは、デフォルトでIEにhtml5特有のタグを読ませる仕様になっているので、上記の内容は必要ありません。
2017/3/21 html5shivはgooglecodeのサービスが終了しているようです。
Selectivizr
SelectivizrはCSS3のセレクタをIEでも使えるようにするツールです。
まず、以下のサイトに行って、とてもわかりやすいダウンロードボタンをポチっ。
[img-link url=”http://selectivizr.com/” title=”Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8″]
ダウンロードされたzipファイルを解凍して、サイト内の任意の場所にselectivizr.jsをアップロードします。
そして、<head>～</head>にselectivizr.jsへのパスを記入します。ドメイン直下にselectivizr.jsを置いた場合、以下のようになります。
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="/selectivizr.js"></script>
<![endif]-->
IE6、IE7、IE8のみに適用させるのでif文が使われています。
ところで、このselectivizr.jsは以下のjavascriptのライブラリのうちどれかがないと動きません。
「ライブラリなんてよくわからない」という場合は、Google Libraries APIのjQueryを使っておきましょう。以下のコードを<head>～</head>に貼り付ければOKです。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
CSS3PIE
CSS3PIEはcss3のプロパティーの一部を、IE6以降IE9以前のIE全てで有効にするツールです。具体的には次の5つプロパティーが使えるようになります。（順次拡張中だそうです。）
- border-radius
- box-shadow
- border-image
- multiple background images
- linear-gradient as background image
まず、下記のサイトに行って、右サイドバーの「→download」をクリックします。
[img-link url=”http://css3pie.com/” title=”CSS3 PIE: CSS3 decorations for IE”]
次に、ダウンロードされたzipファイルを解凍して、サイト内の任意の場所にPIE.htcをアップロードします。
そして、CSS3特有のプロパティーを使ってstyleを指定したときには、最後の行に
behavior: url("PIE.htcへのパス");
を記入します。
PIE.htcをドメイン直下に置いた場合は、以下のようになります。
.shampoo-r{
color:white;
background-color:green;
margin:2px;
padding:3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 10px;
box-shadow: 1px 1px 1px lightgray;
behavior: url(/PIE.htc);
}
これで、上にリスト表示した5種類のプロパティーについてはうまくいくはず、なのですが…
linear-gradient
linear-gradientでグラデーションの背景を表現しようとすると、
-pie-background: linear-gradient(…,…,…);
という記述が必要です。
その他うまくいかないとき
グラデーション背景以外でも、何故か表示がうまくいかないときがあります。そんなときは、
position:relative;
を追加するとうまくいきます。