正月休みでDreamweaverとMuseの基礎を習得しておこう!

第1回「Bootstrap(ブートストラップ)って何だっけ? 復習するよ!」



本日は、「正月休みでDreamweaverとMuseの基礎を習得しておこう!」を数回に分けて、掲載していきます。

Museの方は、レスポンシブWebデザインに対応した新バージョンがまだリリースされていませんので、後回しにして、まずは、Dreamweaver(+Bootstrap)の基礎を解説していきます。

Museは年明けから、やりますので。


尚、一人出版社の得意技としているモバイルワーク「移動中の空き時間を利用しながら更新する」ことになりますので、本日夜まで、数回に分かれます。
交通機関の影響で中断する可能性もあります、ご了承ください!


1つひとつは、短めのテキストキャスティングです。サッと読めます。
※テキストキャスティングとは、オンライン講座を「文字起こし」しながら「ほぼ」リアルタイムで更新していくスタイルの講座のことです。


Dreamweaver(+Bootstrap)/Muse+レスポンシブWebデザイン関連の記事は、以下のカテゴリーページで一覧できます。
すでに学習した内容は割愛しますので、わからない箇所があったら、一読をお願いします!

Dreamweaver/Museのカテゴリーページ:



基礎編パート1の達成目標:

・Bootstrapのグリッドシステムについて理解できる
・初歩レベルのレスポンシブWebデザインのページを効率よく作成できる
・ライブビューやDOMパネル、CSSデザイナーの使い方を理解し、実践できる




授業(テキストキャスティング)を開始します!


[01]
第1回は、Bootstrapの復習です。
すでに学んでいますが、もう一度、確認しておきましょう。

Bootstrapでは、独自の「グリッドシステム」でページをレイアウトしていきます。
水平方向に12個のカラムが並ぶグリッドでしたね。

3段組レイアウトのページをデザインしたい場合は、それぞれ「4カラム」にすればよい。
4個分のカラム×3段組で「12カラム」ですから。





[02]
1個のカラムの左右には「余白」があります。
何ピクセルか、覚えてますよね。

そう、それぞれのカラムの右側、左側には「15ピクセル」の空きがある。
つまり、カラムとカラムの間は「30ピクセル」です。

この間隔を調整するには、私たちが新たにスタイルを指定して「上書き」しないといけませんが、その解説は後半で。まずは、Bootstrapのルールを完璧に覚えてね。





[03]
3段組レイアウトといっても、さまざまなパターンがあります。
企業サイトやニュースサイトなどを見てください。いろいろなバリエーションがあるでしょう。

ウェブページのレイアウトを考えるときは、Bootstrapの「グリッドシステム」、つまり「12カラム」の中にどう配置していくかイメージしていく必要があります。





[04]
例えば、こんなイメージ。

ページの最上部に、Bootstrapで用意されているナビゲーションバー(A)を置いて、その下にジャンボトロン(B)を置いて、あとは、複数のカラムのまとまり(C~E)を順番に置いていく。





ウェブページの骨組みをつくるだけなら、Dreamweaverのライブビューであっという間に出来てしまいます。

基本ページは、慣れるとほんとに速く作成できるようになります。
Dreamweaverライブビュー+Bootstrapの威力を発揮します。


時間がかかるのは、基本ページを「調整」して、完成度を高めていくプロセスなんです。

なぜなら、自分のスタイルを指定していく必要があるからです。

CSSデザイナーを使って、Bootstrapのスタイルを自分のスタイルで「上書き」していく作業です。

ここが、今日の講座のテーマです。


それでは、第2回の投稿をお待ちください。
次の投稿が何時頃になるかは、交通機関次第!



関連コンテンツ:
本日のテキストキャスティングのベースになっているオンライン講座

Dreamweaver CC 2015 基礎編パート1



Muse CC 2015 ビジネスガイドブック




シンクゼロマガジンとは?

筆者:
Creative Edge School Books