今日サイトは見た目はもちろんSEOの観点からもHTML5で書いた方が何かと都合がいい。XHTMLの今後の方向性にも注目が必要だが、今回はHTML５でサイトを製作した際にメモとして残しておきたいコードとオープンソースだけ書こうと思います。

まずは、HTML5より新しく導入された要素（昔はタグと呼ばれたもの）がIEではまともに機能しないので、ヘッダーに下記のコードをコメントアウトで埋め込む必要がある。

<!--[if lt IE 9]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/css/ie6.css" media="all" /><![endif]-->

※２行目はIE６のみに対応するCSSの定義ですので、必要なければ削除します。

HTML5と合わせて使いたいのがCSS3！

しかし案の定IEではtext-shadowやbox-shadow，background-color: rgba(255, 255, 255, 0.7);などの背景色の透明化，border-radiusでの角丸など、まったく機能せず、容赦なく崩れます；

そこで便利なのが「PIE」というオープンソース。

CSS3 PIE

↑からダウンロードします。

使い方は、上記URLからダウンロードしたフォルダをそのままディレクトリへアップ。 そして、cssファイルの必要な箇所に下記のコードを追記するだけ。

border-radius: 20px;
-moz-border-radius: 20px;  /* Firefox用 */
-webkit-border-radius: 20px;  /* Safari,Google Chrome用 */
behavior: url("PIE/PIE.htc");

例として、角丸のCSSを上げました。

※PIEの使用によって若干処理速度が遅くなるという話も出ております。シンプルな作りのサイトで画像ファイルを極力使いたくない場合などに適しているのかもしれません。