Dreamweaver CC 2015 によるレスポンシブWebデザイン

デスクトップに新規フォルダを作成して、サイトを定義します。この学習は手順どおりに進めるだけの簡単な内容です。ビデオを観ながら、順番に進めてください。尚、今回のカリキュラムには、サーバーにFTPする設定は含まれていません。

新規ページを作成します。今回のカリキュラムでは、Bootstrapを使用しませんが（Bootstrapの機能は一切使いません）、リリース後の追加コンテンツで利用する可能性がありますので、Bootstrapを選択した状態でページを作成します。

素材データのテキストファイル（「Part-01-s03」フォルダ→「SinglePage-Text.txt」）を使用します。この作業のみ、ライブビューからデザインビューに切り替えます。外部のテキストファイルをコピー＆ペーストするときに、必須となる知識です。

DOMパネルを使って、HTMLを構造化していきます。HTMLを直接記述する作業はありません。コンテナの中に見出しを入れたり、コンテナの外に移動させるなど、HTMLの構造を変更する作業が中心です。このSTEPで、DOMパネルを習得します。

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

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

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

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

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

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

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

本コンテンツ「Dreamweaver CC 2015 によるレスポンシブWebデザイン」は、11本のスクリーンキャスト（学習ビデオ）と素材データがセットになっています。