BootstrapとDreamweaverでレスポンシブWebデザインのページをデザインしよう!
久しぶりに最新のDreamweaverを見てどう使っていいのか分からなくなった人、ライブビューで挫折してしまった人も再チャレンジ!
「Dreamweaver CC 2015 基礎編 パート1」は、2015年2月に発売した「デザイナーのためのデザイニング・イン・ザ・ブラウザ」シリーズの第一弾「Dreamweaver基礎編」のアップデート版です。
14本のスクリーンキャスト(2時間30分の学習ビデオ)と素材データ、前作の電子書籍で構成されています。
今回のコンテンツは基礎編の2015バージョンという位置づけで、初心者向けの内容になっています。
購入方法、価格については[購入情報]をご覧ください。
「デザイナーのためのデザイニング・イン・ザ・ブラウザ」シリーズは当初、Dreamweaver基礎編、実践編、Photoshop実践編の3冊を予定していましたが、バージョンアップによるカリキュラム変更でリリースを延期していました。12月1日に新しい外観のPhotoshopがリリースされましたので、「Photoshop実践編」の編集作業を再開しています。
今回のパート1は、「Dreamweaver基礎編」のアップデート版になります。1月下旬予定のパート2が「Dreamweaver実践編」に相当します。
尚、「Dreamweaver基礎編」の購入者には、「Photoshop実践編」を無料提供するキャンペーンをやっていましたので、リリース日にはダウンロードページに追加します。
※「Photoshop実践編」ダウンロード用のパスワードを掲載しておきますので、メモしておいてください。
更新日:2015年12月7日(月)
12月1日、Dreamweaverがアップデートし、2015.1バージョンになりました。
CC 2015でネイティブサポートしたBootstrapのバージョンが3.3.5になり、jQueryも1.11.3に更新されています(挿入パネルにはBootstrapの新しいコンポーネントが追加されています)。ビジュアルメディアクエリーやExtract、DOMパネル、CSSデザイナー、そしてライブビューも機能強化されています。詳細は新機能のページをごらんください。
「Dreamweaver CC 2015 基礎編 パート1」は、アップデートする前の2015バージョンを使用していますが、第10回から最新の2015.1バージョンに切り替えています。初心者を対象とした学習内容になっていますので、2015.1バージョンでも問題なく学ぶことができます。
更新日:2015年12月6日(日)
「Dreamweaver CC 2015 基礎編」は、パート1と2に分け、別のコンテンツとしてリリースします。パート2は、パート1の学習内容をマスターしている前提で、中級者以上を対象にします(2016年1月末リリース予定)。
学習内容:
達成目標:
本コンテンツには、2月にリリースした「Dreamweaver 基礎編」の電子書籍が含まれています。2014バージョンを対象にしていますが、大半は2015.1バージョンでも違いはなく、参考書として活用することができます。
学習ビデオは、2時間30分ありますが、Dreamweaverについての概要やHTML、CSSについては詳しく解説していませんので、ビデオによる実習を始める前に、事前学習しておくことをお薦めします。
※電子書籍は、EPUB 3形式になっており、対応リーダー(iBooksやAdobe Digital Editionsなどで読むことができます)
Dreamweaver CC 2015で統合されたCSSフレームワーク「Bootstrap(ブートストラップ)」について学びます。Bootstrapは、水平方向に12カラム並ぶグリッドシステムを採用しており、可変幅と固定幅のデザインを使い分けることができます。このグリッドシステムは、ページレイアウトのベースになりますので、作業を始める前に理解しておく必要があります。
更新日:2015年11月29日(日)
デスクトップにフォルダを作成して、新規サイトを定義します。素材データを定義したサイトのフォルダにコピーしますので、事前にダウンロードしておいてください。ワークスペースのレイアウトは[デフォルト]の状態で解説します。Bootstrapを選択して、新規ドキュメントを作成し、登録したブラウザーでプレビューできるように初期設定を確認しておきます。
更新日:2015年11月24日(火)
DOMパネルとエレメントディスプレイ、挿入パネルの基本操作について学習します。DOMパネルのタグを選択し、ページに表示される[エレメントディスプレイ]で、Bootstrapのクラス名を追加していく手順を覚えてください。挿入パネルを使って、BootstrapのコンポーネントやHTMLのImage(画像)をページに挿入します(第2回でコピーした素材データを使用)。
更新日:2015年11月24日(火)
Bootstrapのグリッドシステムの初歩を学びます。第3回で挿入した画像を2つ複製して、水平に3つの画像を並べます。画像の複製はDOMパネルを使用、レイアウトは(各画像の)エレメントディスプレイでBootstrapのクラス名を追加しながら、設定していきます。DOMパネルとエレメントディスプレイは使用頻度の高い機能です、しっかり理解しておきましょう。
更新日:2015年11月24日(火)
Dreamweaver CC 2015の挿入パネルに追加された[Bootstrapのコンポーネント]には、列の数を指定するだけで、マルチカラムの行をページに挿入できるコンポーネントが用意されています。第4回で作成した(3つの画像を水平に並べる)レイアウトをBootstrapのコンポーネントで素早く作成します。ページレイアウトの基本的な組み立て方を学んでください。
更新日:2015年12月6日(日)
第5回では、マルチカラムの行を挿入できるBootstrapのコンポーネントで、3つの画像を水平方向に並べましたが、ここではテキストを配置します。素材データのテキストファイルを使って、文章をコピーして、ライブビューで編集していきます。ライブビューでテキストブロックを編集するための操作方法について学習します。また、段落を見出しに変更する方法も学びます。
更新日:2015年12月6日(日)
第2〜6回で作成したページを複製して、全ての要素を削除、一からページを作成していきます。ライブビューとコードビューを同時に使用する「効率的なテキスト編集」について学習します。Bootstrapには、「固定幅」と「可変幅」の2種類のグリッドレイアウトがあります。固定幅レイアウトと可変幅レイアウトを比較しながら、どのような違いがあるのか確認していきます。
更新日:2015年12月6日(日)
第7回で作成したページを編集します。挿入パネルで「div」タグを挿入して、Bootstrapのクラス名を追加しながら、レスポンシブWebデザインのベースとなるページを作成します。挿入パネルでライブビューの画面にタグを挿入し、DOMパネルでタグを選択、エレメントディスプレイでBootstrapのクラス名を追加していく作業手順を繰り返しながらデザインを進めていきます。
更新日:2015年12月6日(日)
第7〜8回で作成したページを編集します。エレメントディスプレイで独自のクラス名を追加して、新しいCSSファイルを作成、[CSSデザイナー]パネルでスタイルを指定していきます。ここでは、CSSを記述せず、CSSデザイナーで見栄えを整えます。コードは書きませんが、CSSの基礎知識は必要になります(※CSSに詳しくなくてもページデザインの「体験」は可能です)。
更新日:2015年12月6日(日)
新規ページを作成して、Bootstrapコンポーネントのナビゲーションバーとジャンボトロンを配置します。ページの最上部にはナビゲーション、その下にジャンボトロンをレイアウトして、独自のクラス名を追加しながら、CSSデザイナーでページの見栄えを整えていきます。また、ナビゲーションバーの不必要なボタンをマウス操作とコンテキストメニューで削除します。
更新日:2015年12月6日(日)
新規ページを作成して、(第10回で学んだ操作・手順とは異なる方法で)Bootstrapコンポーネントのナビゲーションバーとジャンボトロンを配置します。DOMパネルでジャンボトロンを3つ複製して、水平方向に配置していきます。エレメントディスプレイとCSSデザイナーの[セレクター]で、独自のクラス名を追加し、背景色を変更したり、余白などを調整します。
更新日:2015年12月6日(日)
第11回で作成したページを編集します。挿入パネルで、4つのジャンボトロンの上に「div」タグを挿入して、ID名を追加していきます。ナビゲーションの4つのボタンにページ内リンクを指定、クリックするとページ内の指定した箇所を表示する仕組みを作ります。また、モバイル用メニューが(リンクをクリックしたとき)自動的に閉じるスクリプトをページに組み込みます。
更新日:2015年12月6日(日)
第12回で作成したページを編集します。ジャンボトロンの中に配置されているタイトルの「見出しレベル」を変更します。第7回で作成したページを開いて、マルチカラムのテキスト部分をコピーし、作成中のページに組み込みます。コピーしたテキストは、CSSデザイナーで文字サイズと行間(行の高さ)を調整します。CSSデザイナーパネルとDOMパネルを最大限に活用します。
更新日:2015年12月6日(日)
第13回で作成したページを編集します。マルチカラムのテキスト部分を4つのジャンボトロンにコピーしていきます。ウィンドウの幅が狭いときに、ジャンボトロンのタイトルの一部が隠れてしまうため、ブレークポイントを設定して、タイトルを小さくします。ここでは、ウィンドウの幅が480ピクセル以下になったとき、タイトルの文字サイズを小さくする仕組みを作ります。
更新日:2015年12月6日(日)
追加コンテンツです。第14回では、ナビゲーションバーのボタンにページ内リンクを設定しました。ここでは、「自動スクロール」を組み込みます(ボタンをクリックすると自動的にスクロールして指定した箇所を表示します)。JavaScriptのライブラリを使用しますので上級レベルになりますが、パート1では対象外となりますので、組み込む方法だけ解説します。JavaScriptの知識は必要ありません。
この追加コンテンツは、スクリーンキャストではありません。テキストと図版で解説しています。
更新日:2015年12月10日(木)
第1回は概論です。Bootstrapのグリッドシステムについて学習します。第2回は、サイトの定義について学びます。ここから第14回までは実技学習になります。
第3回では、DOMパネルとライブビューのエレメントディスプレイの使い方、挿入パネルの「Bootstrapのコンポーネント」をページに挿入する方法などを学習します。第4回では、Bootstrapのクラス名を追加しながら、画像を水平方向に3つ並べます(ウィンドウの幅が狭くなると垂直方向に並びます)。
第5回では、第4回と同じ表現を異なる手順で進めます。ここでは、div要素を挿入して「親要素」にしたり、画像を「子要素」として挿入するなど、要素の親子関係について理解します。DOMパネルを使って、視覚的に学習していきます。
第6回では、第4回で作成したレイアウトを削除し、新たに「3列」の行を挿入して、段落を追加していきます。DOMパネルの「子としてペースト」やエレメントディスプレイの「クイックタグ編集」の使い方などが新しい学習です。
第7回では、第2〜6回で作成したページを複製して、全ての要素を削除、一からページを作成していきます。ライブビューでは、テキストを編集しにくいため、コードビューを併用します。DOMパネルを使いこなすための学習が中心になります。また、固定幅レイアウトと可変幅レイアウトの違いをここで学びます。
第8回では、レスポンシブWebデザインのベースとなる基本のページを作成します。コンテナ(div要素)の中にもう1つのコンテナがあって、さらにその中に段落がある、といった入れ子の構造をDOMパネルで効率よく作成していきます。DOMパネルの実践的な使い方をここで習得します。
第7〜8回で作成したページを編集します。エレメントディスプレイで独自のクラス名を追加して、新しいCSSファイルを作成、[CSSデザイナー]パネルでスタイルを指定していきます。ここでは、CSSを記述せず、CSSデザイナーで見栄えを整えます。コードは書きませんが、CSSの基礎知識は必要になります(※CSSに詳しくなくてもページデザインの「体験」は可能です)。
新規ページを作成して、Bootstrapコンポーネントのナビゲーションバーとジャンボトロンを配置します。ページの最上部にはナビゲーション、その下にジャンボトロンをレイアウトして、独自のクラス名を追加しながら、CSSデザイナーでページの見栄えを整えていきます。また、ナビゲーションバーの不必要なボタンをマウス操作とコンテキストメニューで削除します。
新規ページを作成して、(第10回で学んだ操作・手順とは異なる方法で)Bootstrapコンポーネントのナビゲーションバーとジャンボトロンを配置します。DOMパネルでジャンボトロンを3つ複製して、水平方向に配置していきます。エレメントディスプレイとCSSデザイナーの[セレクター]で、独自のクラス名を追加し、背景色を変更したり、余白などを調整します。
第11回で作成したページを編集します。挿入パネルで、4つのジャンボトロンの上に「div」タグを挿入して、ID名を追加していきます。ナビゲーションの4つのボタンにページ内リンクを指定、クリックするとページ内の指定した箇所を表示する仕組みを作ります。また、モバイル用メニューが(リンクをクリックしたとき)自動的に閉じるスクリプトをページに組み込みます。
第11回で作成したページを編集します。挿入パネルで、4つのジャンボトロンの上に「div」タグを挿入して、ID名を追加していきます。
第11回で作成したページを編集します。挿入パネルで、4つのジャンボトロンの上に「div」タグを挿入して、ID名を追加していきます。
「Dreamweaver 基礎編パート1」の追加コンテンツです。
中学生向けのDreamweaver CC 2015「超」入門です。「シンクゼロマガジン・ライト版」で投稿しているテキストキャスティングのアーカイブをまとめて掲載しています。
専用ページにログインすると、素材データ、および完成データ、サンプルデータなどをダウンロードすることができます。
テキストキャスティングとは、オンライン講座のエッセンスをテキスト化し、簡潔にまとめて数回に分けて配信する学習コンテンツのことです。
更新日:2016年3月4日(金)
本コンテンツ「Dreamweaver CC 2015 基礎編 パート1」は、「デザイナーのためのデザイニング・イン・ザ・ブラウザ」シリーズの第一弾「Dreamweaver 基礎編」のアップデート版です。14本のスクリーンキャスト(学習ビデオ)と素材データ、前作の電子書籍がセットになっています。
以下の購入ボタンをクリックすると「デザイナーのためのデザイニング・イン・ザ・ブラウザ Dreamweaver 基礎編」の購入ページが表示されますが、問題ありません。本コンテンツの価格は、1,500円(税込)ですが、パート2がリリースされるまでは、先行販売特別価格 800円(税込)で提供するため、前作のページを利用しています。
「Dreamweaver CC 2015 基礎編 パート1」(特別価格)の購入
先行販売特別価格:800円(税込)
購入方法は、PayPal のみですが、特別価格800円です。
当サイトで購入者の個人情報を取得しませんので、こちらからメールは送信されません。ダウンロードURLのリンクは、PayPalの決済完了ページに表示されます。
先行販売の特別価格は、PayPal(クレジットカード決済含む)のみになりますが、銀行振込にも対応できますので、[ebookcast@gmail.com]までお知らせください。
「Dreamweaver CC 2015 基礎編 パート1」(通常価格)の購入
通常価格:1,500円(税込)
購入方法は、PayPal、クレジットカード、銀行振込、コンビニ決済、楽天ID決済、電子マネー(Suica・楽天Edy)から選択できます。
決済完了後、ダウンロードURLをお知らせするメールが送信されます。
※パート2のリリース後は、通常価格になります。
続編「Dreamweaver CC 2015 基礎編 パート2」の購入
通常価格:1,500円(税込)
購入方法は、PayPal、クレジットカード、銀行振込、コンビニ決済、楽天ID決済、電子マネー(Suica・楽天Edy)から選択できます。
決済完了後、ダウンロードURLをお知らせするメールが送信されます。
※パート2は、2016年1月末のリリースを予定しています。
更新日:2015年12月7日(月)