本稿は、Scott Guthrie氏のブログを、氏の許可を得て、翻訳、転載したものです。米Microsoft社の副社長で、ASP.NETやSilverlightの開発チームを統率する氏のブログでは、次期製品を含む最新の技術をいち早く紹介しています。
ASP.NET MVC 3 Tools UpdateによるHTML5の改善
先週、ASP.NET MVC 3 Tools Updateについてブログ投稿し、EF コードファーストとデータスキャフォールディングでその詳細についてカバーしました。
本日のブログはそのシリーズの続きで、ASP.NET MVC 3 Tools Updateリリースによる、HTML5の改善についてカバーします。
HTML5セマンティックタグのプロジェクトテンプレートサポート
ASP.NET MVC 3 Tools Updateでは、ASP.NET MVC 3プロジェクトの作成時に、オプションでHTML5セマンティックタグが使用できるようになりました。『Use HTML5 semantic markup』チェックボックスをチェックすれば指定できます。
このチェックボックスを選択すると2つのことが行われます。
チェックボックスが選択されていない（以前出荷したものと同じ）場合は、デフォルトでheader／footer／navigation要素に対して<div>要素を使用しますが、この部分の代替になります。
- VS 2010が、生成されたcshtmlファイルのデフォルトレイアウトで、<header>、<footer>、<section>、<nav>などのHTML5 セマンティックタグ要素を使用します。
- VS 2010が、layout.cshtmlでJavaScriptライブラリのmodernizr.jsをデフォルトで参照します。これにより、IE6のような古いブラウザでも、HTML5 セマンティックタグ要素をスタイル化するCSSが使用できます。
HTML5 セマンティックタグを理解
HTML5では、<video>、<canvas>、<svg>などの新しい要素やAPIが数多く導入されました。
HTML5には、<section>、<article>、<aside>、<header>、<nav>などの新要素も取り入れられ、コンテンツやページの意味と構造を、リッチにすることができます。これらの機能によりページを書くことができるため、不明瞭な<div>要素を使用してすべてを形成する必要がなくなり、コンテンツのセマンティックな意味をより良く表現できるようになります。また、コードも少しクリーンで読みやすくなります。今後は、ブラウザおよび検索エンジンがタグをより理解して、さらにリッチな体験が提供できるようになればと思います。
『Use HTML5 semantic markup』チェックボックスを選択して、ASP.NET MVC 3プロジェクトを作成すると、Visual Studioは、新規プロジェクトで生成されたlayout.cshtmlファイルで、適切な<div>に対してセマンティック HTMLを使用します。つまり、サイト上部は<header>要素で囲まれ、リンクは<nav>要素で囲まれ、フッターは<footer>要素の中にカプセル化されます。
より詳細なHTML5セマンティックタグについて
Bruce Lawson氏およびRemy Sharp氏が、HTML5の新機能の中でも特にセマンティックタグの利用方法をカバーした、HTML5の紹介という本を書いています。
また、MSDNのScriptJunkieサイトにある、Emily Lewis氏のHTML5セマンティックタグを今日使ってみるという記事でも、HTML5 セマンティックタグの役割について詳細を確認したり、実際に役立つ例を見ることができます。
