HTML・CSS・WordPress初心者のためのDreamweaverの基本的な使い方が分かる記事10選：Webサイト作成手順を勉強するまとめ（2）（4/4 ページ）

新社会人のWeb制作者／デザイナー向けにAdobe Creative Cloudの使い方を例に、現場で使える具体的な制作手順とテクニックを学んでいく入門まとめ連載。今回はWeb制作現場で役立つDreamweaverの使い方について。初期設定、テキスト、画像、HTML、CSSの扱い方から、リンク操作、WordPressのテーマ制作まで、さまざまなテクニックをまとめて紹介する。

[岡本紳吾，hatte.Inc]

【ステップ9】［CSSデザイナー］でCSSに慣れていこう

　DreamweaverはWeb技術の革新に対応して、CSSツールを一新した。それが［CSSデザイナー］だ。［CSSデザイナー］ではCSSのプロパティをGUIでコードを書くことなく設定するものだ。同じような機能は以前から提供されていたが、より直感的に（グラフィックツールを操作するような間隔で）操作することができるようになっている。

　CSSは始めから覚えていくのは少々大変な作業だ。筆者もCSSはDreamweaverをいじりながら覚えていった。慣れてくるとコードビューでバリバリと打ち込んでいけるが、［CSSデザイナー］は結果にすぐ反映されるため、試行錯誤のツールとしても有用だ。CSS3で登場した「メディアクエリ」という新しい機能にも対応している。

• Dreamweaver CCでWordPressテーマをちょっと加工 第2回CSSデザイナーパネルで、コードを書かずに見た目を変更しよう（Adobe Pinch In）の主な内容
1. ［CSSデザイナー］パネルでできること
2. ［CSSデザイナー］パネルで見た目を変更する
3. CSSプロパティの一時停止と削除

ブログのヘッダーの背景色を変更する（Dreamweaver CCでWordPressテーマをちょっと加工 第2回CSSデザイナーパネルで、コードを書かずに見た目を変更しよう（Adobe Pinch In）より引用）

• Dreamweaver CCでWordPressテーマをちょっと加工 第3回メディアクエリを利用してマルチデバイスに対応しよう（Adobe Pinch In）の主な内容
1. メディアクエリをサポートしているDreamweaver CC
2. ライブビューでメディアクエリを使った表示にする
3. メディアクエリを使った新しいセレクターを定義する

［CSSデザイナー］パネルでメディアクエリーに関連したCSSスタイルを変更する（Dreamweaver CCでWordPressテーマをちょっと加工 第3回メディアクエリを利用してマルチデバイスに対応しよう（Adobe Pinch In）より引用）

次回は、コーディングせずにHTML5アニメーションを身に付けよう

　今回はDreamweaverの基本的な使い方をまとめて紹介した。Dreamweaverはいわば「広大な海」のようなソフトだ。はるか前からユーザーと共に歩み続け、綿々と受け継がれてきたワークフローへの徹底した効率化が、さまざまな機能となって実装されている。

　そのため、利用している現場ごとにDreamweaverの使い方には個性がある。その個性を自分なりにカスタマイズして吸収できるのもまた、Dreamweaverの良いところだといえる。ここで紹介した記事は入り口にすぎないが、ぜひともマスターして使いこなしてほしい。

　さて、Webサイトがあらかた作れるようになったら、アニメーションを追加できるようにして、さらなる表現力を身に付けてみよう。次回は、Adobe Edge Animateの使い方を例にWebアニメーション作成の手順と基本を紹介する。Adobe Edge AnimateならHTML5のコーディングができなくてもWebアニメーションが作れるので、初心者にはうってつけだ。

　もちろん、「Adobe Pinch In」ではすでに読めるので、そちらも参照してほしい。

岡本 紳吾（おかもと しんご）

1975年大阪生まれ。2000年ごろよりAdobe Flash（当時はmacromedia）を使ったコンテンツ制作を始め、Flash歴だけは異様に長い。自他共に認めるFlash大好きっ子。2008年より活動の拠点を東京に移し、2011年に独立。最近はAdobe Edge系を活用し、HTML5コンテンツも手掛ける。Webプロデュースと制作と山岳メディア運営の会社、hatte Inc.代表取締役。Twitter：@hage、Facebook：shingo.okamoto