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

第6回「レスポンシブWebデザインの学習開始です! まずは小さな画面のデザインから始めていくよ!」



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



[01]
今回から、いよいよレスポンシブWebデザインの学習に入りますが、難しい話は後にして、まずは「体験」です。

スクラバーをドラッグしてみましょう。
ウィンドウの幅が狭くなると、2つ問題が発生します。
1つは、タイトルが隠れてしまうこと。Resposiveの文字が隠れちゃってるでしょう。

もう1つは、写真が小さすぎる。
というより、回り込んでいる文が読めませんよね。こんな状態になってしまうと。

ということで、タイトルの文字サイズを少し下げて、画像を大きくしましょう。





[02]
スクラバーをドラッグすると、ルーラ(定規)の部分に数字が表示されますよね。
「400」辺りにあわせてください。「398」でも「402」でもかまいませんよ。正確じゃなくてOKです。

このウィンドウ幅を基準にして、修正していきましょう。





[03]
CSSデザイナーの[ソース]の「style.css」をクリックして選択しましょう。
タイトル(h1)の修正ですから、[セレクター]の「.section h1」ですね。クリックして選択してください。

文字の大きさの変更なので、[プロパティ]の[font-size]です。
現在「4em」になってますが、「3em」に変更しましょう。
これでOK!





[04]
次は画像です。
画像は、[セレクター]の「.section p img」ですね。クリックしましょう。
回り込みの表現は、[プロパティ]の[float]ですから、解除したい場合は、右端のアイコンをクリックしてください。





[05]
はい、解除されましたね。
次は、画像を大きくしますが、その前にページの中央に配置しておきましょう。





[06]
中央に配置する方法は、一度やりましたけど、覚えてますか?
左右のマージンに「auto」を指定すれば、中央に配置されましたね。

それでは、[プロパティ]の[margin]の左右を「auto」に変更してください。
直接「auto」と入力するか、クリックしてメニューから選んでください。





[07]
はい、中央に配置されました!
では、大きさも変更しましょう。





[08]
[プロパティ]の[width]の値が「40%」になっていますが、「90%」に変更してください。

あと、画像と本文の間隔がちょっと狭いので、1文字分空けておきましょう。
[プロパティ]の[margin]の下の値に「1em」と入力してください。

直接、数値を入力する場合は、薄い数字の部分をクリックしてね。単位の部分をクリックすると、メニューが表示されちゃうので。





[09]
スマートフォンなどの小さなスクリーンで見た場合は、これでいいですね。





[10]
スクラバーをドラッグして、ウィンドウを広げてみましょう。
画像が大きくなっちゃいましたね。

Webページを作成し始めたときの状態に戻ってしまった感じです。

でも、これでいいんです。

小さな画面で見やすいデザインから始めていった方が、CSSを指定する作業では効率的なんですよ。





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


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



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

Dreamweaver CC 2015 基礎編パート1



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



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




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

筆者:
Creative Edge School Books