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

第9回「ちょっと難しくなるけど、HTMLの構造を設計していくよ! その前にトラブルシューティング!」



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



[01]
作業を進める前に、これから何をやるのか理解しておきましょう。

HTMLの構造をわかりやすく表示してくれているのが、DOMパネルなんですが、皆さんはまだ慣れていないと思うので、図で解説します!

現在のHTMLページの構造はこんな感じ。

wrapperというクラス名が付いた「大きなコンテナ」があって、その中にsectionというクラス名が付いたコンテナが入っています。
そのコンテナの中に、見出しや本文が入っている。

ここまではいいですね?





[02]
まず、タイトルと中見出しの2つをコンテナの外に出したい!
要するに、記事と見出しを分けたいのです。





[03]
そして、コンテナを「div」から「article」に変えたい!

「div」のコンテナでもいいんだけど、「この中には「記事」が入っているからね!」って、すぐにわかるように「article」というタグを使いたいのです。





[04]
次は、「aside」っていうコンテナを新たに追加して、記事の下に置きたい!

ウェブページやブログを見ると、記事の隣にメニューや広告が表示されてるよね。この領域をサイドバーって呼びます。

つまり、サイドバーをつくりたいんです。





[05]
最終的に、こんな感じにしたい。

どう?
これから、進める作業について理解してもらえたかな?





[06]
さて、ここでトラブルシューティングを一つ。
アプリケーションバーの[コード]をクリックしてください。

続けて、同様にアプリケーションバーの「style.css」をクリック!





[07]
CSSの内容が表示されていますね。
一番下が見えるようにスクロールしてください。

コンテナ(「.wrapper」)の指定が、一番下に記述されていませんか?
(※記述されていなければ、そのままの状態でかまいません)

これだと、この先の作業で問題になるんですよ。
指定したCSSが効かないのです。

@mediaの指定の上に記述されていないとダメなんです。

普通に作業していたら、こんなことにはなりませんが、もし、CSSを指定したのに、意図したとおりに表示されない!ってときは、CSSの中をチェックしてみてください。





[08]
修正は、とても簡単。
カットして、@mediaの指定の上にペーストするだけ。

@mediaの指定の下に記述されてしまったCSSを選択して、編集メニューから[カット]、続けて、@mediaの指定の上の空行をクリックして、編集メニューから[ペースト]を選ぶ。

はい、完了です。



@mediaの指定の上に、コンテナ(「.wrapper」)の指定が移動しましたね。
これで大丈夫です。
めったにないと思いますが、覚えておいてください。





[09]
あと、1つだけ修正しておきたい箇所があるので、やっておきましょう。

スクラバーをドラッグして、ウィンドウを狭めてください。
追加したコンテナの幅が80%のままなので、タイトルが飛び出してしまいましたね。

余白を無くしておきましょう。





[10]
もう何度もやっている操作なので、すぐできると思います。

CSSデザイナーの[ソース]の「style.css」をクリック!
[@Media]の「グローバル」もクリック!

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

[プロパティ]の[width]の値をダブルクリックして「100%」と入力!





[11]
はい、余白が無くなりました!
これでいいでしょう。



ただ、ウィンドウを広げても幅が100%のままなので、あと1つだけCSSを指定します。





[12]
DOMパネルでコンテナを選択しておきます。
「div(class="wrapper")」をクリックしてください。

[@Media]の「(min-width : 580px)」をクリック!
なぜ、ここをクリックしたかわかりますよね?

ウィンドウの幅が580ピクセル以上になったら、今から指定するCSSを適用するよ!
です!

[セレクター]の[+]をクリック!
「.wrapper」と表示されますので、Enterキーを押してください。



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



完了したら、スクラバーをドラッグして確認!
問題なければ、保存しておきましょう。[すべてを保存]でまとめて保存してね。





それでは、第10回の投稿をお待ちください。
移動中の空き時間が確保できたら、本日中に投稿できるかも。

うまくいかなかったら、以下の専用ページにログインして、完成データをチェックしてね!


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



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

Dreamweaver CC 2015 基礎編パート1



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



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




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

筆者:
Creative Edge School Books