世界一わかりやすい Dreamweaver 操作とサイト制作の教科書

モノを作るためには道具を自分の身体のように使えることが大切です。デジタルなクリエイティブの世界でもそれは同じ。創造するためには、まず技術を身につけましょう。機能やツールの使い方の初歩の初歩からはじめて、読み終わるころにはしっかりと基礎力がついているように、本当に必要な技術を選んで 15 のレッスンを構成しました。

『世界一わかりやすい Dreamweaver 操作とサイト制作の教科書』 (中川正道、やのうまり絵 (みま)、トミー智子 著、技術評論社、2018 年 9 月刊) は、技術評論社の「世界一わかりやすい教科書」シリーズの 1 冊で、Adobe Dreamweaver の操作と Web サイトの制作を 15 のレッスンで解説した教科書です。対応バージョンは Adobe Dreamweaver CC2018 です。版元の案内によれば、学校の授業のようにレッスンを順に進める構成で、覚えておくべき機能と使い方を短い文で解説し、Dreamweaver の操作に要る HTML や CSS の知識も必要に応じて取り上げます。

全 15 レッスンの構成、基本操作からサイトの公開まで

Lesson01 で Dreamweaver の基礎知識、CC の主な新機能と特徴、ファイルの作成と保存、環境設定とその同期を扱い、Lesson02 で制作の基礎知識とプレビュー用ブラウザーの登録、Lesson03 で Web サイトのフォルダー構成とサイトの定義へ進みます。Lesson04 と Lesson05 は HTML の基本と応用で、コードビューでの入力、文書構造を意識した記述、テーブルとフォームまでを扱い、Lesson06 は画像と動画、Lesson07 はリンクの作成とチェックです。Lesson08 から Lesson11 は CSS のレッスンで、記述方法とリセット、ヘッダーとナビゲーションのレイアウト、コンテンツ領域のデザインとレイアウト崩れの修正を経て、CSS3 のボックスシャドウと角丸、グラデーションと透過、アニメーションへ進みます。Lesson12 はテンプレートの作成と利用、Lesson13 は Web サービスやスニペット、ライブラリによる機能の追加、Lesson14 は Bootstrap を使ったレスポンシブデザイン、Lesson15 はサーバーの設定、ファイルのアップロードとダウンロード、サイトの管理です。練習問題は Lesson02 と、Lesson04 から Lesson14 までの各レッスンの末尾に置かれています。

ビジュアル編集とコード、サイトの定義とテンプレート

Dreamweaver は、ページの見た目を確かめながら編集する画面と、ソースコードを直接書く画面を一つのアプリケーションの中で切り替えて使える Web 制作のソフトです。ページの骨組みは HTML で、色や配置といった見た目は CSS で書きます。Dreamweaver では、書いた結果を画面で確かめ、サイト全体を一つの単位として扱えます。サイトを定義しておくと、手元のフォルダーとサーバー上の公開先が対応づけられ、ファイルを移したときのリンクの更新やアップロードをアプリケーションの側でまとめて扱えます。テンプレートは、ヘッダーやナビゲーションのような共通の部分を一か所で直すと、そのテンプレートから作ったすべてのページに変更が反映される仕組みです。

Lesson14 の Bootstrap とレスポンシブデザイン

レスポンシブデザイン は、一つの HTML を画面の幅に応じて組み替える作り方です。Bootstrap は、画面幅に応じて列の数を変えるグリッドや部品をあらかじめ用意した CSS のフレームワークで、Lesson14 ではこれを使ってスマートフォンにも対応したページを作り、テンプレートをカスタマイズします。Dreamweaver は Adobe の Creative Cloud の契約で使うアプリケーションです。版元は、Dreamweaver CC を使いたい初心者、Web デザイナー志望者、コーダー志望者、学生、HTML や CSS を勉強したい人などを読者に挙げています。Dreamweaver の基本操作から、HTML と CSS によるページの制作、テンプレート、Bootstrap によるレスポンシブデザイン、サイトの公開と管理までを、全 15 レッスンに収めています。