HTML5 と CSS3 でクロスブラウザーの機能を実現する

最新のブラウザーで使用する新しい手法を学ぶ

Comments

HTML と CSS の最新バージョンには、豊富な新機能が揃っています。例えば、HTML5 には Web ページをよりセマンティックにするための新しい要素が組み込まれている他、データをオフラインで保管したり、編集可能なコンテンツ領域を作成したり、ドラッグ・アンド・ドロップ機能を使用したり、他にもさまざまなことができるようになっています。CSS3 では、グラフィックを使わずにボックスの角を丸くすることも、シャドウやグラデーションを追加することもできます。このように非常に興味深い新機能が数多く使用できるようになっているものの、そのすべてが、ブラウザーの違いに関係なく機能するわけではありません。この記事では、Apple Safari、Windows® Internet Explorer®、Mozilla Firefox、Google Chrome を含め、主要なすべてのブラウザーの最新バージョンで今すぐに使える HTML5 および CSS3 の具体的な手法について説明します。

主要なブラウザーのうち、特に Internet Explorer の一部のバージョンでは、新しい HTML5 の要素を認識するのに多少の助けが必要になります。幸い、一般公開されている html5shim という JavaScript ファイル (HTML5 Internet Explorer対応スクリプト) を利用すれば、HTML5 要素を認識してスタイル設定し、適切にレンダリングできるようにすることが可能です。この JavaScript ファイルをインクルードするには、HTML ファイルの <head> ブロック内にリスト 1 のコードを含めるようにし、<head> ブロック内に指定されているどの CSS よりも上に来るようにこのコードを配置すればよいのです。

リスト 1. HTML5 Internet Explorer 対応スクリプト、html5shim
<!--[if lt IE 9]>
<script type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/
html5.js"></script>
<![endif]-->

上記のコードは、このスクリプトを必要としないブラウザーには余分なファイルをロードさせないようにするため、ロードの実行を Internet Explorer 9 よりも前のバージョンの場合にのみ限定しています。この JavaScript ライブラリーの詳細について学ぶには、プロジェクトの Web サイトにアクセスしてください (「参考文献」に、このサイトへのリンクが記載されています)。

HTML5

HTML5 には多数の新しい要素が導入されているだけでなく、その新たな機能は注目に値します。このセクションでは、新しい HTML5 要素をいくつか取り上げ、編集可能なコンテンツ領域を作成する方法、そしてページ間でメッセージを送信する方法を紹介します。

ページを組み立てる

これまで長い間、HTML を使った Web サイトの構築に取り組んできたならば、多くの共通セクションが繰り返し使用されることはご存知のはずです。一般にこれらの共通セクションには、ロゴを始めとするサイトの提供元を示す情報を含めるためのヘッダー、サイトの各セクションへの案内となるナビゲーション、そして著作権情報を記載するフッターなどが含まれます。HTML のこれまでのバージョンでは、これらの要素を識別するには id 属性を使用するのが一般的でした。例えば、<div> に含めるヘッダーでは、その id“header” に設定します (つまり、<div id="header"> となります)。

HTML5 では、新しいタグを使ってこうした特定の領域を定義することができます。領域を識別するための属性を追加する必要はありません。例えば、ヘッダーの id を設定した <div> の代わりに、新しい header 要素を使用することができます。header 要素を使用することは、コーディングの方法としてこれまでよりも論理的であるだけでなく、多くの開発者のコーディング・スタイルはそれぞれに異なることから、別の開発者の Web ページを調べる際にも役立ちます。もちろん、id 属性が有用になるような状況も多々ありますが、header 要素などの共通要素を使用する場合には、この属性はもはや必要ありません。リスト 2 に一例として、headernavsectionarticleaside、および footer の各要素を使用した HTML5 による基本的なページを記載します。

リスト 2. HTML5 による基本的なページの構造
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title>Cross-browser HTML5 and CSS3</title>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/
	html5.js"></script>
    <![endif]-->
</head>
<body>

	<header>
		<nav>
			<!--Navigation-->
		</nav>
	</header>
	
    
    <section id="intro">
        <header>
            <h2>Cross-browser HTML5 and CSS3</h2>
        </header>
        <div>Lorem ipsum</div>
    </section>
    
	<section id="content">
        <section id="articles">
            <article>
                <header>
                    <h2>Article title</h2>
                    <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">
					September 4th 2009
					</time></p>
                </header>
                <div>Pellentesque habitant morbi tristique senectus et netus et 
				malesuada fames ac turpis egestas.</div>
                
                <h2>Comments</h2>
                <form id="comment-form">
                    <input type="text" name="comment" id="comment" />
                    <input type="submit" value="submit" />
                </form>    
            </article>       
        </section>
    
        <aside>
            <h2>About section</h2>
            <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi 
			vitae est. Mauris placerat eleifend leo.</p>
        </aside>
    </section>

	<footer>Copyright notice</footer>

</body>

</html>

各要素の意味は一目瞭然ですが、以下の点を指摘しておきます。

  • HTML5 の doctype は唯一、<!doctype html> だけです。
  • headernavfooter はいずれも、その名のとおりの内容です。
  • section 要素は、Web ページ・レイアウトの各セクション (記事セクション、導入セクションなど) を定義するために使用されます。
  • article 要素は、個々のブログ・ポスト、コメントなどを識別するために使用できます。
  • aside 要素は補足記事として使用できます。この要素の主な目的は、メインのページ・コンテンツの周囲にコンテンツを配置することです。

aside 要素をメインのページ・コンテンツの隣に配置するには、要素の幅が現行のページ幅に上手く収まることを確認してから、要素を配置してください。2 つの要素を並べて配置する手段としては、今まではフロート (float) が一般的に使われていましたが、section 要素と aside 要素を使って表と表のセルを表示するための値を取り込めば、フロートを使用しなくても済みます (図 1 を参照)。

図 1. HTML5 によるページ・レイアウト
header、intro、section、aside、footer タグを使用した HTML5 によるページ・レイアウトの例
header、intro、section、aside、footer タグを使用した HTML5 によるページ・レイアウトの例

表として表示する content セクションを設定する方法、および表のセルとして表示する articles セクションと <aside> タグを使用する方法は、リスト 2 に示されているとおりです。このように、構造全体が表として機能するため、表を構成するための余分なコードが不要となり、列のように並んで配置された表のセルも必要ありません。リスト 3 に一例として、これらの要素を並べて表示する CSS を作成する方法を示します。

リスト 3. 表の値を使用した表示
#content {
	display: table;
}
#articles {
	display: table-cell;
	width: 620px;
	padding-right: 20px;
}
aside {
	display: table-cell;
	width: 300px;
}

編集可能なコンテンツ領域を作成する

ContentEditable も、HTML5 ならではの興味深い機能です。リスト 4 に示すように、要素が ContentEditable 属性を使用することで、その要素は編集可能になります。つまり、細心の注意が必要なフォーム要素を使用しなくても、要素内のテキストを編集できるということです。図 2 に、ContentEditable 属性を使用した例を示します。

図 2. 編集可能なコンテンツ領域
ContentEditable 属性を使用した編集可能なコンテンツ領域の例
ContentEditable 属性を使用した編集可能なコンテンツ領域の例

Ajax を使用すれば、更新内容を簡単にデータベースに保存することができます。さらに、あらゆるブラウザーで機能する HTML5 のローカル・ストレージ機能を使用することによって、この強力な機能をオフラインで使用できるようになります。

リスト 4. 編集可能な HTML 要素の作成
<div id="editable" contenteditable="true">
Pellentesque habitant morbi tristique senectus et 
netus et malesuada fames ac turpis egestas.
</div>

メッセージを送信する

メッセージの送信は、さまざまな可能性をもたらす新しい追加機能です。リスト 5リスト 6 のそれぞれに、メイン Web ページからそのページ内の iframe にメッセージを送信する例を記載します。

リスト 5. メッセージの送信
<form id="comment-form">
    <input type="text" name="comment" id="comment" />
    <input type="submit" value="submit" />
    <iframe id="comment-iframe" src="post-message.html"></iframe>
</form>
<script type="text/javascript" src="assets/js/event.js"></script>
<script type="text/javascript">
    var win = document.getElementById("comment-iframe").contentWindow;
    addEvent(document.getElementsByTagName('form')[0], 'submit', function (e) {
        if (e.preventDefault) e.preventDefault();
        win.postMessage(document.getElementById("comment").value, 
			"http://studiosedition.com");
        // otherwise set the returnValue property of the original event to false (IE)
        e.returnValue = false;
        return false;
    });
</script>

メッセージを実際に送信する処理を行うのは、postMessage という名前の JavaScript 関数です。イベントとその関連プロパティーを取得するには、iframe 内で message という新規イベントを使用します。

リスト 6. 送信されたメッセージの取得
<p id="post-comment"></p>
<script type="text/javascript" src="assets/js/event.js"></script>
<script type="text/javascript">
addEvent(window, "message", function(e){
    if(e.origin !== "http://studiosedition.com") {
        document.getElementById("post-comment").innerHTML = 'Message from ' + e.origin;
    }
    else
    {
        document.getElementById("post-comment").innerHTML = e.origin + " : " + e.data;
    }
});
</script>

上記の例で使用しているカスタム JavaScript イベント関数は、event.js という名前の外部ファイルとしてインクルードされます。リスト 7 に、このスクリプトを記載します。

リスト 7. カスタム・イベント関数
var addEvent = (function () {
  if (document.addEventListener) {
	return function (el, type, fn) {
	  if (el && el.nodeName || el === window) {
		el.addEventListener(type, fn, false);
	  } else if (el && el.length) {
		for (var i = 0; i &lt; el.length; i++) {
		  addEvent(el[i], type, fn);
		}
	  }
	};
  } else {
	return function (el, type, fn) {
	  if (el && el.nodeName || el === window) {
		el.attachEvent('on' + type, function () {
				return fn.call(el, window.event);
			});
	  } else if (el && el.length) {
		for (var i = 0; i &lt; el.length; i++) {
		  addEvent(el[i], type, fn);
		}
	  }
	};
  }
})();

CSS3

CSS3 は Web 設計者に、まったく新しい領域での可能性をもたらします。CSS3 では、シャドウ、グラデーション、回転のローテーション、そして特定のフォントを追加できるようになっています。しかも、Web ページの重荷になる画像を使う必要は一切ありません。このセクションでは、クロスブラウザーの問題に直面することなく、すぐに使用できる非常に興味深い新機能をいくつか抜粋して紹介します。これらの機能によって、Web 設計者は正しく表示する方法を模索するための時間を、人目を引く Web サイトを作成する時間に充てられるようになります。

シャドウを操作する

シャドウは Web ページに奥行きを加えますが、これまでは、シャドウを追加するには画像の使用が不可欠でした。CSS3 では、方向、オフセット、色、ぼかしを含め、シャドウのさまざまな詳細を制御することができます (図 3 を参照)。リスト 8リスト 9リスト 10 に、CSS を使ってシャドウを作成するさまざまな方法を記載します。

図 3. CSS3 によるシャドウのレンダリング
HTML 要素に CSS3 シャドウを適用した例

Firefox でシャドウを要素に適用するには、-moz-box-shadow を使用します。このプロパティーには 4 つの値を割り当てることができます。

リスト 8. Firefox でのシャドウの作成
-moz-box-shadow: 1px 1px 4px #666;

Safari および Chrome の場合には、-webkit-box-shadow を使用してシャドウを要素に適用します。このプロパティーにも、4 つの値を割り当てることができます。

リスト 9. Safari および Chrome でのシャドウの作成
-webkit-box-shadow: 1px 1px 4px #666;

Safari、Chrome、および Firefox でのシャドウには、以下の 4 つのプロパティーを使用することができます。

  • シャドウの横方向のオフセット。オフセット値には、正の値を指定することも、負の値を指定することもできます。オフセットが負の値の場合には、要素の左側に影が付き、正の値の場合には要素の右側に影が付きます。
  • 縦方向のオフセット。このオフセットも同じく、正の値にも負の値にもすることができます。負の値は要素の上に影を付け、正の値は要素の下に影を付けます。
  • ぼかしの半径。値が大きくなるにつれ、ぼかし具合が強くなります。低い値は、シャドウを鮮明にします。
  • 16 進数で指定した色。シャドウの色を 16 進の値で設定することができます。

Internet Explorer を使用する場合の CSS は異なります。リスト 10 に、Internet Explorer でフィルターを使用してシャドウを作成する方法を示します。最初のフィルターの対象はバージョン 6 とバージョン 7 です。2 番目のフィルターはバージョン 8 以降を対象としています。

リスト 10. シャドウを作成するための Internet Explorer 用の CSS フィルター
filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=2px, 
Color='#333333');
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=2px, 
Color='#333333')";

グラデーションを作成する

これまで、グラデーションを作成するさまざまな方法が広まってきました。そのなかで私が気に入っている方法は、1px を繰り返したグラデーションの画像ですが、この手法は CSS3 では必要なくなります (図 4 を参照)。CSS3 では、ブラウザーのタイプによって、それぞれ独自の方法でグラデーションを処理するようになっています (リスト 11リスト 12リスト 13 を参照)。

図 4. CSS3 によるグラデーションのレンダリング
HTML 要素に CSS3 のグラデーションを適用した例
HTML 要素に CSS3 のグラデーションを適用した例

グラデーションの表示を処理するには、いくつかの方法があります。リスト 11 に記載する単純な Firefox の例では、最上部を開始点として 2 番目の引数に指定した色から 3 番目の引数に指定した色へとフェードします。

リスト 11. Firefox でのグラデーションの作成
background: -moz-linear-gradient(top, #eaeaea, #999999);

リスト 12 に記載する Safari および Chrome の例は、Firefox の例と同じ表示になりますが、グラデーションの作成方法は異なります。

  • 1 番目のプロパティーはタイプです。このプロパティーを使って、線形グラデーションにするか円形グラデーションにするかを設定することができます。
  • 2 番目と 3 番目のプロパティーは、グラデーションの開始位置、終了位置です。
  • 4 番目と 5 番目のプロパティーは、グラデーションの開始色、終了色です。
リスト 12. Safari および Chrome でのグラデーションの作成方法
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eaeaea),
color-stop(1, #999999));

Internet Explorer でグラデーションを作成するには、フィルターが必要です。このフィルターには、いくつものプロパティーが関連付けられています。

  • Enabled には、フィルターを有効にするかどうかを指定します (デフォルトは true です)。
  • EndColor には、グラデーションの終了位置での色 (不透明色) を指定します。
  • EndColorStr には、グラデーションの終了位置での色と透明度を指定します。
  • GradientType には、グラデーションのタイプを指定します。
  • StartColor には、グラデーションの開始位置での色 (不透明色) を指定します。
  • StartColorStr には、グラデーションの開始位置での色と透明度を指定します。

リスト 13 では、開始色と終了色を指定する、最も単純な形のグラデーション・フィルターを使用しています。

リスト 13. Internet Explorer でのグラデーションの作成
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', 
endColorstr='#999999');

要素を回転させる

要素を通常どおり水平に表示する以上のことをしたい場合があります。そこで、CSS3 では transform プロパティーを導入し、要素を回転できるようになっています (図 5 を参照)。要素を 90 度回転するにしても、デザインに合わせて少しだけ傾けるにしても、リスト 14リスト 15、およびリスト 16 に記載するコードを使えば、すべてのブラウザーに対応することができます。

図 5. CSS3 による HTML 要素の回転
CSS3 で回転させた HTML5 要素の例

要素を回転させるためのコードは単純明快で、数値と deg を使用するだけで角度を指定することができます。要素を回転させるには、Firefox では -moz-transform を使用します (リスト 14 を参照)。

リスト 14. Firefox での要素の回転
-moz-transform:rotate(-2deg);

Safari および Chrome では、-webkit-transform を使用して要素を回転させます。

リスト 15. Safari および Chrome での要素の回転
-webkit-transform:rotate(-2deg);

Internet Explorer で要素を回転させるには、いくつかの方法があります。最初の transform がうまくいかなければ、いつでもフィルターにフォールバックすることができます。Internet Explorer で要素を回転させるために使用するフィルターは、Matrix です。使い方は少し複雑かもしれませんが、必要なときにはその役目をしっかり果たします。

Matrix フィルターには、以下に挙げるいくつものプロパティーが関連付けられています。

  • Dx には、リニアな変形の X コンポーネントを指定します。
  • Dy には、リニアな変形の Y コンポーネントを指定します。
  • Enabled は、フィルターを有効にするために使用します。
  • FilterType は、変形されるコンテンツのピクセルを設定するために使用します。
  • M11 には、リニアな変形の最初の行/最初の列のエントリーを指定します。
  • M12 には、リニアな変形の最初の行/2 番目の列のエントリーを指定します。
  • M21 には、リニアな変形の 2 番目の行/最初の列のエントリーを指定します。
  • M22 には、リニアな変形の 2 番目の行/2 番目の列のエントリーを指定します。
  • SizingMethod は、結果に合わせてコンテナーのサイズを変更するかどうかを指定するために使用します。
リスト 16. Internet Explorer での要素の回転
-ms-transform: rotate(-2deg); 
filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', 
M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, 
M22=0.9914448613738104); 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, 
M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104,
sizingMethod='auto expand')";

ボックス・サイズの算出方法を指定する

すべてのブラウザーは W3C ボックス・モデルを使用しますが、CSS3では box-sizing を使用して、ブラウザーによる要素の幅と高さのレンダリング方法を設定することができます。content-box 要素を指定すると、ブラウザーはパディングとボーダーを含めずに、実際の幅と高さを使用してレンダリングします。リスト 17 は、Safari および Chrome でボックス・サイズの算出方法を指定する例です。

リスト 17. Safari および Chrome でのボックス・サイズの算出方法の指定
-webkit-box-sizing: content-box;

リスト 18 で注意する点として、ボックス・サイズの算出方法を指定する際に、Safari/Chrome と Firefox とで唯一異なる点は、Firefox では -moz-box-sizing プロパティーを使用することだけです。

リスト 18. Firefox でのボックス・サイズの算出方法の指定
-moz-box-sizing: content-box;

Internet Explorer では、-ms-box-sizing プロパティーを使用します (リスト 19 を参照)。

リスト 19. Internet Explorer でのボックス・サイズの算出方法の指定
-ms-box-sizing: content-box;

一部のブラウザーのデフォルトでは、要素の幅を設定するときに、パディングとボーダーを考慮するようにプロンプトを出します。その場合には、(幅または高さ) + パディング + ボーダーという式になります。

要素のアウトラインを設定する

Web ページの領域を定義するには、一般的にボーダーを使用します。新しく導入された outline 要素を使用すれば、ボーダーと同じ効果を得られるだけでなく、オフセットも指定することができます。リスト 20 で示されているように、オフセットによって、作成したアウトラインを実際の要素の境界から離して表示することができます。これまでこのような表示をするには、ボーダーとパディングを要素に追加しなければなりませんでしたが、その結果は、必ずしも期待したとおりであるとは限りませんでした。

リスト 20. アウトラインの作成と、要素から離したアウトラインの配置
outline: 1px dotted #cccccc;
outline-offset: 10px;

擬似クラスを扱う

すでに多くの擬似クラスが使用されていますが、そのほとんどは、ハイパーリンクのアンカー・タグと関連付けられるのが一般的です。擬似クラスを使用することで、要素にさまざまな状態を追加し、現行の状態に基づいてプロパティーを変更することができます。リスト 21 に、一般的な擬似クラスの使用方法を示します。

リスト 21. 一般的な擬似クラスの使用方法
a:link { }
a:visited { }
a:hover { }
a:active { }

リスト 22 の擬似セレクターは、編集可能な HTML5 コンテンツ領域にホバー状態を作成して、前述のアウトライン・コードに適用します。

リスト 22. 擬似セレクターの操作
#editable:hover {
	outline: 1px dotted #cccccc;
	outline-offset: 10px;
}

フォントを埋め込む

Web では当初から、フォントが問題になっていました。各ユーザーのコンピューターで使用できる選択肢はかなり限られていて、しかも使用可能な選択肢のうち、魅力的なものはほとんどないためです。今や、その状態は大々的に変わろうとしています。これからは、フォントの埋め込み (図 6 を参照) によって、ページ上で重たい画像を使用しなくても、素晴らしいレイアウトを作成できるようになります。それには、いくつかの方法があります。

図 6. CSS3 によるフォントの埋め込み
CSS3 によって埋め込まれたフォントの例
CSS3 によって埋め込まれたフォントの例

Internet Explorer では、使用するフォントの .eot ファイル・フォーマットにアクセスする必要があります。リスト 23 に、正しいフォント・ファイルを用意した上で、フォントを埋め込む方法を示します。

リスト 23. Internet Explorer でのフォントの埋め込み
font-family: yanone;
src: url('../fonts/yanone.eot');

Firefox、Safari、および Chrome の場合には、.ttf または .otf フォントを埋め込むことができます。リスト 24 に、これらのフォントを後で Web ページで使用できるように埋め込むためのコードを記載します。

リスト 24. Firefox、Safari、および Chrome でのフォントの埋め込み
font-family: yanone;
src: local('Yanone'), url(../fonts/yanone.ttf) format("truetype");

フォントを埋め込んだ後、そのフォントを実際の HTML 要素に適用するには、@font-face 宣言で使用したフォント・ファミリーの名前を使ってクラスを作成します。リスト 25 に、このフォントをクラス内で使用した後、HTML 要素に適用する方法を示します。

リスト 25. すべてのブラウザーに対してフォントを埋め込み、そのフォントを要素に割り当てるためのクラスを追加する方法
@font-face {
    font-family: yanone;
    src: url('../fonts/yanone.eot');    
    src: local('Yanone'), url(../fonts/yanone.ttf) format("truetype");
}
.yanone {
  font-family: yanone, Verdana, Arial, Helvetica, sans-serif;
}

まとめ

HTML5 と CSS3 は Web に大きな変化をもたらしつつありますが、これらの手法の多くは、注意して使用しなければなりません。というのも、機能の大部分は、どのブラウザーでも有効であるとは限らないためです。時間が経つにつれ、この新しいコードがますます使用され、主要なブラウザーでサポートされるようになってくるでしょう。そうなれば、次善策の作成が必要な制約事項がなくなり、Web ページを設計する際にサイトのルック・アンド・フィールに力を注ぐことができるようになるはずです。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=632034
ArticleTitle=HTML5 と CSS3 でクロスブラウザーの機能を実現する
publish-date=02152011