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

第11回「DOMパネルで記事が入っているコンテナを複製して、30秒でサイドバーに変えちゃおう!」


やりたいことは、下図のようなサイドバー付きのレスポンシブWebデザインのページをつくること。
でも、このあたりから、ちょっと難しくなるんだ。
慌てず、ゆっくりいくよ!




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



[01]
前回の続きです。
サイドバーを追加したいのですが、一から作るのは面倒なので、コンテナ(「article」)
を複製して、利用しましょう。

これからやりたい作業は、下図のとおり。
緑色の部分をつくりたい。



DOMパネルの「article」タグを選択します。
タグは、折り畳んでおきましょう。





[02]
「article」タグを右クリックして、メニューから[複製]を選んでください。

複製されましたね。
クリックして展開しましょう。





[03]
一番下の「p」タグと、その上の「h3」タグだけ残して、あとは削除していきます。

まず、一番上の「p」タグを右クリック、メニューから[削除]を選んでください。
削除されましたね。

続けて、「h3」タグ、「p」タグ、もう一つ「p」タグを順番に削除!
一番下の「p」タグと、その上の「h3」タグだけ残す。間違って削除しないように注意してね。





[04]
コンテナを「article」から「aside」に変更します。
この作業は、前回やりましたよね。

DOMパネルの2つ目の「article」をクリックして、選択しておきます。
[エレメントディスプレィ]に「article」タグが表示されていますね、確認してください。





[05]
「article」タグを右クリックして、メニューから[クイックタグ編集]を選びます。

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






[06]
「as」と入力すると、候補メニューが出てきますので、キーボードのカーソルキーを使って、「aside」を選び、Enterキーを押しましょう!

もう一度、Enterキーを押して決定!





[07]
DOMパネルで確認しよう!
「aside」タグがありますね。これが、ページ上では、サイドバーになります。

タグを折り畳むと、わかりやすいですね。
記事が入っているコンテナ「article」の下に、サイドバーとなるコンテナ「aside」があります。



図にすると、こんなイメージです。





[08]
さて、ここから急に難しくなるので、一呼吸おきましょうか。

プロの仲間入りした新人ウェブデザイナーさんが、勉強している学習と変わらないので、ゆっくり進めないとね。

ただ、いまやっているのはあくまで「体験」だから安心して。一つひとつ専門的に学んでいくより、ウェブページを完成させたという「体験」が大切ですから。

作りたいウェブページは以下のとおり。





[09]
スクラバーをドラッグして、ウィンドウを狭めていくと、サイドバーが下に落ちて、記事も幅いっぱいになる。





[10]
さらに、狭めていくと、記事の回り込み表現も解除されて、すべての要素が縦方向に並ぶ。

つまり、パソコンのワイドスクリーンではその広さを最大限に活用して、スマートフォンのような縦長の小さなスクリーンでは、方向を縦にして、スクロールで読めるようにする。

次回から、この作業をやっていきます!






それでは、第12回の投稿をお待ちください。
次回から、ちょっと難しくなるから、復習しておいて!

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


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



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

Dreamweaver CC 2015 基礎編パート1




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



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




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

筆者:
Creative Edge School Books