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

第4回「CSSデザイナーを使って、読みやすいページにするよ! CSSデザイナーに慣れたら速い!」



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


[01]
文字の大きさを調整していきましょう。
まず、タイトルです。

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





[02]
CSSデザイナーの[セレクター]の[+]をクリックしてください。
「.section h1」と表示されますので、Enterキーを押して決定!

これで、「section」というクラス名が付いているコンテナの中にある、タイトル(h1)に対して、CSSを指定することができます。

文字の設定なので、[プロパティ]の左から2番目のテキストアイコンをクリックしてください。





[03]
タイトルは、フォントも変更してみましょうか。
[font-family]の値の部分にマウスカーソルをあわせてください。薄っすらと、default fontって表示されてますよね。

クリックすると、大きなメニューが表示されますので、ここでは一番上の[Arial Black, Gadget, sans-serif]を選んでください。

Arial Blackってフォントが指定されました。

[Arial Black, Gadget, sans-serif]を見ると、3つ書かれてますよね。
説明しておきましょう。
もし、Arial Blackが入っていないデバイスで見た場合、次のGadgetで。Gadgetもない場合は、そのデバイスに入っているゴシック系のフォントで表示されるんですよ。





[04]
次は、文字サイズの変更です。
[font-size]の値の部分にマウスカーソルをあわせてクリック!

メニューから単位の[em]を選びます。エムって呼びます。
このページでは、「1em」と指定した場合、本文の1文字分の大きさになります。





[05]
「4」と入力して、Enterキーを押しましょう。
ここでは、本文の4文字分の大きさになりました。






[06]
中見出しも同じ手順です。
まず、クリックして選択します!
[エレメントディスプレィ]に[h2]タグが付いているのを確認してください。

CSSデザイナーの[セレクター]の[+]をクリックすると、「.section h2」と表示されますので、Enterキーを押して決定です。






[07]
文字サイズは、[font-size]でしたね。
ただ、メニューで単位を選択する方法は手間なので、直接入力しましょう。
値の部分をダブルクリックすると、入力可能になるんですよ。

「1.2em」と入力して、Enterキーを押してください。
文字サイズが小さくなりましたね。

ついでに文字の太さも変更しておきましょうか。
太さは[font-weight]です。

[font-weight]の値をクリックして、メニューから[bold]を選んでください。





[08]
最後は、小見出しです!
クリックして選択、[エレメントディスプレィ]に[h3]タグが付いているのを確認!

[セレクター]の[+]をクリックすると、「.section h3」と表示されますので、Enterキーを押して決定!






[09]
小見出しは、本文と同じ大きさにしましょう。
[font-size]の値の部分をダブルクリックして、「1em」と入力して、Enterキーを押してください。

もう一つの小見出しも変わりましたね。
「section」というクラス名が付いているコンテナの中にある、小見出し(h3)に対して、CSSを指定したのですから、すべての小見出しに反映されます。
わかりますよね?

さらに、文字を太くする。
[font-weight]の値をクリックして、メニューから[bold]を選びましょう。





[10]
ページ全体を見て、バランスを調整しましょう。
中見出しと小見出しの間隔が、ちょっと狭いかな。どうです?

少し広げてみましょうか。





[11]
中見出し(h2)だから、[セレクター]の「.section h2」をクリックして選択!
[プロパティ]のレイアウトアイコンをクリック!

下の余白をつくりたいのだから、[margin]の下の値をダブルクリック!
2文字分空けたいので、「2em」と入力して、Enterキーを押してください。

これで、いいでしょう。
どうですか? 見やすくなったでしょう。





基本ページができましたね!
CSSデザイナーの使い方は、もう慣れたかな?
次回は、画像を本文の中にレイアウトしましょう。少しだけ、難しくなるけど、頑張っていきましょう。




それでは、第5回の投稿をお待ちください。
次の投稿、難しいかな。どうだろう?


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


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

Dreamweaver CC 2015 基礎編パート1



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



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




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

筆者:
Creative Edge School Books