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

第10回「DOMパネルとCSSデザイナーを使って、猛スピードでHTMLの構造を変更していくよ!」



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



[01]
それでは作業を始めていきましょう。
まず最初は、タイトルと中見出しを、コンテナ(「div(class="section")」)の外に出す作業です。

これは、DOMパネルを使えばとても簡単です。

「h1」タグをクリックしましょう。これが、タイトルですね。

「h1」タグをドラッグして、コンテナ(「div(class="section")」)の上に移動させます。

ゆっくりやってくださいね。
グリーンのラインが表示されたら、マウスボタンを離しましょう。

はい、外に出すことができました!
簡単ですよね。





[02]
中見出しも同じ操作です。
「h2」タグをドラッグして、コンテナ(「div(class="section")」)の上に移動させて、グリーンのラインが表示されたら、マウスボタンを離します。

あっという間ですね。





[03]
でも、場所が変わってしまったので、CSSの指定も外れてしまいました。
修正しましょう。





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

[セレクター]を見てください。

「.section h1」というのは、sectionというクラス名が付いたコンテナ「の中にある」、大見出し(h1)、つまりタイトルに対して、CSSを適用しますよ!
ということですよね。

コンテナの外に出してしまったのだから、当然、CSSは適用されなくなる。
わかりますよね?

「.section h1」をダブルクリックして、「h1」に変更して、Enterキーを押してください。
実は、「.section」そのものには何も指定されていないので、削っても影響ないのです。





[05]
「.section」は最後に削除してしまいますので、他のタグもすべて、削ってしまいましょう。
ダブルクリックして、「.section」の部分を削除してください。

でも、タイトルが小さくなっちゃいましたね。
ウィンドウを狭めたときの文字サイズになってしまいました。






[06]
どうして小さくなったのか、わかりますよね?
メディアクエリで、「ウィンドウの幅が580ピクセル以上だったら~」って指定したじゃないですか。

[@Media]の「( min-width : 580px )」をクリックしてください。

はい、[セレクター]を見てください。
ここでも、「.section」の部分を削除しないといけませんね。

ダブルクリックして、「.section」の部分を削除してください。





[07]
では、最後に「.section」そのものを削除してしまいましょう。
[@Media]の「グローバル」をクリック!

[セレクター]の「.section」をクリックして選択し、[+]の隣にあるマイナスのアイコン[ー]をクリックして削除します。





[08]
コンテナに付けたクラス名「section」も削除しましょうね。
DOMパネルでコンテナ(「div(class="section")」)をクリックしておきます。

[エレメントディスプレィ]のクラス名の部分にマウスカーソルをあわせてください。
[×]アイコンが表示されるでしょう。

このアイコンをクリックすると、クラス名が削除されます。





[09]
次は、コンテナを「div」から「article」に変更する作業でしたね。
実は、この作業も簡単!

[エレメントディスプレィ]の「div」タグを右クリックして、メニューから[クイックタグ編集]を選んでください。

「< div >」と表示されています。
まず、「div」だけを削除して、「< >」だけ残しておきます。





[10]
そして、「< >」の中に、「art」と入力すれば、候補メニューが表示されますので、キーボードのカーソルキー(上下の矢印キー)で「article」を選んで、Enterキーを押しましょう。

「div」から「article」に変わりましたね!
とりあえず、今回はここまで!




下図は、Web Developerというツールで、HTMLの構造を視覚化したものです。
こんな感じになってるんですね。

少しずつ複雑になっていきますので、不安なところがあれば、復習してくださいね。




それでは、第11回の投稿をお待ちください。

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


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



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

Dreamweaver CC 2015 基礎編パート1



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



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




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

筆者:
Creative Edge School Books