連載
» 2014年04月25日 18時00分 公開

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

[岡本紳吾,hatte.Inc]
前のページへ 1|2|3|4       

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

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

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

[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


前のページへ 1|2|3|4       

Copyright © ITmedia, Inc. All Rights Reserved.

編集部からのお知らせ

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。