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

第17回「次はボタンを横方向に並べて、ワイドスクリーンに適応させるよ!「箇条書きでナビゲーションバーをつくる」の続き! 」



今回は、以下のようなレスポンシブWebデザインの指定をしていきますよ。
ナビゲーションバーは、箇条書きでつくられていますが、あの魔法の呪文がないと、うまくいきません。
前回の復習も兼ねて進めてきましょう!




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



[01]
レスポンシブWebデザインの指定をしていきます。
その前に、アレをつくっておきましょう。

透明な物体。
CSSで魔法の呪文をつくりますよ!

ここは、第15回の復習になります。
[セレクター]の[+]をクリックして、「.cf」と入力、Enterキーを押してください。

続けて、[セレクター]の[+]をクリックし、「.cf:before, .cf:after」と入力して、Enterキー!





[02]
[プロパティ]の一番下の[その他]をクリックして「con」と入力、候補メニューが出てきますので、「content」を選んで、Enterキー!

続けて、値の部分をクリックして「""」と入力、Enterキーを押しましょう。

一度やりましたので、大丈夫ですね?





[03]
透明な物体に、[float](フロート)を解除するCSSを指定します。

[clear]の3つ目のアイコンをクリック!
もう一つ、[display]の値をクリックし、メニューから[block]を選んでください。

はい、魔法の呪文が完成。
後で使いますので。





[04]
レスポンシブWebデザインの指定に進みましょう。

スクラバーをドラッグして、513pxあたりにあわせてください。
三角のアイコンが表示されますので、クリックします。

ポップアップが表示されますよね。
幅の値が、513になっていなければ、ここで入力しましょう。






[05]
ここも復習です。ちょっと前の学習ですが覚えていますか?
ブレイクポイントでしたね。

上のポップアップメニューから[min-width]を選びましょう。
513と入力しましたから、ウィンドウの幅が「513ピクセル以上だったら~」ですね。

続けて、下のポップアップメニューから[style.css]を選びます。

OKをクリック!





[06]
CSSデザイナーの[ソース]の「style.css」が選択されていることを確認。

続けて、[@Media]の「(min-width : 513px )」をクリックしましょう。

箇条書きを選択しますので、DOMパネルの「ul」タグをクリックします。





[07]
[セレクター]の[+]をクリックして、「nav ul」に変更して、Enterキー!

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





[08]
次は箇条書きの項目を選択しますよ。
DOMパネルの「li」タグをクリックしてください。

[セレクター]の[+]をクリックして、Enterキー!





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

箇条書きの項目の幅が、本文の8文字分の幅になりました。





[10]
次は、項目を横方向に並べましょう。
[プロパティ]の[float]の左側のアイコンをクリックしてください。

横方向に並んだので、いま指定されている下線は消しておきます。

[border]の下線のタブをクリックして、[style]の値をクリック、メニューから[none]を選びます。





[11]
箇条書きの項目の区切りがわかるように、項目の右側に白い破線を表示させましょう。

[border]の右の線のタブをクリックして、[width]の値をダブルクリック、「1px」と入力して、Enterキーを押してください。

続けて、[style]の値をクリック、メニューから[dotted]を選びます。
[color]の値をクリック、カラーピッカーから白を選び、Enterキーを押しましょう。





[12]
はい、これで完成!

と言いたいところですが、問題があるんですよ。

画面を見やすくしましょう。
[ライブビューオプション]アイコンをクリックして、メニューから[ライブビューの表示を隠す]を選んでください。

どうですか?
ナビゲーションバーの下がおかしいですよね。
原因は、[float](フロート)が解除されていないからです。

さぁ、ここで事前につくっておいた魔法の呪文の出番!

次の作業をおこなう前に、もう一度、[ライブビューオプション]アイコンをクリックして、メニューから[ライブビューの表示を隠す]を選んでおいてください。





[13]
項目(「li」)の[float]の解除ですから、箇条書き(「ul」)に魔法の呪文を追加しますよ。

DOMパネルの「ul」タグをクリックして、[エレメントディスプレィ]の[+]をクリック、「cf」を入力して、Enterキーを押しましょう!

はい、正しく表示されました!




スクラバーをドラッグして、確認しましょう。
大丈夫ですね!

だんだん、わかってきましたね。



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

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




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

Dreamweaver CC 2015 基礎編パート1



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



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




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

筆者:
Creative Edge School Books