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

第3回「水平方向に並ぶ3つのカラムを15秒でページに組み込むよ!



晴れているのに、冷たい風のせいで、かなり寒いですね...
では、3回目。


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

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




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


[01]
さて、第3回です。
ナビゲーションバーとジャンボトロンの間を見てください。
余白がありますよね。この余白を取り去りましょう。

数値を変更するだけなので、とても簡単。
まず、DOMパネルの「body」タグをクリックしてください。





[02]
アプリケーションバーの[分割]をクリックします。
下部にコードビューが表示されます。

DOMパネルで「body」タグをクリックしましたので、bodyタグの領域がすべて選択状態になっています。





[03]
「body style="padding-top: 70px"」の行に注目!
数値の「70px」を「50px」に変更してください。

ナビゲーションバーとジャンボトロンの間の余白が無くなりましたよね。
確認できたら、アプリケーションバーの[ライブ]をクリックして、ライブビューだけの画面に戻しておきましょう。






[04]
次は、ジャンボトロンの下に3つのカラムを挿入してみます。

ページ上の要素を一発で選択する場合は?
そうですね、DOMパネルです。

DOMパネルのジャンボトロンの「div」タグをクリックしてください。
展開した状態でもかまいませんが、折り畳んだ方がわかりやすいと思います。





[05]
手順はこんな感じ。

まず、ジャンボトロンの下に「コンテナ」を置いて、そのコンテナの中に「水平方向に並んだ3つのカラム」を入れます。

コンテナを挿入しましょう。
挿入パネルの[Container-fluid]をクリックしてください。

[エレメントディスプレィ]に「前」「後」「折り返し」「ネスト」の4つのアイコンが表示されます。
ジャンボトロンの下に配置したいのだから、「後」をクリック!





[06]
ジャンボトロンの下にコンテナが挿入されました。
挿入した[Container-fluid]がどんなコンテナか覚えてますよね?
可変幅のコンテナですね。

現在、挿入したコンテナが選択状態になっていることを確認して、挿入パネルの[Grid Row with column]をクリックしょうましょう。

ダイアログが表示されます。
コンテナの中に挿入したいのですから、[ネスト]をクリックします。
カラム数は「3」のままでかまいません。
OKをクリック!





[07]
さぁ、DOMパネルで確認です。

まず、最初に挿入したコンテナはどれでしょう?
[Container-fluid]のクラス名が付いた「div」タグなので、「div(class="container-fluid")」ですね。

その中にある「div」タグが、3カラムの行です。
展開すると、中に3つの「div」タグがありますよね。





[08]
この3つのカラムには、まだ何も入っていません。

ここにダミーの部品を入れておきましょう。
DOMパネルで、3つのカラムをそれぞれ選択して、挿入していきます。まず1つ目(一番上の)のカラムをクリックしてください。
「div(class="col-sm-4")」です。

続けて、挿入パネルの[Thumbnails]をクリックします。





[09]
[エレメントディスプレィ]に「前」「後」「折り返し」「ネスト」の4つのアイコンが表示されます。
カラムの中にダミーを入れたいのだから、「ネスト」をクリック!

カラムにダミーが入りました。
見出し、テキスト、ボタンがセットになっています。






[10]
中央と右側のカラムについても、同じ手順で、挿入パネルの[Thumbnails]を挿入してください。
まったく同じ手順なので、大丈夫ですよね。





[11]
ここまでを保存しておきましょう。
ファイルメニューの[保存]を選びます。

おっ、何か出てきましたね。

これは、先ほど挿入したダミー部品に関するダイアログ。
サムネイルの画像ファイルも保存するよ、という確認です。OKをクリックしてください。
「Thumbnail_Placeholder.png」という画像ファイルが自動的に保存されます。
不必要になったら、削除できますので。





ライブビューに慣れた人なら、ここまで1分!

今は、Bootstrapの部品(コンポーネントと呼びます)を、レゴを組み立てるように、ページ上に配置していますが、この作業の繰り返しだけでも、しっかりとした基本ページを作成できるんですよ。





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



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

Dreamweaver CC 2015 基礎編パート1



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




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

筆者:
Creative Edge School Books