『iPhone site extension for Dreamweaver CS4/5』は、Adobe Dreamweaver CS5または CS4で、iPhone向けサイトを作る手助けをするための拡張機能です。 新規ドキュメントダイアログに「iPhone用ページ」と「iPhone用Webアプリ」をご準備しました。 ここから、すぐにiPhone用サイトを作ることができます。

アドビから Adobe® Illustrator® CS5 HTML5 Pack （以下 HTML5 Pack ） が公開されました。HTML5 Pack は、Illustrator CS5 15.0.1 に HTML/CSS3 の最初のサポートを提供、また SVG 機能を拡張して、Web やデバイスのコンテンツデザインを支援します。Dreamweaver® CS5 11.0.3 アップデーターで追加された HTML5 機能との組み合わせにより、Web デザイナーは HTML5 の最新の機能を活用したデザインを実現できます。 現在、HTML5 と CSS3 は仕様の標準化が行われている最中です。また、ブラウザーの SVG サポートもまだ完全ではありません。HTML5 Pack がサポートする機能は、現在ブラウザーに標準的に実装されている機能を基準としています。 今回公開された HTML5

HTML5 Pack for Dreamweaver CS5 は Dreamwever に HTML5 と CSS3 のサポートを追加する機能拡張です。この記事では、HTML5 と CSS3 の簡単な説明と、機能拡張のインストール後に Dreamweaver で利用可能になる新しい機能の概要を紹介します。 HTML5 Pack for Dreamweaver CS5 の使い方を示すビデオのデモは、Adobe TV の Introducing the Dreamweaver CS5 HTML5 Pack をご覧ください。 必要条件 この記事を最大限に活用するには、次のソフトウェアとファイルが必要です。 体験版 今すぐ購入 HTML5 and CSS3 HTML5 は World Wide Web コンソーシアムの中核をなす言語である Hypertext Markup Language

本連載では、Webデザイナーに向けて、HTML5／CSS3でWebデザインや制作手法はどう変わるのかを解説していきます。主な HTML5／CSS3の役割や機能を学んでいただくとともに、サンプル作成を通してコーディング手法を習得していただくことを目的としています。なお、サンプル作成のツールとして「HTML5 Pack for Dreamweaver CS5」を使用します（詳しくは、「HTML5 Pack for Dreamweaver CS5 の使い方」をご覧ください）。 ※HTML5とCSS3は現在策定中の仕様です。本連載は執筆時点の仕様内容にもとづいており、正式に勧告されるまでに変更されることもあり得ます。 さっそく、Dreamweaver CS5を用いて HTML5を用いてWebページを作ってみましょう。 HTML5文書を作成する Dreamweaver CS5では新規ファイルを作成

iPhone（iPhone 3G/3GS）／iPod touchは、PC向けサイトがそのまま表示できるところが大きな魅力の一つです。しかし、小さな画面や、指で操作するとインターフェイスなどのようにデバイス特有な面も多く、PC向けサイトのままでは必ずしも見やすいとはいえません。そこで本記事では、Dreamweaverを使ってiPhone向けサイトを作る時のテクニックや注意点をご紹介します。 必要条件 この記事を最大限に活用するには、次のソフトウェアが必要です。 Dreamweaver CS5 体験版 今すぐ購入 制作したサイトの表示結果を確認する方法 ライブビューでプレビューする Dreamweaver CS5（および CS4）には「ライブビュー」機能が搭載されており、ページのレンダリングにはWebKitエンジンを利用しています。iPhoneのSafari（Mobile Safari）も

Dreamweaver CS6 と HTML5 で始めようスマートフォン＆タブレット対応 HTML5 特設サイトは、HTML5/CSS3 やモバイルデバイスの活用を検討している方に最新情報をお届けするアドビ公式サイトです。 事例から Adobe®Dreamweaver® CS6 を始めとする制作環境まで、幅広い観点から Web の新しい方向性をお伝えします。 本文へ 本サイトについて 本サイト自体が、マルチデバイス対応のレスポンシブなデザインの事例として制作されています。表示される画面の大きさに応じて、閲覧し易い様にレイアウトが変化します。詳しくは「互換化とは」をご覧ください。 jQuery Mobile を使ったスマートフォン向けの専用サイトも公開中です。

Web制作に欠かせない「Adobe Dreamweaver CS5」新機能を数回に渡り徹底紹介。今回は「デザインビュー」などWeb制作現場向けに強化された機能を中心に解説していく。 「Adobe CS5」体験版はこちらから 「Dreamweaver CS5」の制作現場向け機能をチェック 「Dreamweaver」は随分早い段階から現在のバージョンに近いスタイルに至っていた完成度の高いツールだ。制作時にメインに使われている「ライブラリとテンプレート」、「コードビューとデザインビュー」、「サイトの定義」機能は既に「Dreamweaver CS4」までに実装されていた。Dreamweaverの歴史は新しい機能の追加というよりは、ソフトの完成度を高めるためのバージョンアップと呼んでもいいだろう。中でも常に性能を向上させてきたのがデザインビューだ。 Dreamweaverのデザインビューは、まだテー

前編では、「Adobe Dreamweaver CS5」の新機能や強化機能のうち、主にCMS関連の機能を紹介した。今回は、コーディングの中でもトライアンドエラーが多いCSSのコーディングについて新機能を中心に解説していく。 「Adobe CS5」体験版はこちらから CSSのコーディングのための「Dreamweaver CS5」新機能 CSSのコーディングは、CSS単体で済むというわけではなく、必ずHTMLとセットでコーディングが進められていく。というのも、HTMLのどの部分を、どのようにスタイリングするかという指定がWeb制作におけるCSSの使用用途の大部分を占めるからである。 CSSのコーディングにおいて、Dreamweaverに求められる機能は、今までは大きく分けると3つあった。「CSSの指定をしやすくする機能」、「CSSが適用されたページを確認する機能」、「CSSがある程度適用された

Dreamweaverをカスタマイズするには、環境設定を変更したり、エクステンション（機能拡張）をインストールするといった方法がよく知られていますが、Dreamweaver自体の構成ファイルを編集することでカスタマイズする方法もあります。Dreamweaver自体を構成するファイルはXML、CSS、JavaScriptが多用されており、これらを編集することで機能の追加やUIの変更といったカスタマイズが可能です。Dreamweaverを利用する人にとってはこれらのコードは読みやすく編集しやすいでしょう。ここでは特にWebページ制作の効率を向上させることができるであろうカスタマイズを3例ご紹介します。 なお、記事内に登場するConfigurationフォルダは記事末尾の「各プラットフォームのConfigurationフォルダの場所について」にてご紹介しています。カスタマイズ前には念のため、"必

意匠部、渕上です。 htmlの閉じタグの手前にコメントを入れることがめんどくさくなったので、Dreamwaver用の拡張機能を作って解決することにしました。 どういうコメントかというと、以下のようなやつです。 <div id="container"> ～～～ <!-- /#container --></div> このコメントを入れることでコードの見通しがよくなるので絶対いれたほうがいいことはわかってるんですが、idやclass名を記述しなきゃいけないのがちょっと大変なんですねー。 ダウンロード ということで、作成した拡張機能はコチラ。 ダウンロード - End_comment.mxp インストール mxpファイルをダブルクリックするとAdobe Extention Managerが立ち上がりインストールされます。 インストールできないことがあります 「メニューを更新できませんでした」という

鷹野雅弘氏（株式会社スイッチ）による「仕事がはかどる機能」を紹介する連載コラムです。 Illustrator、Photoshop、Dreamweaver、Flashなどを中心に紹介予定です。 仕事がはかどるこの機能／知らないあなたはソンしてる

HTMLファイルの場合、［コマンド］→［ソースフォーマットの適用］を実行することで、 ［コードフォーマット］環境設定で設定したインデントや改行などのルールが反映されます。 特定の領域のみに実行したいときには、あらかじめ選択しておいて、［コマンド］→［選択範囲ソースフォーマットの適用］を実行します。 Dreamweaver CS3から、CSSファイルにもソースフォーマットの適用の実行を行うことができるようになりました。 ダイアログボックスを閉じたら、CSSファイルを開き、［コマンド］→［ソースフォーマットの適用］を実行します。 コーディングルールを作っていてもなかなか統一できない、後からコーディングルールが変わったと言った場合に 重宝します。 補足 ・タグライブラリエディタ（［編集］→［タグライブラリ］）ではタグごとに、改行やインデントなどの情報を設定することができる。［ソ

全2回でお届けしている「Adobe Dreamweaver CS4」レビュー。前編では「ライブビュー」、「CSS」に関して紹介した。後編では、「インタフェース」、「外部ファイル」、「Spry・JavaScript」などの新機能や改良点について紹介しよう。 インタフェースビューの分割方法が増えた インタフェース関連で注目すべき新機能は、ドキュメントウィンドウの分割方法が大幅に増えたことだ。これまでは上下分割のみだったが、今回のバージョンでは左右分割が可能となっている。ワイドモニターを使っているユーザーには朗報となりそうだ。さらに、コードとデザインの組み合わせだけでなく、コードビューを上下、または左右に分割表示することも可能。先に紹介した「関連ファイル」機能を使い、HTMLソースとCSSコードを並べて表示することもできるので、HTMLソースを見ながらCSSコードの編集(もしくはその逆の作業)も

Webオーサリングソフト「Dreamweaver」の新バージョン「CS4」が登場した。バージョンアップを重ねて、完成の粋に近づきつつあるDreamweaver。CS4では、ユーザーの「こんな機能が欲しかった!」というニーズにこたえ、より快適な作業を行うための機能が搭載された。前編では、Dreamweaver CS4の新機能の「ライブビュー」、「CSS関連」を紹介。後編では、「インタフェース」、「外部ファイル」、「Spry・JavaScript」を紹介する予定だ。 イチオシ機能「ライブビュー」 「ライブビュー」は、DreamweaverにWebブラウザのレンダリングエンジンを搭載することで、Webブラウザと同様の表示をDreamweaverで再現する機能。たとえば従来のDreamweaverでJavaScriptの動作を確認するには、「ブラウザでプレビュー」を使ってブラウザを立ち上げ、制作中

Spryデータセットでコンテンツ作成(2) 別のHTMLファイルを用意して、「Spryデータセット」を挿入してみよう。HTMLファイルを開き、「挿入」メニュー→「Spry」→「Spryデータセット」を選択する。 「挿入」メニュー→「Spry」→「Spryデータセット」を選択 「Spryデータセット」の画面が開くので、「データセット」から「HTML」、「検出」から「テーブル」を選択します。「データセットの指定」の「参照」ボタンをクリックし、テーブルデータを指定する。 「参照」ボタンをクリック 読み込み用データを選択 上の領域に、選択したテーブルデータが表示される。黄色いマーカーをクリックすると、下の領域にプレビュー画像が表示されるので、「次へ」ボタンをクリックする。 黄色いマーカーをクリックして「次へ」をクリック 「データオプションの設定」画面が表示された。日付のデータをソートして、降順に並

全2回でお届けしている「Adobe Dreamweaver CS4」の新機能紹介と操作ガイド。前編では、「コードナビゲータで定義したCSSをすばやく調べる」、「ビューの表示方法を切り替える」を紹介した。後編では、「Spryデータセットでコンテンツ作成」と「ライブビュー/ライブコード」で表示を確認する方法を紹介したい。 Spryデータセットでコンテンツ作成(1) 「Spryデータセット」は、取得したデータをソートしたり、指定したデータを呼び出して表示するSpryコンテンツだ。「Dreamweaver CS3」から搭載された機能だが、CS4から読み込み用データとしてHTMLのテーブルを扱えるようになり、コンテンツ作成がより容易になった。「Spryデータセット」を使って、日付をクリックすると記事が更新されるコンテンツを作成してみよう。 日付を変えるとコンテンツが更新される。写真は完成後のイメージ

2008年11月にリリースされたWebオーサリングソフト「Dreamweaver」の新バージョン、「Adobe Dreamweaver CS4」。Dreamweaverを完全マスターするためにも、CS4から加わった新機能「コードナビゲータ」や「ビューの切り替え」、「Photoshopとの連携」、「Spryデータセット」、「ライブビュー/ライブコード」の具体的な操作方法を前編、後編の2回にわけて紹介しよう。 「コードナビゲータ」で定義したCSSをすばやく調べる 「コードナビゲータ」は、選択した場所に適用されているCSSの内容を確認する機能。ショートカットキーでコードナビゲータを開くには、「Alt」キー(Win)または「Command」＋「Option」キー(Mac)を押しながら、ドキュメントの任意の場所をクリックすると、グレーの太枠に囲まれたウィンドウが開く。これがコードナビゲータである。