*

HTML5+CSS3をIE8以下にも適用させる方法。html5shiv.js & PIE.htc

公開日: : 最終更新日:2013/11/29 HTML+CSS

HTML5とCSS3をIE8以下でも対応させる覚書です。

html5shiv.js

以前は下記のようにGoogle Codeへの直リンクで読み込ませる方法が多かったのですが。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

これが2012年初頭より、フォルダ内のhtml5shiv.jsもしくはhtml5shiv-printshiv.jsをサイト内の任意ディレクトリに格納して読み込むように仕様変更されていました。

html5shivGoogleCode download html5shiv

html5shiv.jsファイルの場所は環境に応じて変更

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

html5shiv.jsとhtml5-printshiv.jsの違いですが、html5shiv-printshiv.jsは印刷用のサポートもされているという違いのようです。

html5の新要素はデフォルトでインライン要素として表示されるので、表示崩れを防ぐたにCSSでブロック要素に置き換える記述をします。

/* HTML5 */
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
display:block;
}

CSS3PIE(PIE.htc)

CSS3 PIEのジェネレーターを使って生成したCSS3のソースコードをPIE.htcファイルと一緒に読み込み、IE8以前にCSS3のスタイルを適用させます。

css3pieCSS3PIE

PIE.htcをCSS3を記述したCSSファイル内で読み込む。

#btnstyle {
border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/css/PIE.htc);
}

PIE.htcで適応できるCSSは

  1. 角丸(border-radius)
  2. シャドウ(box-shadow)
  3. グラデーション(linear-gradient)
behavior: url(/css/PIE.htc);

既存の各スタイルシートの一番最後に、behaviorスクリプトとして「PIE.htc」を指定する。
※サイトルートからの絶対配置。

関連記事

HTML5で追加された要素と使用方法サンプル、備忘録!

HTML5の書式は簡略化されていてソースも軽くなり使いやすいですが、ブラウザ対応状況などですべてを使...

記事を読む

古いiOSのiPadで「問題が起きたため、このwebページを再度読み込みました。」となる件

2年ぶりに書いてみる。 すでにAppleより見放されてiOSが9.3.5止まりのiPad初期型...

記事を読む

各種ブラウザ表示検証用Webツール

制作環境WindowsOSで、Macでの表示を確認したい 昨今では、MacからWindows表示検...

記事を読む

IE11 ユーザーエージェント・スニッフィング 無効 マイクロソフトの強行仕様変更!

元々はマイクロソフト産ブラウザIEが右習いをしない体制が悪いのに!!! ようやく4月にIE6の呪縛...

記事を読む

新着記事

古いiOSのiPadで「問題が起きたため、このwebページを再度読み込みました。」となる件

2年ぶりに書いてみる。 すでにAppleより見放されてiOSが9.3.5止まりのiPad初期型...

記事を読む

WordPressのエラーを表示させる。白紙状態になったとき。

WordPressのテーマ制作などでfunction.phpの編集やプラグインのインストールなどして...

記事を読む

Dreamweaver CC 2017 正式リリース、早速使ってみた!

一昨日、Dreamweaver CC 2017 が正式にリリースされました。 夏前よりBeta版を...

記事を読む

Windows10 フリーズしたように動作が重くなる現象と対策!

先日、Windows 10 Anniversary Updateをしたばかりですが、その後突然フリー...

記事を読む

【突然くるぞ!】 Windows 10 Anniversary Updateで2時間以上お仕事ストップ!

Microsoftさんがまたヤッてくれました。 お仕事中にアプリケーションが重たくなってきたの...

記事を読む

古いiOSのiPadで「問題が起きたため、このwebページを再度読み込みました。」となる件

2年ぶりに書いてみる。 すでにAppleより見放されてiOSが9...

WordPressのエラーを表示させる。白紙状態になったとき。

WordPressのテーマ制作などでfunction.phpの編集やプ...

Dreamweaver CC 2017 正式リリース、早速使ってみた!

一昨日、Dreamweaver CC 2017 が正式にリリースされま...

Windows10 フリーズしたように動作が重くなる現象と対策!

先日、Windows 10 Anniversary Updateをした...

【突然くるぞ!】 Windows 10 Anniversary Updateで2時間以上お仕事ストップ!

Microsoftさんがまたヤッてくれました。 お仕事中にアプリ...

→もっと見る

PAGE TOP ↑