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

第7回「こんなに簡単にレスポンシブWebデザインのページが作成できるなんて驚きでしょ!」



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



[01]
今度は、スクリーンが広いタブレットやパソコンなどで見たときのデザインを考えていきましょう。

スクラバーをドラッグして、ルーラ(定規)に表示される数字が「580」になったら、マウスボタンを離してください。
「578」でも「582」でもいいですよ。簡単に入力し直せますので。





[02]
マウスボタンを離すと[+]付きの三角形のアイコンが表示されますよね。
これをクリックしてください。

ポップアップが表示されましたよ。
これは何でしょうね?

数値が「580」じゃない場合は、ここで修正してください。





[03]
一番上のポップアップメニューから[min-width]を選びましょう。

[min-width]というのは、「~以上だったら、指定したCSSを適用するよ!」という機能なんです。
「580」ピクセルを指定してますから、「ウィンドウの幅が、580ピクセル以上だったら、指定したCSSを適用するよ!」という意味になります。

わかりますよね?

あと、下のポップアップメニューから[style.css]を選んでおいてください。
完了したら、OKをクリック!





[04]
では、CSSを指定していきましょう。

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

まず、タイトルを大きくしましょうか。

タイトルをクリックしてください。[エレメントディスプレィ]に「h1」タグが付いていることを確認してね。






[05]
[セレクター]の[+]をクリック!
「.section h1」と表示されますので、Enterキーを押しましょう。

続けて、[プロパティ]の[font-size]の値をダブルクリックして、「4em」と入力!





[06]
さぁ、どうなるかな。
スクラバーをドラッグして確認してみよう。

ウィンドウを狭めたり、広げると、タイトルの大きさが変化しますよね!

正確に言うと、「ウィンドウの幅が、580ピクセル以上だったら、タイトルは「4em」で表示されます」、「580ピクセル未満だったら、タイトルは「3em」で表示されます」となります。

これは、CSSのメディアクエリという機能を使ったテクニックなんです。
だから、Dreamweaverの上部にある色の付いたバーに「ビジュアル メディアクエリ バー」という名前が付いているんです。





[07]
次は、画像です。クリックして選択ください。[エレメントディスプレィ]に「img」タグが付いていることを確認!

[セレクター]の[+]をクリック!
「.section p .img-resposive」と表示されますので、「.section p img」に変更して、Enterキーを押しましょう。

「.img-resposive」を「img」に変更するとき、頭の記号(ピリオド)は削除してね。





[08]
[プロパティ]の[width]の値をダブルクリックして、「40%」と入力してください。
これで、画像が縮小されました!





[09]
中央に配置するために、左右のマージンに「auto」を指定してますよね。
ここも変更しましょう。

[margin]の左の「単位」をクリックして、メニューから[em]を選びます。
続けて、右の「値」をダブルクリックして、「1em」と入力!

なぜ、右のマージンに「1em」と指定したのかわかりますよね。
回り込みの表現のとき、画像と本文の間隔が狭かったので、1文字分空けましたよね。





[10]
では、その回り込みの表現。
[float]の左端のアイコンをクリックしてください。

はい、テキストが流れ込みました!





[11]
スクラバーをドラッグして、確認!

ウィンドウを広げると、画像の周辺に本文が流し込まれ、ウィンドウを狭めると、画像と本文が縦方向に並びます。

これが、レスポンシブWebデザインです。
1つのHTMLページでパソコンのワイドスクリーンから、スマートフォンの小さなスクリーンまで「適応」させることができる。すごいでしょう!

こんなに簡単に作成できるDreamweaverもすごいでしょ!






それでは、第8回の投稿をお待ちください。
明日以降の投稿になります。以下の専用ページにログインして、チェックしてね!


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



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

Dreamweaver CC 2015 基礎編パート1



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



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




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

筆者:
Creative Edge School Books