体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

【Adobe CS5】『Dreamweaver』『Fireworks』などウェブデザイン関連製品の新機能をハイライト

『Dreamwever CS5』

4月12日に発表されたアドビ システムズのデザイン製品群『Creative Suite 5』では、ウェブデザイン関連の新製品がまとめて『Adobe CS5 Web Premium』としてリリースされます。ここでは、『Web Premium』を構成する製品のうち、ウェブデザイナーが使用するアプリケーションをピックアップして新機能をご紹介します。

・CSSとPHPの対応を強化した『Dreamweaver CS5』
ウェブ向けのオーサリングツール『Dreamweaver CS5』では、スタイルシート(CSS)を用いたサイトの編集機能の強化、『WordPress』などブログメディアのコンテンツ管理システム(CMS)のデザイン作業で連携が必須となる、PHPのスクリプトを扱う機能の強化を図っています。

『Dreamwever CS5』のCSS編集機能

「CSSインスペクト」モードでは、ページのビジュアルから選択した個所が参照するCSSファイル、CSSに記述されたパラメータをパネルで確認でき、パネル上でパラメータを変更したり、CSSの有効/無効を切り替えることができます。

「ライブビュー」モードでは、現在公開されているサイトのURLを入力することにより、そのサイトのCSSを確認することもできます。他サイトを参考にこれからCSSを学ぶデザイナーには役立ちそう。新規ドキュメントを作成する場合には、CSSに関する日本語ヘルプも充実しています。

『Dreamweaver CS5』のPHP編集機能

PHPを扱う機能では、動的に生成されるものを含むPHP関連ファイルをすべて表示し、確認と修正が可能。コード画面でスクリプトを編集する場合、コードヒント機能によりクラスや関数の候補を提示したり、PHPの日本語ヘルプを参照することができます。

・ブラウザ依存は『BrowserLab』でチェック

『BrowserLab』で並べて比較

『Dreamweaver』本体にはブラウザのレンダリングエンジンを搭載しているため、「ライブビュー」のモードでブラウザ上の表示を再現することが可能ですが、CSSを使ったデザインで問題になるのが、ブラウザの種類やバージョンに依存してレイアウトや表示が異なること。こうしたブラウザ依存のチェックには、『CS5』から追加されたオンラインサービス『Adobe CS Live』に含まれる『BrowserLab』が利用できます。

『BrowserLab』で重ねて比較

『BrowserLab』は、ブラウザの互換性を検証できるオンラインサービス。複数台のパソコンや複数種類のブラウザを用意することなく、ウェブの制作環境1台で複数ブラウザでの表示チェックが可能になります。『Dreamwever』から起動することにより、テストサーバー上のコンテンツや、ローカル上のコンテンツをチェックすることも可能。対象とするブラウザを選択して、並べて表示を比較したり、重ねて表示の違いを確認することができます。

1 2次のページ
shnskの記事一覧をみる

記者:

宮原俊介(編集長) 酒と音楽とプロレスを愛する、未来検索ブラジルのコンテンツプロデューサー。ゲームコミュニティ『モゲラ』も担当してます

ウェブサイト: http://mogera.jp/

TwitterID: shnskm

  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。