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

第5回「伸縮する画像を本文の中に挿入して、CSSデザイナーでレイアウトを調整するよ!」


今回は画像を挿入してレイアウトを学びます。
これが、完成したページです! ちょっと手順がありますが、それほど難しくないので、ゆっくり進めていきましょうね。




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



[01]
いよいよ画像のレイアウトです!
画像は、本文の中に挿入したいですね。

ゆっくり進めていきましょう。
まず、DOMパネルの「h2」タグの下の「p」タグをクリックしてください。
中見出しの下の段落です。ここに画像を挿入します。





[02]
挿入パネルのポップアップメニューから[Bootstrapのコンポーネント]を選んでください。

Bootstrap(ブートストラップ)については、オンライン講座の「第1回 Bootstrapについて理解する( http://design-zero.tv/Dreamweaver/index.html#wc-vol01 )」で詳しく説明してるし、テキストキャスティングの「第1回「Bootstrap(ブートストラップ)って何だっけ? 復習するよ!( http://blog.livedoor.jp/thinkzero/archives/2647102.html)」でも学べるけど、中学生の皆さんには、ちょっと難しいかな。

簡単に言うと、すでにCSSが指定されている部品を集めたパーツ集のようなものなんだ。

[Responsive Image]の小さな三角形アイコンをクリックして、メニューから[Default]を選んでみてよ。

これは、レスポンシブイメージと言って、ウィンドウの幅にあわせて伸縮するCSSがすでに指定されている部品なんです。





[03]
また表示されてますね。
この場合は、段落の中に、画像を入れたいわけです。

ということは、[前]ではないし、[後]でもない。[折り返し]はクリックできない状態になっているので、残っているのは[ネスト]だけ。
はい、そうなんです、選択した要素の「中に」挿入したいときは[ネスト]です!
クリックしてください。

挿入されました!
グレーの画像はダミーです。
とりあえず、このダミーのまま、作業を進めましょう。






[04]
画像の右側が空いてますが、ここに本文を流し込む指定をしてみましょう。
回り込みのような表現ですね。

CSSデザイナーの[ソース]の「style.css」をクリックして選択しておきます。
続けて、[セレクター]の[+]をクリック!

「.section p .img-responsive」って表示されると思いますが、「.section p img」に変更して、Enterキーを押してください。

「.img-responsive」を「img」に変えるだけです。
「img」の頭の記号(ピリオド)は削除しましょうね。

「.section」というクラス名が付いた「コンテナ」の中にある「段落」の中にある、画像に対してCSSを指定しますよ!ということです。





[05]
それでは、CSSを指定しましょう!
[プロパティ]のレイアウトアイコンをクリックして、[float]というプロパティが見えるまでスクロール。
[float]の左端のアイコンをクリックしてください。

本文が画像の右側に流れ込みましたね!

[float](フロート)というのは、あえて難しく言うと「浮動化」の機能。浮かせて、寄せて、空いた領域に下の要素を流し込むという、~嗚呼、難しいね。

要するに、回り込みの機能ではないんですよ。回り込みのように表現できる機能。
ややこしいね。






[06]
画像と本文の間隔が狭いので、広げましょう。
[margin]の右側の値をダブルクリックして、「1em」と入力しよう!

1文字分、空けることができました。





[07]
ここまでを保存しておきましょう。
CSSファイルも同時に保存してください。[すべてを保存]でしたね。

ん?何か表示されましたね。
これは、先ほど挿入した[Responsive Image]のダミー画像も保存するよ!と言ってるので、そのままOKをクリックしてください。必要なくなったら後で削除すればよいので。





[08]
それでは、画像を入れ替えましょう!
ダミー画像をクリックして、[エレメントディスプレィ]に「img」タグが付いていることを確認して、ハンバーガーアイコンをクリック!

ポップアップが表示されますので、[src]のフォルダアイコンをクリックしてください。
入れ替える画像を選びます。ここでは、「a01.jpg」を選んで、[開く]をクリックしましょう。





[09]
入れ替わったけど、この写真、すごく大きいのです。
あっ、ポップアップは、もう一度、ハンバーガーアイコンをクリックすれば消えますので。

スクラバーをドラッグしてみてください。
レスポンシブイメージになっているので、ウィンドウの幅にあわせて伸縮してくれますが、ウィンドウを広げた状態ではもっと小さくしたいですよね。






[10]
画像を縮小するCSSを指定しましょう!
[セレクター]の[.section p img]をクリックして選択しておきます。

[プロパティ]の[width]の値をダブルクリックして、「40%」と入力してください。

どうですか、40%に縮小されましたね。






[11]
ここまでは大丈夫かな?
画像が40%縮小されたので、見やすくなりましたが、今度はウィンドウを狭めたときに、画像が小さくなってしまって、ちょっと問題ですよね。
もう、回り込みも必要ありませんし。

実は、ここから「レスポンシブWebデザイン」の学習に入ることになります!

ウィンドウの幅が狭くなると、回り込みが解除されて、画像の幅も100%に戻る。
そんな指定ができるんです。





ということで、いよいよレスポンシブWebデザインの学習に進みますが、ん~時間切れかな。
もう夜10時過ぎてしまった。

第6回の投稿は、明日以降かな。

ただ、レスポンシブWebデザインのページに変更したデータを含む「完成データのセット」は、「Dreamweaver CC 2015 基礎編パート1( http://design-zero.tv/Dreamweaver/ )」の専用ページにアップロードしておきますので、ログインして見ておいてください。

こんな感じになるよ!というイメージがつかめますので。


第5回までやってみて、どうでしたか?
HTMLやCSSをまったく記述していませんよね。

DOMパネルやCSSデザイナーって、複雑なレイアウトになるほど威力を発揮するので、ぜひ習得して、思い通りのページを作成できるようになってください!



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

Dreamweaver CC 2015 基礎編パート1



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



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




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

筆者:
Creative Edge School Books