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

[岡本紳吾，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