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

第24回「どんなに複雑なマガジンレイアウトも、ナビゲーションバーの作り方の応用だよ! 不安な人は復習してね!」


第24回の授業(テキストキャスティング)を開始します!
新カリキュラムの第2回になります!



[01]
まず、サンプルデータを見ながら確認していきましょう。
「dw-24-demo」フォルダの「index.html」をブラウザーで開くと、こんなページが表示されます。




[02]
ブラウザーのウィンドウの幅を変更してみますよ。
伸縮しますね。




[03]
このページは、Dreamweaverで作成しましたが、複雑なことは何もやっていないんです。

講座ビデオ「Dreamweaver CC 2015 によるレスポンシブWebデザイン」で、ナビゲーションバーを「箇条書き」からつくりましたよね。
あの作り方と同じなんだ。

コードビューでHTMLを見れば、わかりますが、9つのコンテナ(divタグ)が並んでいるだけです。




[04]
ナビゲーションバーの作り方は覚えているかな?
忘れちゃった人は、Part 03の「STEP 03 ナビゲーションバーの各項目を水平方向に並べる」をもう一度、復習しよう!

CSSデザイナーの[float]で水平方向に並べましたよね。
でも、その下の要素がナビゲーションバーに流れ込んできて、おかしな表示になった。

「魔法の呪文」覚えてる?
そう、[float]の処理を解除するためのテクニックだよね。
「存在するけど、目に見えないコンテナ」をつくって、そこに解除するための指定をしました。




[05]
このサンプルページもまったく同じなんだ。
8番と9番は、まだ学んでいない指定を使っているけど、あとはナビゲーションバーの作り方と同じ。




[06]
水平方向に並べるために、CSSデザイナーの[float]を使ってます。
あとは、前回学習した「整列」です。

左に寄せたり、中央に揃えたり。
「整列」は、レイアウトのテクニックの一つでしたね。




[07]
繰り返しになりますが、ライビュービューの勉強だから、CSSは直接書きません。
最初から最後まで、CSSデザイナーを使います!

こんな感じで、パネルの幅を広げると[プロパティ]の領域が分割表示されるから、指定しやすくなります。
編集画面はちょっと狭くなっちゃうんだけどね。



何となく、これから始める学習の内容がイメージできたかな?
ナビゲーションバーの作り方がまだ理解できていない人は、Part 03の「STEP 03 ナビゲーションバーの各項目を水平方向に並べる」を復習してください!

ここが習得できていることが前提で、進んでいきますからね。




それでは、第25回(新カリキュラムの第3回)の投稿をお待ちください。
ここで使用したサンプルデータは、以下の専用ページからダウンロードしてください。


今回のテキストキャスティングは、こちらの講座ビデオの追加コンテンツです。
テキストキャストの課題データやサンプルデータは、専用ページからダウンロードすることができるようになります。

購入方法:Creative Edge School Booksのストア( http://design-zero.tv/ia/dw1/
形式:ビデオ(学習パートごとに分割されています)
総再生時間:1時間40分
発売期間:27日(土曜日)、28日(日曜日)※月曜の朝7時まで
価格:1,500円
※シンクゼロマガジン(旧・全記録)の読者ページでは常時アクセスできます。



前回(第22回)までは、以下のページにまとめてあります。

中学生のためのレスポンシブWebデザイン
Dreamweaverライブビュー編


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

筆者:
Creative Edge School Books