Adobe Dreamweaver CC

HTML、CSS、jQuery、PHP 5.4を作成

Dreamweaverで新たにサポートされたHTML5、CSS3、jQuery、PHP5.4を使用し、静的、動的、モバイル、レスポンシブプロジェクトを効率的に作成する方法をご覧ください。 (所要時間15分)

提供元Preran Kumar

Dreamweaver CCでは、適切なHTML5構造を持つページをデザインできるとともに、外部ブラウザーと似たインターフェイスで作業内容のテストとプレビューをおこなえます。

準備するもの

ダウンロード 練習用のサンプルファイル(ZIP、2.1 MB)

ダウンロード Dreamweaverクイック操作ガイド

Dreamweaverでは、クリーンで、Web標準に準拠したコードを使用しながら、手作業によるコーディングの必要性を最小限に抑えたサイトをデザインできます。機能は、HTML5、CSS3、jQuery、PHP 5.4、Chromium Embedded Framework(CEF)などのオープンかつ最新のテクノロジーに基づいて構築されているか、これらをサポートしているため、Webプロフェッショナルは、レスポンシブで、モバイルに対応した、動的なWebプロジェクトをより効率的に開発、テスト、公開することができます。

注意:提供されているファイルをダウンロードして、ご自身でこれらの機能を試してみてください。提供されたHTML、画像、ビデオのファイルを使用すると、この記事で説明されている概念の多くを適用することができます。

HTML5エレメントによるページの構造化

Dreamweaver CCでは、新しいHTMLページを作成するときに、デフォルトではHTML5 doctypeが使用されます。挿入パネルとメニューには、ドキュメントの内容を構造化するためのHTML5タグ(section、article、aside、header、footerなど)が含まれています(図1を参照)。HTML5エレメントを使用してページを構造化することによって、アクセスしやすく、メンテナンスが容易で、主要なブラウザーでサポートされるWebサイトをデザインできます。

図1. HTML5エレメントを使用して構造化されているWebデザインカンプ
図1. このWebデザインカンプは、HTML5エレメントを使用して構造化されている

注意: 最新のHTML5構造エレメントを使用したWebサイトの構築に関する詳しいチュートリアルについては、David Powerの6部構成のシリーズ、「はじめてのWebサイト作成(英語)」を参照してください。

ライブビューでのWebデザインのプレビューとテスト

Dreamweaver CCには、Webデザインを作成およびプレビューするための複数のビューが用意されています。デザインビューは、エレメントを追加し、プロパティを定義するためのビジュアルインターフェイスです。コードビューでは、構築するページのHTMLコードを直接表示および編集できます。また、ライブデザインでは、Dreamweaverを終了することなくライブビュー内でデザインの編集とプレビューを実行できます。

Dreamweaver CCでは、ライブビューでWebコンテンツを表示し、その機能を直接実行できるため、サイトの外観と動作を公開の前に確認できます。結果として、プロジェクトをテストするためにブラウザーに切り替える時間を短縮し、Dreamweaver CCのワークスペースでの生産的な作業により多くの時間を費やすことができます。ライブビューでは、Google Chromeと同じパフォーマンスとHTML5テクノロジーのサポートを利用して、サイトのプレビューをレンダリングできます。このテクノロジーについて詳しくは、Adobe WebプラットフォームチームのブログでChromium Embedded Frameworkに関する記事を参照してください。

注意:最新のライブビューでデザインや編集の作業を直接おこなう方法については、プロジェクトベースのチュートリアル「DreamweaverのライブデザインでWebページをデザイン、編集、プレビューする」を参照してください。

HTML5エレメントのレンダリング

ライブビューでエレメントのレンダリングがより正確におこなわれるようになりました。例えば、図2の2つの例を比較して、ボーダーの半径やグラデーションの繰り返しを含むdivがDreamweaver CS6およびそれ以前のバージョンでレンダリングされている場合と、Dreamweaver CCでレンダリングされる場合とで確認してください。左側の以前のバージョンのライブビューでは、ボーダーの半径のレンダリングはサポートされていませんでした。右側の更新されたライブビューでは、divのボーダーの半径プロパティは、最新のブラウザーで表示した場合と同様にレンダリングされます。

図2. Dreamweaver CS6(左)とDreamweaver CC(右)における、ボーダーの半径の設定とグラデーションの繰り返しを含むエレメントのライブビューのレンダリング
図2. ライブビューで、ボーダーの半径の設定とグラデーションの繰り返しを含むエレメントが正確にレンダリングされる

HTML5フォームエレメントとプラグインのプレビュー

フォームやエレメントの動作をライブビューで直接テストできるようになりました。ポップアップメニューやカレンダーインターフェイスなどのHTML5エレメントをライブビューで直接プレビューする場合、HTML5仕様をサポートする別のブラウザーでの表示と同様にプレビューされます(図3を参照)。

注意:提供されているファイルには、ライブビューで直接様々なフォームエレメントの動作をテストするために使用できるフォームが含まれています。

図3. ライブビューでプレビューされているHTML5フォームエレメント機能
図3. ライブビューで想定されているHTML5フォームエレメントの機能

拡張されたコーデックのサポートによるHTML5メディアのプレビュー

Dreamweaver CCのライブビューではより多くのコーデックがサポートされるようになり、ライブビューでページをテストするときに、HTML5ビデオファイルを見たり、HTML5オーディオファイルを聴いたりできるようになりました。レイアウト内でビデオやオーディオのコンテンツをテストするたびにブラウザーを起動するのではなく、Dreamweaverのワークスペース内でメディアコンテンツをプレビューできるようになりました。表1に一覧表示されているビデオコーデックやオーディオコーデックを使用するコンテンツを、ライブビューで再生できます。

ビデオ オーディオ
Theora
MP3
H 264 AAC
  Vorbis
  pcm_u8
  pcm_s16le
  pcm_s24le
  pcm_f32le
  pcm_s16be
  pcm_s24be

HTMLエレメントの検査

Dreamweaver CCのインスペクトモードでは、ページエレメントを迅速に編集できます。インスペクトモードを有効にしてエレメントをポイントすると、ツールヒントに幅や高さ、適用されるクラスやIDなどのエレメントのプロパティが表示されます。Dreamweaverのワークスペースでコードを検査するプロセスは、Google Chromeを使用してブラウザー内でエレメントを検査する場合と同様です。

これにより、プロパティ値を探さなくても、すぐにビジュアルフィードバックを得ることができます。この機能を試すには、次の手順を実行します。

  1. Dreamweaver CCを起動します。

  2. Webページを開くか、新しく作成します。

  3. ライブトグルボタンをクリックしてライブビューを有効にし、「インスペクト」をクリックします。

  4. エレメントをポイントし、ハイライトされたエレメントのプロパティを確認します。ポイントしたエレメントに適用されるマージン、余白、ボーダーのプロパティの値に関する情報と共に、ルーラーが表示されます(図4を参照)。

    図4. エレメントをポイントして、プロパティ値を示すツールヒントを表示する
    図4. エレメントをポイントして、プロパティ値を示すツールヒントを表示する

    通常Google Chromeを使用してブラウザー内でエレメントを検査している場合、Dreamweaver CCでのエレメント検査の概念にもすぐに慣れるでしょう(図5を参照)。

図5. Dreamweaver CCでのエレメント検査
図5. ソースコード内を探すことなくページエレメントを検査してプロパティを更新する

注意:プロジェクトを効果的にテストし、CSSプロパティとHTML5エレメントの表示を確認するには、必ず最新バージョンのブラウザーを使用してください。

 

CSS3によるページのスタイル設定

CSSデザイナーは、CSS3スタイル、ファイル、メディアクエリーをビジュアルに定義するとともに、CSS3プロパティをページ上のエレメントに適用できるようにするビジュアルツールです。

CSSソースの定義と特定

CSSデザイナーの上部にあるソースパネルには、ページに関連付けることができるCSSソースの種類として、3つのオプションが用意されています。新しいCSSファイルを作成するか、既存のファイルをアタッチするか、Webページ内でCSSを定義することができます(図6を参照)。それぞれのソースはこのパネルに一覧表示されます。CSSスタイリングを変更する必要がある場合は、適切なソースを選択します。

図6. CSSデザイナーのソースパネル
図6. CSSデザイナーのソースパネル

HTMLエレメントとCSSセレクターの関係の視覚化

ライブビューでアイテムを選択すると、対応するCSSセレクターがハイライトされ、ライブビューのHTMLエレメントとHTMLエレメントに適用されるCSSルールとの関係を確認できます。CSSデザイナーでセレクターをポイントしてクリックするだけで、エレメントがハイライトされ、検査されます(図7を参照)。次に、エレメントを選択し、変更をおこなうためにコードビューをスクロールするのではなく、複数の異なるパネルのいずれかを使用してオプションを変更または更新します。

図7. CSSデザイナーのセレクター、関連HTMLエレメントがハイライトされている
図7. CSSデザイナーでセレクターをクリックすると、影響を受けるHTML要素がハイライトされる

CSSデザイナーでのコードビューの操作

Dreamweaver CCで、セレクターパネルでセレクターをクリックすると、コードビューのCSSコードの適切なセクションにジャンプすることができます。直接コードビューで、またはCSSデザイナーのプロパティパネルでプロパティを編集することにより、セレクターを変更できます。CSSデザイナーインターフェイスのセレクターパネルでセレクター名をポイントして、セレクターの詳細を示すツールヒントを表示することもできます(図8を参照)。

図8. CSSデザイナーのツールヒントに、セレクターのCSSプロパティが表示され、対応する選択内容がコードビューやライブビューでハイライトされる
図8. CSSデザイナーでセレクターをポイントすると、そのCSSプロパティを示すツールヒントが表示される。また、対応する選択アイテムがコードビューやライブビューでハイライトされる

プロパティセクションでのビジュアル編集

CSSデザイナーのプロパティパネルとライブビューを連係させることによって、エレメントのCSSプロパティを変更すると同時に、新しい効果をプレビューすることができます。

例えば、提供されているプロジェクトファイルでビデオコンテナを選択して(図9を参照)、目的の外観になるまでドロップシャドウのプロパティを変更できます。

 

図9. ライブビューでCSSデザイナーのプロパティパネルを使用し、CSSスタイリングを変更してプレビューする
図9. ライブビューでCSSデザイナーのプロパティパネルを使用し、CSSスタイリングを変更してプレビューする

jQueryウィジェットによるサイトとモバイルアプリの拡張

jQueryウィジェットは小規模なWebアプリケーションで、Webデザインで使用することによって機能や書式設定を追加できます。jQueryは、多くの場合、主要なブラウザーによってネイティブにサポートされるJavaScriptライブラリです。jQueryウィジェットは、動的なWebデザインにあるアコーディオン、日付選択、ボタン、タブなどのアイテム用に、アドビ独自のテクノロジースタックであるSpryフレームワークから置き換わりました。

挿入メニューおよびパネルには、jQueryウィジェットを含む2つのカテゴリーがあります(図10を参照)。

  • jQuery UI:Webデザインにデスクトップのような機能を追加する、アコーディオン、タブ、プログレスバー、ボタンなどのjQueryウィジェットです。
  • jQuery Mobile:モバイルアプリ開発プロジェクトで使用するために作られたページ、リストビュー、折りたたみ可能なブロック、パスワードなどのjQueryウィジェットです。

 

図10. jQuery UIウィジェットとjQuery Mobileウィジェットは、挿入パネルと挿入メニューから利用できる
図10. jQuery UIウィジェットとjQuery Mobileウィジェットは、挿入パネルと挿入メニューから利用できる
図10. jQuery UIウィジェットとjQuery Mobileウィジェットは、挿入パネルと挿入メニューから利用できる

jQuery UIの使用

ページデザインでjQuery UIウィジェットを試してみるには、チュートリアル「DreamweaverでWebページのjQueryウィジェットを使用する」を参照してください。この記事で提供されているプロジェクトファイルには、参考に使用できるjquery.htmlファイルも含まれています。

jQuery Mobileの使用

モバイルプロジェクトでのjQuery Mobileウィジェットの使用方法を確認するには、以下のチュートリアルを参照してください。どちらにもダウンロード可能なプロジェクトファイルが含まれています。

 

PHP 5.4による開発

Dreamweaver CCはPHP 5.4をサポートしています。これにより、コンテンツ管理システム(CMS)サイト(WordPress、Drupalなど)の開発時にPHPサーバーの動作にアクセスできるようになりました。

サイト内でPHPページに対応するローカルWebサーバーでDreamweaverをセットアップしている場合、公開する前に、使用しているコンピューターでローカルに動的なWebサイトの開発とテストをおこなえます。Dreamweaver CCのコードビューでの作業中は、PHP5.4の構文に関するコードヒントが表示されます。

Dreamweaverで動作するローカルサーバーをセットアップする方法については、Paul Traniの「How to Set up Wordpress in Dreamweaver(DreamweaverでWordpressをセットアップする)」で概要を参照してください。MIGHTYminnowのKristin Longも、Dreamweaverのスクリーンキャストの「Faster theming of dynamic, CMS-based sites in Dreamweaver(Dreamweaverでの動的なCMSベースのサイトの迅速な構想)」で詳しいデモンストレーションをおこなっています。

 

次のステップ

Dreamweaverに対する将来の更新を確認するには、Adobe Dreamweaverチームのブログを参照してください。今すぐDreamweaver CCをダウンロードし、これらの新機能を適用して、少ない労力で、より表現力豊かなWebコンテンツを作成できることを確認してください。

preran-kumar-83x83

Preran Kumar

Preran Kumarは、AdobeのWeb製品に関するソーシャルサポートリーダーです。顧客の技術的な問題を解決するために、様々なソーシャルチャネルを通じて顧客を支援しています。Preranはこれまでに、化粧品の配合や消費者向けのパッケージングの処理から、Webデザインまで、幅広い分野の職務を経験してきました。