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

第19回「CSSデザイナーだけで、レスポンシブWebデザインのページが出来ちゃいましたね! もっと複雑なレイアウトに挑戦しますよ!」の続き! 」


次回で、20回になりますね。
ページが増えてきたので、「中学生のためのレスポンシブWebデザイン」のコーナー( http://design-zero.tv/Dreamweaver/index.html#textcast )を作りました。各ページのリンクがあるので、活用してね!




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




[01]
今回は、タブレットや小型のノートパソコンのスクリーン向けのデザインです。

ブレイクポイントを1つ設定してますよね。
ナビゲーションバーの作業のときです、覚えてますよね。

CSSデザイナーの[ソース]の「style.css」が選択されていることを確認して、[@Media]の「(min-width : 513px )」をクリックしてください。

では、「header」のコンテナに背景画像を入れましょう。
ここは一度やってますので、テンポよくいきましょう!

DOMパネルの「header」タグをクリックして選択!
CSSデザイナーの[セレクター]の[+]をクリック、「header」に変更してEnterキー!

[プロパティ]の[background-image]の[url]のクリック、表示されている「url」は削除、その後にフォルダアイコンをクリック!





[02]
ダイアログが表示されるので、「top-cover-1500.jpg」を選択してください。

入りました!
けど、この幅だと背景画像の右側のキャラクターが隠れてしまう!
背景画像の位置を調整しましょう。







[03]
[プロパティ]の[background-position]の左側の値の単位をクリック、メニューから[right]を選びます。

はい、画像の右側が基点になりましたので、キャラクターが表示されましたね。

垂直方向の位置も指定します。
[background-position]の右側の値の単位をクリック、メニューから[bottom]を選びます。





[04]
スクラバーをドラッグして、背景画像が切り替わることを確認しましょう!
大丈夫ですね?





[05]
最後は、パソコンのワイドスクリーンなど大きなスクリーン向けのデザインです。

スクラバーをドラッグして、数値が「769」になったら、マウスボタンを離しましょう。

三角形アイコンをクリックして、ブレイクポイントを設定します。
一度やっているので、図は省略ね!

ポップアップが表示されますので、数値が「769」になっていない場合は、修正してください。






[06]
上のポップアップメニューから[min-width]を選択!
幅が「769ピクセル以上なら~」ですね。

下のポップアップメニューから[style.css]を選択!
OKをクリック!

CSSデザイナーの[ソース]の「style.css」が選択されていることを確認して、[@Media]の「(min-width : 769px )」をクリックしてください。





[07]
[セレクター]の[+]をクリック、「header」に変更してEnterキー!

[プロパティ]の[background-image]の[url]のクリック、表示されている「url」は削除、その後にフォルダアイコンをクリック!





[08]
ダイアログが表示されるので、「top-cover-2340.jpg」を選択してください。
入りましたね!

背景画像の位置調整です。
[プロパティ]の[background-position]の左側の値の単位をクリック、メニューから[right]を選びます。

続けて、[background-position]の右側の値の単位をクリック、メニューから[center]を選びます。





[09]
ひとまず、完成!
スクラバーをドラッグして、3つの背景画像が切り替わることを確認しよう!





[10]
CSSの内容を覗いてみましょうか。

アプリケーションバーの[style.css]をクリックし、さらに[コード]をクリックしてください。

全てCSSデザイナーで作業しましたが、ちゃんとコードが記述されているでしょう。
すごいと思いませんか?

「@media (min-width: 513px)」って記述されてますけど、これがメディアクエリの記述なんです。

それじゃ、ここまでを保存しておこう。
アプリケーションバーの[ライブ]をクリックして元の画面に戻してから、ファイルメニューの[すべてを保存]!






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

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



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

Dreamweaver CC 2015 基礎編パート1



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



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




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

筆者:
Creative Edge School Books