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

第20回「ワイドスクリーンでは記事とサイドバーを横方向に並べるよ! レスポンシブWebデザインの基本ページの完成です! 」


今回は、記事とサイドバーを横方向に並べます。
ナビゲーションバーの応用になりますので、不安な人は前回を復習しておいてね!





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




[01]
スクラバーをドラッグして、ウィンドウを狭めてください。
幅が狭いときは、縦方向に並んだ方がよいですよね。





[02]
ウィンドウを広げてみましょう。
このくらいになると、サイドバーを記事の右側に置いた方がよくないですか?

記事の行の文字数が増えて、読みづらくなるし、一覧性を向上させた方が見やすいですよね。






[03]
では、まず記事を選択しますよ。
DOMパネルの[article]をクリックしてください。

CSSデザイナーの[ソース]で「style.css」が選択されていることを確認してから、[@Media]の「(min-width : 769px )」をクリックしましょう。
ウィンドウの幅が、769ピクセル以上のときに、サイドバーを記事と並べるという指定になります。

続けて、[セレクター]の[+]をクリック!
「article」だけに変更して、Enterキー!

[プロパティ]のレイアウトアイコンをクリック、[width]の値をダブルクリックして、「65%」と入力してください。

記事のコンテナの幅が、65%になりましたよ。





[04]
次はサイドバー!
DOMパネルの[aside]をクリックしてください。

続けて、[セレクター]の[+]をクリック!
「aside」だけに変更して、Enterキー!

[プロパティ]の[width]の値をダブルクリックして、「30%」と入力してください。
サイドバーのコンテナの幅が、30%になりました。





[05]
はい、こんな感じになりました。
記事のコンテナの幅が65%、サイドバーのコンテナの幅が30%です。

次は、フロートの指定です。
覚えてるかな?





[06]
[セレクター]の「article」をクリック!
[プロパティ]の[float]の左端のアイコンをクリック!

サイドバーも指定します。
[セレクター]の「aside」をクリック!
[プロパティ]の[float]の2番目のアイコンをクリック!

さて、どうかな?





[07]
なんと! 真っ黒だ!

って、大袈裟に言いましたけど、理由はわかりますよね。
一番下の「footer」が流れ込んでいるので、真っ黒になっちゃった。

最初につくっておいた、魔法の呪文を使いましょう。
ナビゲーションバーで使いましたね。





[08]
魔法の呪文を指定するのは、記事とサイドバーが入っているコンテナです。
DOMパネルの「article」の上の「div」タグをクリックして選択しましょう。

続けて、[エレメントディスプレィ]の[+]をクリックして、「cf」と入力して、Enterキーを押してください。





[09]
はい、できた!
ここは、大丈夫ですね!





[10]
スクラバーをドラッグして、レイアウトが切り替わることを確認してください。
これで、レスポンシブWebデザインの基本ページは完成です!

ページは保存しておいてください。
CSSファイルもあるから[すべてを保存]ね!





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

完成データは、「Dreamweaver CC 2015 基礎編パート1( http://design-zero.tv/Dreamweaver/ )」の専用ページの「テキストキャスティング」のところに、まとめてありますので、ダウンロードして復習に使ってくださいね!



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

Dreamweaver CC 2015 基礎編パート1



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



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



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

筆者:
Creative Edge School Books