Dreamweaver CC 2015 と「Bootstrap」によるレスポンシブWebデザイン［実践編］

学習内容：

• Dreamweaverのライブビューで「Bootstrap」を活用する方法を習得
• CSSデザイナー、DOMパネル、挿入パネルなどを最大限に活用したDreamweaverのライブビュー・ワークを習得
  ※ライブビュー習得が目的のため、HTMLやCSSを記述する作業はありません

達成目標：

• Bootstrapの概念、仕組みを理解し、Dreamweaverのライブビューでページを作成できる
• Bootstrapのデフォルトのデザインを「意図したデザインに変更する」ための技術スキルを身につける
  ※ライブビュー習得が目的のため、コーディングスキルは対象外です

対象者：

• これからBootstrapを学ぶ初心者の皆さん
• Bootstrapは使っているが、完全に理解していないので再学習したいと考えている人
  ※Dreamweaverの初歩的なスキルは習得されていること

総再生時間：

• 2時間41分

Introduction　Bootstrapの基礎知識［講義］

Dreamweaverが、ネイティヴサポートしているCSSフレームワーク「Bootstrap（ブートストラップ）」の基礎知識（グリッドシステムの仕組み、可変幅／固定幅の違いなど）と、Dreamweaverでどのように活用していくのか大まかに学びます。

• Bootstrapのグリッドシステムと可変幅／固定幅について理解する

PART-01　Bootstrapのデザインを変更する手順［講義／デモンストレーション］

2016年3月17日にアップデートしたDreamweaver CC 2015.2で大幅に強化された「DOMパネル」の使い方を学習します。ライブビューの作業で、最も使用頻度の高い新しいDOMパネルを完全習得しておきましょう。このPartは講義とデモンストレーションです（実習はありません）。

• STEP-01　新しいDOMパネルの使い方を理解する
• STEP-02　DOMパネルの新機能でBootstrapを自在に編集する
• STEP-03　Bootstrapの外観を変更する手順について理解する

PART-02　Bootstrapのデザインを変更してみよう！［実習］

Bootstrapのコンポーネントで組み立てたページをCSSデザイナーで変更していきます。このPartでは、インスペクトモードを活用して、「どこを」変更すれば、思いどおりの外観になるのか判断できるスキルを身につけます。Bootstrap活用の核となる重要な学習です。

• STEP-01　独自のスタイルを指定してBootstrapの外観を変更しよう！
• STEP-02　どこを指定すれば意図したとおりに変更できるのか確認しよう！
• STEP-03　配置したBootstrapコンポーネントのデザインを変更していこう！
• STEP-04　Bootstrapのカラムに画像を挿入して余白を調整しよう！

PART-03　Bootstrapでシングルページを作成しよう！［課題］

実際にシングルページを作成していきます。新規ページ（真っ白な状態）から、ページ設計、スタイルガイドの作成、Bootstrapコンポーネントの選択と組み立て、独自のスタイルをつくる作業など、すべての工程を体験してもらいます。

• STEP-01　Bootstrapでページを作成する流れを把握しておこう！
• STEP-02　DOMパネルでHTMLの基本構造を構築していこう！
• STEP-03　基本構造にBootstrapのコンポーネントを挿入しよう！
• STEP-04　Bootstrapのコンポーネントにコンテンツを追加しよう！
• STEP-05　ジャンボトロンを組み合わせてヒーローイメージを作ろう！
• STEP-06　Bootstrapのナビゲーションバーをカスタマイズしよう！
• STEP-07　水平方向に並べたカラムの左右の余白をゼロにしよう！
• STEP-08　フッターにソーシャルアイコンを配置して間隔を調整しよう！
• STEP-09　ニュースレターの登録フォームをデザインしよう！
• STEP-10　テキストブロックを下寄せしてヒーローイメージを完成させよう！
• STEP-11　ブレイクポイントを追加しながらデザインを最終調整しよう！