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

第18回「レスポンシブWebデザインのページに3種類のスクリーンに適応したバックグラウンドイメージを配置しよう!」



今回は、ページのトップに配置するカバーグラフィックの指定方法について学びます。
レスポンシブWebデザインの指定もありますので、事前に以下のシートをプリントしておいてね。
A4サイズでプリントできるようになっています。

これを見ながら、学習を進めた方が理解しやすいので!

DW-18-RWD-A4.pdf](844KB)
PDFファイルのリンクなので、保存するときは右クリックして、メニューから選んでね。




こんな感じになります。
カバーグラフィックのキャラクターの位置が微妙に違っているでしょう。

同じ画像じゃないんですよ。
どうやって、切り替えていくかという学習です。




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




[01]
素材データがあるので、専用ページからダウンロードしてください。

フォルダの中に、3つの画像ファイルが入っているので、いまデスクトップに置かれている「MyLP」フォルダの中の「images」フォルダの中にコピーしておいてね。





[02]
では、プリントしたシートを見てください。
ページの上には、タイトルとキャッチコピーが配置されていますが、この2つの要素は「header」というコンテナの中に入っています。

この「header」内に背景画像としてカバーグラフィックを表示させたい。

ただ、レスポンシブWebデザインのページとして作成しますので、ウィンドウの幅を3つ設定しているんだ。


まず、スマートフォンなどの縦長の小さなスクリーンから指定していきます。
一番上の「header」を見て。
CSSがたくさん指定されているでしょう。

次は、タブレットなどのスクリーンで見たときの「header」なんだけど、CSSの指定しか2つしかないよね。
小さなスクリーン向けのCSSと違う部分だけ指定すればいいんだ。

一番下の「header」は、パソコンなどのワイドスクリーン向けなんだけど、ここも同じように、小さなスクリーン向けのCSS、タブレットなどのスクリーン向けのCSSと違う部分だけ指定します。

こういう順序で指定すると、効率的でしょ。




[03]
それでは、小さなスクリーン向けのCSSを指定していきましょう。
スクラバーをドラッグして、幅が500ピクセルになったらマウスボタンを離してください。
500ピクセル以下ならよいので、499でも、498でもかまいませんよ。





[04]
DOMパネルの「header」タグをクリックして選択します。

続けて、CSSデザイナーの[セレクター]の[+]をクリックすると、「.wrapper header」と表示されますので、「header」だけにして、Enterキーを押してください。





[05]
まず、背景色を黒にしておきます。
後で、タイトルを白にするので、背景画像が表示されなかった場合、白いページに白い文字じゃ、読めなくなっちゃうでしょ。
だから、ここで背景を黒にします。

[プロパティ]の背景アイコンをクリック、[background-color]の値をクリックして、カラーピッカーから黒を選んでください。
色の選択はもう何度もやっているので、図は省略ね!





[06]
次は、高さの値を指定します。
[プロパティ]のレイアウトアイコンをクリック、[height]の値をダブルクリックして、「330px」と入力、Enterキーを押してください。

背景画像が表示できる大きさを確保できましたね。






[07]
タイトルの色を白に変更しましょう。
[セレクター]の「h1」をクリックして選択!

[プロパティ]の背景アイコンをクリック、[color]の値をクリックして、カラーピッカーから白を選んでください。

タイトルの下のコピーも白にします。
[セレクター]の「.wrapper header p」をクリックして選択!
[プロパティ]の背景アイコンをクリック、[color]の値をクリックして、カラーピッカーから白を選びましょう。

はい、できました。
ただ、上と左側に余白が欲しいですね。





[08]
[セレクター]の「header」をクリックして選択!

[プロパティ]のレイアウトアイコンをクリック、[padding]の左側の値をダブルクリックして、「0.5em」と入力して、Enterキーを押してください。

タイトルの上の余白は、タイトルにCSSを指定しましょう。
[セレクター]の「h1」をクリックして選択!

[プロパティ]の[padding]の上の値をダブルクリックして、「0.2em」と入力して、Enterキー!

これで、いいですね。





[09]
では、背景画像を配置しましょう!

[セレクター]の「header」をクリックして選択!

[プロパティ]の背景アイコンをクリック、[background-image]の値をクリックして、表示されている「url」をDeleteキーで削除した後に、フォルダアイコンをクリックしてください。

ダイアログで「top-cover-1024.jpg」を選んでください!





[10]
でも、背景画像が大きいから、一部しか表示されていませんね。
CSSで調整しましょう!

[プロパティ]の[background-position]の左側の値の単位をクリックして、メニューから[center]を選んでください。

同様に、右側の値の単位をクリックして、メニューから[bottom]を選びましょう。






[11]
水平方向では「中央」、垂直方向では「下」に背景画像が配置された状態です。

では、次は背景画像の大きさを調整しますよ。
[プロパティ]の[background-size]の値をクリックして、メニューから[cover]を選んでください!






[12]
はい、ぴったり収まりました!

あと、もう1つだけ指定しておきます。
[プロパティ]の[background-repeat]の右端のアイコンをクリック!
これは、リピート表示させない!ということ。つまり、背景画像1つだけ表示されます。





[13]
スクラバーをドラッグして、ウィンドウを狭めてみよう。
背景画像が隠れず、伸縮しますよね。

[background-size]で[cover]を選んだでしょう。
これは、幅一杯に背景画像が表示される指定なんです。画像の比率は変わりません。

これで、小さなスクリーン向けのデザインは完了!
次回は、タブレットや小型ノートパソコンなどのスクリーンに適用するデザインです。






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

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



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

Dreamweaver CC 2015 基礎編パート1



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



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



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

筆者:
Creative Edge School Books