Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

ASP.NET MVC 3 Tools UpdateによるHTML5の改善

連載:ScottGu's Blog翻訳

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/05/23 14:00

 本稿は、Scott Guthrie氏のブログを、氏の許可を得て、翻訳、転載したものです。米Microsoft社の副社長で、ASP.NETやSilverlightの開発チームを統率する氏のブログでは、次期製品を含む最新の技術をいち早く紹介しています。原典:HTML5 Improvements with the ASP.NET MVC 3 Tools Update。

目次
コラム

 本稿は、Scott Guthrie氏のブログを、氏の許可を得て、翻訳、転載したものです。米Microsoft社の副社長で、ASP.NETやSilverlightの開発チームを統率する氏のブログでは、次期製品を含む最新の技術をいち早く紹介しています。

 原典:HTML5 Improvements with the ASP.NET MVC 3 Tools Update

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>要素を使用しますが、この部分の代替になります。

  1. VS 2010が、生成されたcshtmlファイルのデフォルトレイアウトで、<header>、<footer>、<section>、<nav>などのHTML5 セマンティックタグ要素を使用します。
  2. 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 セマンティックタグの役割について詳細を確認したり、実際に役立つ例を見ることができます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト Chica(チカ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

バックナンバー

連載:Scott Guthrie氏 Blog翻訳

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5