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


第4回「DOMパネルを使って、HTMLの複雑な構造を秒速で変更するよ!」



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

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




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


[01]
ここまで作成したページを確認すると、ダミーの部品がちょっとおかしな表示になります。
ウィンドウを広げた場合です。

これは、ダミーを挿入したとき、グリッドシステム用のタグが一緒に入ったからです。

修正はとても簡単。
グリッドシステム用のタグを削除すればよいだけ。

ただ、その作業をどのように進めるか、がポイント。
ここでは、DOMパネルによる修正をお奨めします!





[02]
DOMパネルに注目!
こんな感じになると、わけがわかりませんが、「ジャンボトロンの下にあるコンテナ」に注目すればよいので、ジャンボトロンの「div」タグを見つけてください。

ここで1つ補足!
DOMパネルでタグを選択するとき、文字の部分をクリックすると何も変化しませんが、アイコンの部分をクリックすると、折り畳んだり、展開することができます。

使い分けましょう!
というより、混乱しないように、覚えておきましょう。





[03]
ジャンボトロンの「div」タグの下にあるのが、コンテナの「div」タグです。
「div(class="container-fluid")」ですね。

さらに、その下にもう1つコンテナがあります。
「div(class="row")」です。





[04]
そのコンテナの中に、3つのカラムが入ってる、という構造です。
下図のように、3つのカラムの「div」タグを折り畳んでおくと、見やすいですね。





[05]3つのカラムには、それぞれ、またコンテナが入っているんです。
一体、何層になっているんだ!という感じです。

カラムの中にある、この2つの(入れ子になっている)コンテナがいらない!
さて、どうすればよいでしょう?





[06]
図で理解しましょう。

ジャンボトロンのコンテナの下に、3つのカラムが入っているコンテナがあります。
ここまでは、よいですね?





[07]
3つのカラムには、それぞれ入れ子になったコンテナが入っています。
青い線で描いたコンテナです。

これを削除したい!
さぁ、どうすればよいでしょう?





[08]
コードビューに切り替えて、HTMLのコードを編集してもよいのですが、DOMパネルを使えば「あっという間の作業」です。
慣れるまでは、面倒だと感じるかもしれませんが、ほんとに簡単なんです。

DOMパネルでは、こん感じ。
ダミー部品のタグを選択して「コピー」、入れ子のコンテナを選択して「削除」、カラムのコンテナを選択して「ペースト」。

この3つの操作だけです。
では、やってみましょう。





[09]
まず、3つのカラムが入っているコンテナの場所を確認!
「div(class="row")」ですね。

その下にあるコンテナが、カラムです。3つ続いています。
「div(class="col-sm-4")」です。

この中に、入れ子のコンテナが入っていて、その中にダミー部品がある。
ここまで、大丈夫ですか?

では、ダミー部品、つまり「div(class="thumbnail")」をクリックしてください。
続けて、右クリックして[コピー]を選んでください。





[10]
それでは、カラム、つまり「div(class="col-sm-4")」の下にある入れ子のコンテナをクリックします。
「div(class="row")」です。

続けて、右クリックして[削除]を選んでください。
これで、ダミー部品ごと入れ子のコンテナが削除されました。





[11]
続いて、カラム、つまり「div(class="col-sm-4")」を右クリックして[子としてペースト]を選んでください。

[子としてペースト]というのは、選択したタグの中に入れるという意味です。
選択されているタグが「親」、その中に入るタグが「子ども」という関係になります。

あと2つありますが、まったく同じ作業の繰り返し。
ダミー部品は同じです。すでにコピーしてありますよね。入れ子のコンテナを削除して、ペーストしていくだけです!





[12]
慣れていない人は、ゆっくりやってくださいね。
作業が進んでいくと、DOMパネルには大量のタグが表示されますが、コツを覚えておくと混乱しません。

ジャンボトロンの下にある3つのカラムを編集したいなら、ページ上のジャンボトロンをクリックすれば、DOMパネルのジャンボトロンの「div」タグが選択されますので、すぐに場所を見つけられます。





[13]
ここまでの作業を保存して、ウェブブラウザーで見ておきましょう(ファイルメニューの[ブラウザーでプレビュー])。

Dreamweaverのライブビューの表示と変わらないと思いますが、ウィンドウを広げたり、狭めたり、Bootstrapで組み立てた基本ページの変化を確認してください。







今回は、DOMパネルのトレーニングという感じでしたが、とても重要なところです。
DOMパネルを習得すると、どんなに複雑なレイアウトでも、自由自在に編集できるようになります。


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

この調子だと、今日は、Bootstrapの基本ページ作成で終わってしまうかも。

「Dreamweaver CC 2015 基礎編パート1( http://design-zero.tv/Dreamweaver/ )」をやり終えた人は、いかがですか?
まったく問題なく理解できていれば、難易度の高いパート2も大丈夫でしょう。



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

Dreamweaver CC 2015 基礎編パート1



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




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

筆者:
Creative Edge School Books