Dreamweaver + HTML5&CSS3 レッスンブック

はじめに

DreamweaverはWebページ制作を強力にサポートしてくれるビジュアルツールです。しかし、ワープロやDTPソフトとは勝手が違い、Webページの基本的な作法を理解していないとちょっとしたデザインやレイアウトも思い通りにコントロールすることができません。そのため、「習得途中で挫折した」という声をよく耳にします。

それでは、Dreamweaverを活用するためには、別途、HTMLやCSSを勉強し、文法などを完全に熟知しておく必要があるのでしょうか？

答えは "NO" です。

必要となるのは、HTMLでマークアップし、CSSでデザインを指定するという基本的な作法や考え方の理解です。このあたりがある程度見えてくると、細かな文法などの知識はDreamweaverが補ってくれます。特に、DreamweaverではWebページのデザインやレイアウトの基本となる「ボックスモデル」をわかりやすく、視覚的に確認することができ、HTMLやCSSを学ぶのにも最適なツールとなっています。異なる画面サイズでの表示も簡単に確認することができますので、スマートフォンやタブレットなど、マルチデバイス対応の設定も手軽に行うことが可能です。
そこで、本書では

• Dreamweaverをこれから学ぼうとしている
• Dreamweaverをすでに使っているが、使いこなせていない
• HTML＆CSSの考え方や仕組みを理解し、使いこなせるようになりたい
• テキストエディタでコードを記述するのは面倒くさいと思っている
• レスポンシブWebデザインやjQuery Mobileを利用したマルチデバイスへの対応、HTML5やCSS3の新機能まで含めて習得したい

といった方を対象に、ステップ・バイ・ステップでページを作成しながら、Dreamweaverの基本的な使い方からHTML5＆CSS3の活用方法までを習得できるように構成しました。Dreamweaverの理解とHTML＆CSSの理解を同時に進める1冊として、手元に置いていただければ幸いです。

もくじ

Chapter 1　［イントロダクション］Dreamweaverで効率よくページを作成するために

STEP 1　ワープロやDTPソフトとDreamweaverの違い
STEP 2　Webページの作法

Chapter 2　［基本編］文字の表示とデザイン

STEP 1　Dreamweaverを使ってみる
STEP 2　ページの新規作成
STEP 3　文字を入力する
STEP 4　見出しを指定する
STEP 5　デザインしたい箇所をインスペクトモードで選択する
STEP 6　CSSのルールを作成してデザインを指定する
STEP 7　IDで区別してデザインを指定する
STEP 8　文章中の語句のデザインを指定する

Chapter 3　［基本編］レイアウト

STEP 1　<div>でマークアップする
STEP 2　ボックスを罫線で囲む
STEP 3　ボックスの横幅を指定する
STEP 4　ボックスの配置を指定する
STEP 5　ボックスの余白を調節する
STEP 6　ボックスに下線を引く
STEP 7　ボックスの背景色を指定する
STEP 8　区切り線を挿入する

Chapter 4　［基本］画像とアップロード

STEP 1　画像を挿入する
STEP 2　画像まわりの余白サイズを調節する
STEP 3　背景画像を表示する
STEP 4　リンクを設定する
STEP 5　リンクのデザインを指定する
STEP 6　ブラウザでの表示を確認する
STEP 7　ページをアップロードする

Chapter 5　［サイト構築編］段組みレイアウトとナビゲーション

STEP 1　下準備
STEP 2　クラス名を利用して同じスタイルシートを適用する
STEP 3　セレクターのグループ化を利用して同じスタイルシートを適用する
STEP 4　３段組みのための準備
STEP 5　スニペットで増やすためのパーツを作成する
STEP 6　スニペットで同じデザインのパーツを増やす
STEP 7　3段組みでレイアウトする
STEP 8　ナビゲーションバーを作成する
STEP 9　外部スタイルシートを利用する

Chapter 6　［サイト構築編］テンプレートの活用とコンテンツページの作成

STEP 1　テンプレートを作成する
STEP 2　テンプレートを利用してページを作成する
STEP 3　テンプレートを編集して複数ページをまとめてカスタマイズする
STEP 4　2段組みのレイアウトを設定する
STEP 5　子テンプレートを作成する
STEP 6　子テンプレートを利用してページを作成する
STEP 7　IDを指定してページごとにデザインを変える
STEP 8　表示位置や重なり順を指定してレイアウトする
STEP 9　テーブル（表組み）を作成する
STEP 10　フォームを作成する

Chapter 7　［応用編］スマートフォン＆タブレット

SAMPLE 1　レスポンシブWeb デザインの設定
SAMPLE 2　可変グリッドレイアウトを利用したページ作成
SAMPLE 3　jQuery Mobileを利用したページ作成

Chapter 8　［応用編］HTML5＆CSS3

SAMPLE 1　HTML5による論理構造のマークアップ
SAMPLE 2　HTML5によるビデオの表示
SAMPLE 3　HTML5によるフォームの機能拡張
SAMPLE 4　トランジション機能を利用したアニメーションの設定