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

第16回「箇条書きをナビゲーションバーとしてデザインしよう! まずはスマホのような小さな画面で見たときのナビゲーション!」



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



[01]
それでは、課題ページを作成していきましょう。
第13回の続きになりますので、もう一度見てね。

前回まで、いくつかサンプルを見てきたので、デスクトップには課題データではない「MyLP」フォルダがあると思うんだ。

第13回でダウンロードしたデータを使いますので、[11]の作業をもう一度やってほしんだ。

...と思ったけど、面倒だよね。
じゃ、これ[20160119-Lesson-Data.zip](2.8MB)をダウンロードして!

この中の「MyLP」フォルダをデスクトップに置いてください!
続けて、Dreamweaverを起動して、「index.html」をダブルクリックして開きます。





[02]
まず、ナビゲーションの見栄えをつくっていきましょう。
これからCSSを指定するのは、箇条書きの部分です。

DOMパネルの「nav」タグの下の「ul」タグをクリックしてください。

続けて、[セレクター]の[+]をクリックします。「.wrapper nav ul」と表示されますが、頭の「.wrapper」は削除してしまいましょう。
「nav ul」に変更して、Enterキーを押します。





[03]
余白を無くしますよ。
[プロパティ]の左端のレイアウトアイコンをクリックして、[margin]の右上の値をクリックし、「0」と入力して、Enterキーを押してください。
ここに入力した値は、左右上下の値になるんですよ。ショートハンドと呼びます。

同様に、[padding]のの右上の値をクリック、「0」と入力して、Enterキー!

ページの箇条書きを見てください。余白が無くなりましたね。





[04]
次は、箇条書きの「・(中黒)」を消しちゃいます。

[プロパティ]の左端から2番目のテキストアイコンをクリックして、[list-style-type]の値をクリック、メニューの[none]を選んでください。

消えましたね!






[05]
背景色と文字色も指定します。

[プロパティ]の左端から4番目の背景アイコンをクリックして、[background-color]の値をクリック、カラーピッカーで黒を選び、Enterキーを押してください。
背景が黒になりました。





[06]
[プロパティ]のテキストアイコンをクリックして、[color]の値をクリック、カラーピッカーで白を選び、Enterキーを!

箇条書きの背景が黒になり、文字が白に変わりました。






[07]
次は、箇条書きの各項目に対して、CSSを指定していきますよ。

DOMパネルを見てください。
4項目あるから、4つの「li」タグがあるでしょう。
どれでもいいんですが、一番上の「li」タグをクリックしてください。

[セレクター]の[+]をクリック、「nav ul li」と表示されますので、Enterキーを!





[08]
CSSを指定していきましょう。
[プロパティ]のレイアウトアイコンをクリックして、[margin]のショートハンドの値をクリック、「0」と入力してEnterキーを押してください。
先ほど、やりましたね。

続けていきます!
[width]の値をダブルクリックして、「100%」と入力してEnterキー!
[display]の値をクリックして、メニューから[block]を選んでください!





[09]
[プロパティ]のテキストアイコンをクリックして、[text-align]の2つ目のアイコンをクリックして、中央揃えにしましょう。






[10]
上下の余白も少しだけ空けておきましょうね。

[プロパティ]のレイアウトアイコンをクリックして、[padding]の上と下の値をそれぞれダブルクリックして、「0.2em」と入力して、Enterキーを押してください。

項目の区切りがちょっと分かりにくいので、白い破線を追加しましょう。
[プロパティ]の左から3番目のボーダーアイコンをクリックして、下線のタブをクリック、[width]の値をダブルクリックして「1px」を入力、Enterキーを押して!
1ピクセルの線ってことです。





[11]
続けますよ。
[style]の値をクリックして、メニューの[dotted]を選びます。
[color]の値をクリックして、カラーピッカーで白を選び、Enterキーを押してください。





[12]
ページで確認しにくいので、ライブビューの設定を一時的に変更しましょう。
アプリケーションバーの[ライブビューオプション]アイコンをクリックして、メニューから[ライブビューの表示を隠す]を選んでください。

見やすくなりましたね。
白い破線が表示されていますよね。

はい、問題なければ、もう一度、[ライブビューオプション]アイコンをクリックして、メニューから[ライブビューの表示を隠す]を選び、元に戻しておきましょう。

次は、レスポンシブWebデザインの指定です!





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

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



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

Dreamweaver CC 2015 基礎編パート1



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



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




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

筆者:
Creative Edge School Books