中学生のためのレスポンシブWebデザイン

第8回「複雑なレイアウトに挑戦するよ! まず新しいコンテナをつくって、いま配置されているコンテナをその中に入れます!」



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



[01]
レスポンシブWebデザインがどんなものかイメージできたと思いますので、もう少し複雑なレイアウトに挑戦してみましょう。

そのためには、まず新しいコンテナを作らないといけない。
DOMパネルを見てよ。

今は、1つのコンテナ(「div」タグ)の中に、見出しや本文、画像などのすべての要素が入っているんだけど、要素ごとに別々のコンテナに振り分けていきたいんだ。

まず、新しいコンテナを作って、今あるコンテナをその中に入れます。

DOMパネルの「div(class="section")」をクリックして選択してください。
コンテナが選択されましたので、挿入パネルを[HTML]に切り替えて、[Div]をクリックしてください!





[02]
[エレメントディスプレィ]に、4つのアイコンが表示されましたね。

これから挿入するコンテナ「の中に」いま配置されているコンテナを入れたい。
どのアイコンをクリックすればいい?

[ネスト]だと、いま配置されているコンテナの中に入っちゃうから違う。
そう、[折り返し]ですね。クリックしましょう。

DOMパネルで確認しましょう。
タグが折り畳まれていたら、クリックして展開してね。

コンテナ(「div」タグ)の中に、配置されていたコンテナ(「div(class="section")」タグ)が入ってるよね!





[03]
挿入したコンテナに対して、CSSを指定できるように名前(クラス名)を付けておきましょう。

[エレメントディスプレィ]の「div」タグの[+]をクリックして、「wrapper」と入力してEnterキーを押してください。
wrapperって名前をつけたのは、全体を「包み込む」という意味で。わかりやすいでしょ。

ポップアップが表示されます。
Enterキーを押して、決定しましょう。





[04]
CSSを指定していこう!
CSSデザイナーの[ソース]の「style.css」をクリック!
[@Media]は「グローバル」、[セレクター]は「.section」をクリックしていきましょう。

[プロパティ]の[width]の値にマウスカーソルをあわせてください。
右端に、ゴミ箱のアイコンが表示されますよね。

クリックしてください!
ゴミ箱アイコンをクリックすると、指定したCSSを削除することができるのです。





[05]
コンテナに指定していた「80%」が削除されましたので、デフォルトの100%に戻りました。





[06]
それでは、新たに追加したコンテナにCSSを指定します。
[セレクター]の「.wrapper」をクリック!

[プロパティ]の[width]の値をダブルクリックして「80%」と入力、Enterキーを押してください。

さらに、コンテナをページの中央に配置したいので、[margin]の左右の値を「auto」にします。
この作業は何度もやっているので、もうわかると思います。

値の部分をダブルクリックして、直接「auto」と入力してください。
左側と右側の2つね!





[07]
はい、中央に配置されましたね。
見た目に変化はないのですが、HTMLの構造が変わりました。





[08]
1つ作業を忘れてましたが、最初のコンテナにも「auto」が指定されてましたね。
この指定も削除しておきましょう。もう必要ないので。

[セレクター]の「.section」をクリック!

[プロパティ]の[width]の値にマウスカーソルをあわせてください。
下にゴミ箱のアイコンが表示されますのでクリックして削除!

ここも、左側と右側の2つね!

見た目は何も変わりません。





[09]
ちょっと実験してみましょうか。
追加した新しいコンテナに背景色を指定して、左右に余白をつくるという指定。

[セレクター]の「.wrapper」をクリックしておきます。
[プロパティ]の[background-color]が背景色です。値の部分がカラーアイコン。ここをクリックすると、カラーピッカーが表示されるので、薄いピンクを選んでください。

色を選択できたら、Enterキーを押してください!





[10]
背景色が指定されましたね!
次は、左右の余白をつくりましょう。





[11]
[プロパティ]の[padding]の左右に「2em」と入力してください。
値の部分をダブルクリックすれば、直接入力できるようになります。もう、何度もやってますので説明不要だと思いますが。

左側と右側の2つね。

[padding](パディング)というのは、要素の周辺の余白のことで、背景色が反映されます。
一方、[margin](マージン)は、その外側の余白で、背景色は反映されないんです。つまり、透明です。

これは実験だから、この後、背景色の指定を削除します。




それでは、第9回の投稿をお待ちください。
うまくいかなかったら、以下の専用ページにログインして、完成データをチェックしてね!


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



今回のテキストキャスティングは、こちらのオンライン講座の追加コンテンツです

Dreamweaver CC 2015 基礎編パート1



関連記事:
Dreamweaver/Museのカテゴリーページ:



関連コンテンツ:
Muse CC 2015 ビジネスガイドブック




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

筆者:
Creative Edge School Books