[所要時間20分]IEにもHTML5・CSS3を反映させる3step

更新

最近は、wordpressのテーマなど、様々なテンプレートに当たり前のようにHTML5とCSS3が導入されつつあります。

しかし、IEでは、IE9まではHTML5とCSS3への対応がとても遅れていて、HTML5とCSS3でデザインされたサイトは表示が崩れてしまう恐れがあります。

表示崩れの防止策をまとめてみました。

IEに、HTML5とCSS3でデザインしたサイトをきちんと表示してもらうには、以下の3つをIEに認識させなければいけません。

  1. html5特有のタグ
  2. css3特有のCSSセレクタ
  3. CSS3特有のプロパティー

それぞれに対応するためのツールは以下のとおりです。

  1. html5shiv
  2. Selectivizr
  3. CSS3PIE

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でも使えるようにするツールです。

まず、以下のサイトに行って、とてもわかりやすいダウンロードボタンをポチっ。
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」をクリックします。
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;

を追加するとうまくいきます。

[所要時間20分]IEにもHTML5・CSS3を反映させる3step」への2件のフィードバック

  1. 通りすがり

    一番目のhtml5shivはgooglecodeのサービスが終了しているようです。

コメントは停止中です。