Dreamweaver CC 2015.2 によるレスポンシブWebデザイン［基礎編］

デスクトップに新規フォルダを作成して、サイトを定義します。この学習は手順どおりに進めるだけの簡単な内容です。ビデオを観ながら、順番に進めてください。尚、今回のカリキュラムには、サーバーにFTPする設定は含まれていません。
※前回の講義ビデオを使用しています（収録場所が異なるため声質が若干変わります）。

2016年3月にアップデートしたバージョン2015.2の新しいDOMパネルの基本機能について解説します。ライブビューでは、素材データのテキストファイル（「Part-01-s03」フォルダ→「SinglePage-Text.txt」）を使用します。この作業のみ、ペーストスペシャルで作業を効率化するため、ライブビューからデザインビューに切り替えます。

DOMパネルを使って、HTMLを構造化していきます。ライブビューでは、HTMLを直接記述する作業はありません。HTMLやCSSの基礎知識は必要ですが、コーディングせずに効率よく作業を進めていきます。このSTEPで、スタイルを指定するための新規CSSファイルを作成します。

DDOMパネルを使って、コンテナの中に見出しを入れたり、コンテナの外に移動させるなど、HTMLの構造を変更します。新機能によって、ページ上に表示されるエレメントディスプレィとDOMパネルを行ったり来たりする必要がなくなりました。後半は、CSSデザイナーで基本ページの外観を整えていきます。

素材データの画像ファイル（「Part-02-s01」フォルダ→「images」フォルダの中の画像ファイル）を使用します。ページ上部のヘッダー領域と下部のフッター領域に背景画像を指定します。背景画像の位置、表示方法、サイズなどを学びます。

最初に、スマートフォンなどの小さな画面で観やすいレイアウトをデザインしていきます。ページ中央の領域に、大きなキャラクターの絵を背景画像として表示させ、ボーダーなどの装飾を加えます。また、段落の背景色に半透明を指定します。

小さな画面で見やすいレイアウトが完成したら、次はパソコンなどの大きなワイドスクリーン画面で有効なレイアウトをデザインしていきます。また、ページ中央の記事と背景に設定されているキャラクターの画像を2段組のような表現でまとめます。

Webサイト内の情報をナビゲートするためのUI（ユーザーインターフェイス）「ナビゲーションバー」を設置しますが、箇条書きで表現します。ナビゲーションバーを作成するときの基本テクニックです。このSTEPもライブビューだけで進めます。

箇条書きの状態から、「CSSデザイナー」だけで、ナビゲーションバーの外観に変えていきます。スマートフォンなどの小さな画面で利用しやすい垂直方向にボタンが並ぶデザインになります。初級レベルの内容ですが、重要度の高い学習です。

パソコンなどの大きなワイドスクリーンで使いやすいナビゲーションバーをデザインします。このSTEPでは、ボタンを水平方向に並べる際、フロート処理や、そのフロートを解除する「clearfix」などのCSSテクニックを学びますので中級レベルです。

最後のSTEPは、ナビゲーションバーにリンクを指定し、マウスカーソルが重なったり、クリックしたときの外観をデザインしていきます。CSSを大幅に書き換える作業のときに、「スタイルのコピー」を学びます。CSSデザイナーの便利な機能です。

本コンテンツ「Dreamweaver CC 2015.2（最新バージョン）によるレスポンシブWebデザイン」は、スクリーンキャスト（講義ビデオ／1時間11分）とレッスンデータ、完成データで構成されています。講義ビデオは、YouTubeの非公開モードで視聴することができます。

※機能強化されたDOMパネルを最大限に活用しています。2016年3月にアップデートした最新のDreamweaverが対象です。

※本コンテンツは、ウェブキャスト（オンライン講座）のアーカイブです（教材として制作されたものではありません）。「講座ビデオ版／Dreamweaver CC 2015 によるレスポンシブWebデザイン」を最新のDreamweaverを使って再演したものです。Part1〜2は、駅近くの教室で収録しており（耳障りではありませんが）若干の環境音が入っています。Psrt-1のSTEP-02「原稿のテキストを貼り付けて見出しのレベルを指定する」が視聴できますので、ご確認ください。

※講義ビデオは、YouTubeの非公開モードで視聴することができます。私的利用の範囲であれば、ダウンロードツールを使用して、所有デバイスにコピーしてもかまいません。