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

第7回「Bootstrapの基本レイアウトをマウスドラッグだけで変更しよう!」



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

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





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


[01]
まずは、第7回の素材データ[DW-07.zip]をダウンロード!

ダウンロード:
DW-07.zip]7.4MB

ZIP圧縮されてますので解凍して、フォルダを開きましょう。
「MyLP」フォルダが入ってますので、現在デスクトップ上にある同じ名前のフォルダをどこかに移動して、入れ替えてください。

「MyLP」フォルダの中の「images」フォルダには、6つの画像が入っています。





[02]
Dreamweaverを起動して、新しいページを作成しましょう。
ファイルメニューの[新規]を選択、フレームワークから[Bootstrap]を選び、[Bootstrap CSS:]の[新規作成]をクリック、続けて[作成]をクリックします。

ファイルメニューの[保存]を選び、「index.html」という名前で保存してください。





[03]
DOMパネルの「body」タグをクリックして選択。
挿入パネルの[Container-fluid]をクリックします。ページに「可変幅」のコンテナが挿入されましたね。
続けて、[Grid Row with column]をクリックしてください。

ダイアログが表示されますので、カラム数は「3」のまま、コンテナの中に挿入したいのですから[ネスト]をクリックし、OKをクリックしましょう。
ここまでは、前回と同じですね。





[04]
DOMパネルを見てください。
コンテナ「div(class="row")」の中に3つのカラムがありますよね。
一番上のカラム「div(class="col-sm-4")」をクリックして選択しておきます。

続けて、挿入パネルの[Responsive Image]の小さな三角アイコンをクリックして、メニューから[Default]を選んでください。





[05]
コンテナの中に画像を挿入しますので、[エレメントディスプレィ]の[ネスト]ですね。クリックします。
サムネイルが挿入されました。

今までは、HTMLの[Image]を挿入してから、画像を伸縮させるBootstrapのクラス名を追加していましたが、このコンポーネントを挿入すれば、すでにクラスが追加されているので、画像を入れ替えるだけなんです。





[06]
このサムネイルはサイズが小さいので、左揃えになっていますよね。
今回の作業とは関係ありませんが、例えば、中央揃えにしたい場合、どうすればよいか解説しておきましょう。

「img」タグの[+]をクリックして、「cen」と入力すると、候補メニューが表示されますので、カーソルキーで[.center-block]を選んで、Enterキーを押してください。

中央揃えになりましたね!
とても簡単です。



ここでは必要ないので、確認できたら削除しましょう。
[.center-block]にマウスカーソルを重ねると、[×]が表示されるので、クリックして削除してください。





[07]
それでは、画像を入れ替えましょう。
「img」タグのハンバーガーアイコンをクリックし、表示されるポップアップの[src]のフォルダアイコンをクリックしてください。

ダイアログが表示されますので、「a01.jpg」を選んでください。
これで画像が入れ替わります。






[08]
中央と右側のカラムにコピーしましょう。
前回も同じ作業をやりましたので、もう慣れたと思いますが、復習のつもりで進めてください。

DOMパネルの「img(class="img-responsive")」を右クリックして、[コピー]を選択します。
続けて、2つ目のカラム「div(class="col-sm-4")」を右クリックして、[子としてペースト]を選んでください。

3つ目のカラムも同じ手順です。






[09]
中央と右側の画像を入れ替えます。
中央の画像をクリックして選択し、「img」タグのハンバーガーアイコンをクリックします。

ポップアップが表示されるので、[src]のフォルダアイコンをクリック、ダイアログで「a02.jpg」を選んで、[開く]をクリックしましょう。



右側の入れ替え画像は、「a03.jpg」です。
わかりますよね?





[10]
スクラバーをドラッグして、ドキュメントウィンドウを狭めてください。
シングルカラムになると思います。3つのカラムが垂直方向に並んだ状態です。

ただ、ちょっと大きいですよね。
どうですか?
いきなり、垂直方向に並ぶのではなく、右端のカラムだけ下げる方が見やすいと思います。



レイアウトを変更しましょう。
ウィンドウ上部のビジュアルメディアクエリーバーの「グリーン(緑色)」のバーをクリックしてください。





[11]
DOMパネルの1つ目のカラム「div(class="col-sm-4")」をクリックして選択しておきます。


カラムの右端中央に注目してください!
小さな青い矩形が表示されていると思います。この矩形をドラッグするとカラムのサイズを変更することができるんです。





[12]
ドラッグしながら、DOMパネルを見てください。
「div(class="col-sm-4")」に「col-xs-」というクラスが追加されています。

ドラッグを続けると、「col-xs-」の後の数字が変化していきますよね。
「col-xs-6」になったら、マウスボタンを離してください。

Bootstrapのグリッドシステムは「12カラム」で構成されているので、「6カラム分」のサイズになったわけです。





[13]
次は、2つ目のカラムです。
DOMパネルの2つ目のカラム「div(class="col-sm-4")」をクリックして選択しておきます。

同じ手順です。
カラムの右端中央の小さな青い矩形をドラッグして、「col-xs-」の後の数字が「6」になったら、マウスボタンを離してください。



2つ目も「6カラム分」のサイズに変わりましたので、2つが水平方向に並びました!





[14]
3つ目のカラムもまったく同じ手順でサイズを変更しましょう。





[15]
スクラバーをドラッグして、確認してください。
どうですか?

下のカラムが現在、左に寄ってますが、中央揃えにしたいですね。





[16]
変更してみましょう。
DOMパネルの2つ目のカラム「div(class="col-sm-4")」をクリックして選択しておきます。



カラムの左端中央に注目してください!
サイズ変更した矩形とは異なる、小さな青い矩形が表示されていると思います。この矩形をドラッグするとカラムを移動させることができます。

右方向にドラッグして、中央にあわせてください。





[17]
中央に配置できましたね!

ウィンドウを広げて、確認します。グレーの領域をダブルクリックしてください。ドキュメントウィンドウが広がります。
下のカラムの位置を調整しなくてはいけませんね。





[18]
カラムの左端中央の青い矩形を左方向にドラッグしてください。
これで、3つのカラムが水平に並びました。





[19]
スクラバーをドラッグして確認しておきましょう。

問題なければ、保存をしてください(ファイルメニューの[保存])。
挿入パネルの[Responsive Image]を挿入したときに、追加されたサムネイル画像を保存するよ!というアラートが表示されますが、OKを押してください。





マウスドラッグだけで、ここまで作成することができました。
あっという間ですよね。




次回は、ウィンドウの幅をもっと狭めたときに、3つのカラムを垂直方向に並べる方法の学習です。
「ブレークポイント」の設定という新しい操作が出てきますよ。



それでは、第8回の投稿をお待ちください。
夜遅くまで予定があるので、今日の配信は無理かなぁ。

ここまでの完成データは、「Dreamweaver CC 2015 基礎編パート1( http://design-zero.tv/Dreamweaver/ )」の購入者ページにアップロードしてありますので、参考にしてください。


明日は、仕事始めですね!
気持ちを切り替えて、頑張っていきましょう。



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

Dreamweaver CC 2015 基礎編パート1



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



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

筆者:
Creative Edge School Books