Visual Studio 2010 で HTML5 / CSS3 を使いたい・・・!?

新年度が始まり、一昨日はチームオフサイト、昨日は社員総会と期初のイベント目白押しのここ最近でございます。そんな今年度、私はといえば基本路線は変わらず ASP.NET, jQuery, HTML5 などを中心としたマイクロソフト Web プラットフォームと開発ツールのエバンジェリストとして活動します。今年度もいろいろなところに顔を出しますので、見かけたら声をかけてあげてくださいませ・・・

今年度のマイクロソフトの Web プラットフォームの方向性としては、なんといっても HTML5 です。これは、Internet Explorer 9/10 といった製品としての話から、Visual Studio, ASP.NET などの開発ツールとプラットフォームといったレベルでの話まで多岐にわたります。また、今年 9 月に開催予定の BUILD と呼ばれる開発者向けのイベントで多く情報が出てくるであろう Code Name “Windows 8” における HTML5 といったところにも関係してきます。

Internet Explorer 9 (IE9) では、HTML5 / CSS3 対応が進んでいますが、それ以外の開発ツールではどのような状況なのでしょうか。

ご存知の通り、Web アプリケーション開発で Visual Studio 2010 を使用する場合、HTML エディタでは HTML や CSS のインテリセンスや検証機能が使用できます。

インテリセンス (入力候補の表示)

検証機能

では、このインテリセンスや検証機能は HTML5 マークアップでは使用できるのでしょうか。。。

答えは HTML5/CSS3 ともにインテリセンスと検証機能が使用可能 です。

HTML5 のスキーマは Visual Studio 2010 の標準では含まれていませんが、Visual Studio 2010 SP1 をインストールすることで使用できるようになります。

★ Visual Studio 2010 SP1 ダウンロード

HTML5 /XHTML5 スキーマ

また、CSS3 に関しては、Visual Studio 2010 SP1 には含まれていませんが、先月リリースになった、Web Standards Update for Microsoft Visual Studio 2010 SP1 をインストールすることで使用できます。

★ Web Standards Update for Microsoft Visual Studio 2010 SP1

CSS3 スキーマ

CSS3 インテリセンス

この Web Standards Update は、他にも HTML5 インテリセンス＆検証の強化や Geo-Location API への対応など数多くのアップデートがおこなわれています。

主なアップデート内容は下記の通りです。

HTML 5 features
Video & related tags, Audio & related tag, New input types like email, url, date etc, Drag & Drop support, Accessibility standard WAI-ARIA, Microdata, Schema.org & more SEO friendly goodness

Browser APIs
Geo-Location, Local Storage

CSS3
2D Transforms, 3D Transforms, Animations, Background & Borders, Basic Box Model, Basic UI, Behavior, Color, Flexible Box Layout, Fonts, Generated Content for Paged Media, Hyperlink Presentation, Line, Lists, Marquee, Media Queries, Multi Column, Namespaces, Paged Media, Presentations Levels, Ruby, Selectors, Speech, Syntax, Template Layout, Text, Transitions

※詳細情報はこちらをご参照ください
Web Standards Update for Visual Studio 2010 SP1
Announcing the Web Standards Update - HTML5 Support for the Visual Studio 2010 Editor

◆◆◆

このように、開発ツール Visual Studio 2010 では既に HTML5 / CSS3 を容易に使用することができます。もちろん、無償版の Visual Web Developer 2010 Express でも全く同じ機能を HTML5/ CSS3 のコーディングで使用できます。HTML5 /CSS3 の技術習得、検証、導入などで使用する開発ツールを検討されている場合には、ぜひ Visual Studio 2010 / Visual Web Developer 2010 Express をお試しいただけると幸いです。