ホーム > Expression Web > Expression Web 4でHTML 5のIntelliSenseを利用するには

Expression Web 4でHTML 5のIntelliSenseを利用するには

HTML 5 ドキュメントの作成 (5)
わにちゃん@ExpressionTech.jp[著]
2010年12月13日 from Expression Web & FrontPage blog

はじめに

Expression Web 4 で、HTML 5のIntelliSenseを利用する前に、以下の2ステップを完了させる必要があります。

  1. HTML 5用のスキーマアドインをインストールして使用可能にする
    →『Expression Web 4 で HTML 5 スキーマを利用するには
  2. ページ編集オプションでドキュメント型宣言とセカンダリスキーマを「HTML 5」に設定する
    →『Webページの新規作成時にHTML 5にするには

もし、XHTMLのWebページをHTML 5にするには、『XHTML1.0 Transitional からHTML 5 に変換するには』も参考にしていただければと思います。

HTML 5からの新しいタグや属性を知りたいという方は、Webでも検索すれば情報取得することはできます。しかし、私はリファレンス本『HTML5タグ事典―主要ブラウザ・ベンダーが推進する次世代規格 (I・O BOOKS)』 を購入しました。やはり本になっていた方が使い勝手がいいと思います。なお、こちらの本は、ある程度XHTMLやHTMLタグのことを理解していて、CSSもある程度知っている人向けですね。

準備が整ったら、早速Expression Web 4のコードビューでHTML 5のコードを記述してみましょう!

注:Expression Web 4 SP1を適用によりHTML5に対応するので、スキーマアドインをインストールする必要はありません。

Expression Web 4でHTML 5のIntelliSenseを利用する

ここでは、Expression Web team blog の記事『Add HTML5 support to Expression Web 4!』に掲載されているタグを実際に記述してみます。

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title> </head> <body>
<section> <header> <h1>Home Page</h1><h2>This is our home page</h2> </header> <aside> </aside> </section> </body> </html>

<aside>タグ内に<video と入力してスペースキーを入れることによって、属性の入力が可能となります。そこから入れたいモノを選択することで代入されます。

videoタグの属性入力画面

一方、フォームの作成においても、HTML 5から input タグに email 値がサポートされています。
input のtype属性を指定

備考

もしIntelliSenseが作動しない場合は、うまくインストールされていない場合があります。前にアドインを削除したはずなのに残っている場合があります。以下の手順に従って、一旦きれいに消してからアドインの再インストールを行ってください。

  1. Expression Web 4を終了します。
  2. Windows Vista/7の場合、スタートメニューの検索ボックスに
    %APPDATA%\Microsoft\Expression\Web 4\Addins
    と入力してEnterキーを押します。
  3. フォルダーが残っている場合は削除します。
  4. もう一度アドインをインストールします。

メモ

Expression Web 4 SP1にて、HTML 5のIntelliSenseが標準でサポートするようになりました。

関連記事

コメント

▲このページのトップへ