Dreamweaverデザインブック CC2015対応
Dreamweaverの「視覚的な編集機能」と、標準で組み込まれたCSSフレームワーク「Bootstrap」とを活用し、レスポンシブWebデザインのサイトを効率よく構築する方法をステップ・バイ・ステップで解説しています。
はじめに
スマートフォンやタブレットの普及により、近年のWebページ制作ではマルチデバイス対応が必須となっています。しかし、レスポンシブWebデザインの設定や、異なる画面サイズでの表示確認など、手間のかかる設定や調整を行わなければなりません。
そこで、おすすめしたいのがDreamweaverの活用です。最新のDreamweaverはCSSフレームワークのBootstrapに対応し、レスポンシブな段組みやパーツをワンクリックでWebページに挿入し、ライブビューで表示を確認しながら調整できるようになっています。そのため、
「Webページ制作はハードルが高い」
「Webページ制作をもっと効率化したい」
「Bootstrapをもっと手軽に利用したい」
と考えている制作者にとって、強力なツールの１つとなってくれます。
本書ではそんなDreamweaverを活用し、レスポンシブでマルチデバイスに対応したページを１から作成していきます。
基本的なパーツの作成から、Bootstrapの段組みを駆使したページレイアウト、テンプレートを使ったパーツの一元管理まで、ステップ・バイ・ステップで解説していきますので、DreamweaverやBootstrapの習得に役立てていただければと思います。
本書について
本書はDreamweaverと、Dreamweaverに搭載されたBootstrapの機能を活用し、マルチデバイスに対応したWebページを作成できるようになることを目的としています。そのため、次のサンプルを１から作成していきます。
HTMLとCSSの編集
本書ではDreamweaverの機能を紹介していくため、HTMLとCSSの編集には「Dreamweaverに用意されたビジュアル的な編集機能を使う」という方針で、コードビューを極力使わない形で作業を進めていきます。
コードビューを使って直接ソースコードを編集しても問題はありませんので、スキルや好みに応じて使いやすい編集機能を組み合わせて作業を進めていただければと思います。
もくじ
[mokuji]
Chapter 1 Webサイト制作の下準備
1-1 Webサイトの構築場所を指定する
パネルのアレンジ
「ようこそ」画面の表示
1-2 Webページのベースを準備する
1-3 CSSファイルを準備する
Chapter 2 パーツの準備
2-1 記事
記事のタイトルと本文を追加する
ソースコードを確認する
グループ化する
-DOMパネルを使って要素を移動する
クラス名を指定する
画面の横幅を小さくしたときの表示を確認する
ブラウザでの表示を確認する
- ライブビューのエレメントディスプレイをオフにする
- 要素の選択方法
2-1A 記事のデザインを指定する
見出しの文字サイズを変更する
段落の文字サイズを変更する
ページフォントの種類を変更する
- フォントの選択肢
CSSファイルのソースコードを確認する
- ページプロパティ画面に用意されたページフォントの設定
2-1B パーツをスニペットとして登録する
2-2 概要
クラス名を変更する
見出しのマークアップを変更する
不要な段落を削除する
- クイックタグ編集でマークアップを変更する
2-2A 概要にリンクを設定する
リンクの設定パターンを検討する
パーツ全体にリンクを設定する
- クイックタグ編集でリンクを設定する
- 要素ごとにリンクを設定する場合
- テキストの一部にリンクを設定する場合
- リンクを挿入する場合
- リンク先の変更
2-2B 概要のデザインを指定する
リンクのデザインを変更する
見出しのデザインを変更する
CSSファイルのソースコードを確認する
- セレクタごとの設定の確認
スニペットとして登録する
2-3 サムネイル画像付きの概要
画像を用意する
画像を挿入する
- 依存ファイルのコピー
- 画像をレスポンシブWebデザインに対応させる設定
- Bootstrapのパーツを使わずに画像を挿入する方法
2-4 アイコン付きの概要のデザインを指定する
アイコンパーツを挿入する
- Glyphiconsで表示できるアイコン
FontAwesomeを使ってアイコンを表示する
- FontAwesomeで表示できるアイコン
- FontAwesomeのCSSファイルのURL
2-4A アイコン付きの概要のデザインを指定する
- スタイルシートの優先順位
Chapter 3 Bootstrapの段組みを使ったページレイアウト
3-1 ページの設定
Webサイトの構築場所を追加する
段組みとレスポンシブWebデザインの設定を確認してページを作成する
ページのタイトルと言語の種類を指定する
アイコンフォントを使用できるようにする
CSSファイルを作成する
3-2 基本的な段組みのレイアウト
段組みを作成する
段組みの表示を確認する
１段目に概要を挿入する
概要をコピーして残りの段に挿入する
概要のデザインをアレンジする
3-2A １段組みを２段組みに変更する
段数を変更する
- 常に２段組みで表示する場合
3-2B 大画面で段組みの横幅を固定する
メディアクエリで適用条件を付けて
横幅を指定する
- 横幅を固定した段組みが中央に配置される仕組み
3-3 ２段組みのレイアウト
２段組みを追加する
各段に見出しを挿入する
各段の横幅を変更する
- カラム落ち
見出しのデザインを指定する
3-3A メニューを挿入する
Bootstrapのメニューのパーツを挿入する
メニューを縦並びにする
- Bootstrapによる縦並びメニューの基本的なデザイン
3-4 ２段組みをネストしたレイアウト
段組みの子階層に２段組みを追加する
サムネイル画像付きの概要を挿入する
- 他の構築場所からファイルやフォルダをコピーする
段組みの段を増やす
- 空の段を増やす場合
カラム落ちを利用した段組みが崩れるのを防ぐ
- 段を増やしたときの表示
Chapter 4 ヘッダーとフッターの作成
4-1 ナビゲーションバーのレイアウト
Bootstrapのナビゲーションバーを挿入する
ナビゲーションバーの表示を調整する
- Bootstrapが用意しているナビゲーションバーのデザイン
- ナビゲーションバーの色を自由にアレンジする
4-2 ヘッダー画像のレイアウト
１段組みを追加する
キャッチコピーを追加する
ヘッダー画像を表示する
キャッチコピーの表示位置を調整する
4-3 フッターのレイアウト
１段組みを追加する
サイトに関する情報を追加する
バーの形にデザインする
バーを複製する
コピーライトを記述する
Chapter 5 レスポンシブなレイアウトとデザインの調整
5-1 余白を削除してパーツを敷き詰めたレイアウトにする
削除したい余白が設定された要素を確認する
- インスペクトモードの利用
余白を削除する
5-2 余白を追加してパーツの間隔を調整する
余白を追加する箇所を検討する
余白を追加する
小画面以上のときに余白を追加する
- 段組み内の段に設定を適用するセレクタの記述パターン
5-3 極小画面での文字サイズを調整する
主要なデバイスの画面サイズでの表示を確認する
新しいブレークポイントを追加して文字サイズを調整する
- ページの横幅とスクロールバー
5-4 ヘッダー画像のデザインをアレンジする
ボックスに合わせてヘッダー画像全体を表示する
キャッチコピーの背景を半透明な黒色にする
横幅500px以下の画面でのデザインを調整する
リンクボタンを追加する
- Bootstrapが用意しているボタンのデザイン
5-5 サムネイル画像付きの概要をコンパクトなデザインにする
画像とテキストを横に並べる
5-6 メニューのデザインをアレンジする
リンクを点線で区切る
5-7 サイト名のデザインをアレンジする
サイト名をWebフォントで表示する
- Adobe Edge Web Fonts
ロゴ画像を表示する
- 高解像度なデバイスにおける画像の表示
5-8 検索フォームを作成する
段を追加して１段組みを２段組みにする
検索フォームを作成する
検索フォームのデザインをアレンジする
- ラベル
Chapter 6 テンプレートの作成と利用
6-1 テンプレートを作成する
6-2 テンプレートを使用してコンテンツページを作成する
テンプレートを使ってページを作成する
テンプレートで作成したページを編集する
6-3 コンテンツページのデザインを調整する
段の横幅を変更する
段の並び順を変更する
- 左右に大きくずらした場合
- 段の配置を「列オフセット」ハンドルで右にずらした場合
記事のタイトルに円形のアイコンを付ける
記事の本文に中見出しを付ける
記事の本文に画像を挿入する
メニューのデザインを指定する
レスポンシブWebデザインの調整を行う
段組みの段の間隔を調整する
6-4 テンプレートによる一元管理
トップページをテンプレートで作成した形にする
テンプレートの編集結果が反映されることを確認する
APPENDIX
Bootstrapについて
Bootstrapのパーツやクラス名について
DreamweaverのBootstrapをバージョンアップする
作成済みのサイトで使用しているBootstrapをバージョンアップする
作成済みのサイトで使用しているBootstrapのバージョンを確認する
Bootstrapのバージョンによる違いについて
主要なデバイスの画面サイズ
デバイスプレビュー
[/mokuji]
