こんにちは、デジタルスケープの伊藤和博です!

今週も、Dreamweaverの新機能に関してご紹介していきます。今回は、Dreamweaver CS5 HTML5 Packについてご紹介します。


新規サイトも既存サイトも


新規でファイルを作成する際に、ドキュメントタイプとして「HTML5」を選択することが可能です。スターターレイアウトの中にも、HTML5でスタートしやすいようにHTML5のレイアウトが用意されています。



また既存のHTML4.01でマークアップされたファイルも、ファイルメニュー→変換→HTML5で、HTML5に変換することが可能です。



HTML5では、DOCTYPE宣言が非常に簡素化され、<!DOCTYPE HTML>のみになりました。テキストのエンコーディング形式も、<meta charset="UTF-8 ">でOKです。

ただし、既存のHTML.4.01からHTML5に変更すると、テキストエンコーディングに関しては変更がありません。これは、HTMLの場合のみ従来のテキストエンコーディングが認められているためです。なお、XHTMLからの場合はこの限りではありません。

下の画像は、上の4行がHTML4.01Transitionalで、下の4行はHTML5に変換した後です。



HTML5 コードヒント


分割ビュー、コードビューでソースを入力すると、コードヒントを表示してくれるのは以前からありましたが、HTML5 PackをインストールするとHTML5のタグや新しい属性のヒントも表示されるようになります。



Dreamweaverにはリファレンスという機能があり、ヘルプメニュー→リファレンスを選択すると、タグの意味を調べることが可能ですが、現状ではまだHTML5のタグに関しては記載されていないようです。




HTML5 の新しいタグ


HTML5 PACKをインストールすると、確かに機能的には「新機能」ですが、「HTML5の新機能」なのか「DWCS5の新機能」なのかが分かりにくくなってしまいますので、今回は、HTML5の新しいタグの1つ、<meter>というものをご紹介します。

HTML5の新しいタグの一つ一つは、ブラウザが対応しないと表示されない訳ですが、<meter>がGoogle Chromeで確認できますのでご紹介します。


<meter>はゲージを表すタグで、内部にvalue(実測値)、min(最小値)、max(最大値)、low(低領域上限)、high(高領域上限)、optimum(最適点)の各属性を入れることができ、valueが必須になります。

Dreamwerverで以下のようにマークアップします。



Google Chromeで確認すると、以下のように見えます。



ゲージとなるため、「残りいくつ」「全体に対してこのくらい」というものを視覚的に表現するものになり、最大値があるものに対して、どのくらいか?を表現するのに適しています。

<video>タグなど、他のHTML5のタグに対応しているブラウザはありますが、<meter>タグはSafari、Firefoxでは今のところ確認できません。<meter>タグに非対応のブラウザの場合は、<meter>タグの中にあるテキストが表示される、というようになります。以下はSafari5.0.2で見た場合です。



HTML5 Pack のインストールはこちらから!

●Adobe Labs Downloads
http://labs.adobe.com/downloads/html5pack.html




もっとDreamweaver CS5 を使いこなすなら!
Dreamweaver CS5の使い方・基本トレーニングの受講がオススメです!




イトウ先生が、Twitterを始めました!
みなさんもぜひ、フォローしてくださいね!

http://twitter.com/itoh_sensei