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

第3回「CSSデザイナーを使うよ! コンテナの幅を80%にしてページの中央に配置しよう!」



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


[01]
次は、DOMパネルで「ゴミ取り」です。
図のように、すべてのタグをクリックして展開してください。

「br」っていうタグが、2つ入っているでしょう。
これ、ペーストスペシャルでテキストをコピーした時に、入ってしまったんですけど、必要ないんです。

不要なタグを消したいときは、DOMパネル!
右クリックして、メニューから[削除]を選ぶだけ!

2つの「br」タグを削除してください。





[02]
さて、ここからCSSを使います!
シーエスエスとか、スタイシートって呼びますけど、ウェブページの見栄えを整えていく機能です。

Dreamweaverでは、CSSデザイナーというツールがありますので、[CSSデザイナー]のタブをクリックして表示させてください。

まず、CSSファイルを作成して保存します。
HTMLとは別にファイルを作成して、HTMLとCSSの指定を分けるんです。

[ソース]の[+]をクリックして、メニューから[新規CSSファイルを作成]を選びましょう。





[03]
ダイアログが表示されますので、ファイル名を付けます。
ここでは、「style」にしました。
同じ名前にしてね。

追加方法は、[リンクさせる]がチェックされていることを確認。
こうしておけば、現在表示されているHTMLファイルに対して、CSSの指定ができるようになるのです。

OKをクリックすると、[ソース]に表示されましたね。





[04]
画面の左上を見てください。
ファイル名が並んでいるでしょう。その中に、いま保存した「style.css」がありますよね。

ちょっと小さいんだけど、ファイル名に記号の「*(アスタリスク)」が付いているのがわかるかな?
これは、まだ保存されていないよ!という印なんだ。

「index.html」のタブにも付いてる。

HTMLファイルとCSSファイルを同時に保存したいよね。
こんなときは、ファイルメニューの[すべてを保存]を選んでください。





[05]
次にやりたいのは、ページに余白をつくること。
今は、余白がないから、テキストが読みにくいでしょう。

さぁ、どうやって余白をつくるか?

コンテナの周辺に余白をつくればいいんだよね。
そのために、コンテナに名前を付けないといけない。名無しさんだと、CSSで指定できないんだ。

じゃ、始めるよ。
DOMパネルの[div]タグをクリックして選択してください。
コンテナが選択されました。





[06]
[エレメントディスプレィ]の[+]をクリックすると、名前が入力できます。入力ボックスには、Class/IDって表示されてます。

ここでは「section」にしておきましょう。入力して、Enterキーを押してください。

ポップアップが表示されます。
[ソースを選択]に、先ほど作成したCSSファイル「style.css」が表示されていますね。
Enterキーを押して、決定しましょう。

これで、コンテナに「section」という名前が付きました。
これを「クラス名」って呼びますので、覚えておいてね。





[07]
じゃ、このコンテナにCSSを指定するよ。

CSSデザイナーの[ソース]で「style.css」が選択状態になっていることを確認!
[セレクター]に、コンテナに付けたクラス名「.section」が表示されていますので、クリックして選択!





[08]
何をやりたいかというと、コンテナの幅を「80%」にして、ページの中央に表示させたいんだ。

始めますよ。
[プロパティ]の左端のレイアウトアイコンをクリックします。
一番上の[width]っていうのが、幅の値を指定できるプロパティなんです。

値の部分にマウスカーソルをあわせると、ボックスが表示されますので、クリックしてください。
メニューが表示されるので、[%]を選びましょう。

この段階では、0%になっちゃうので、ページ上のテキストが無くなるけど、慌てないでね。





[09]
「80」と入力して、Enterキーを押してください。
これで、ページ幅に対して、コンテナの幅が80%縮小されます。

次は、コンテナをページの中央に移動させたい。
少しだけスクロールして、[margin]を表示させましょう。

まず、左側のマージンの単位の部分をクリックします。





[10]
メニューが表示されますので、一番上の[auto]を選んでください。

右側のマージンも同じです。
単位の部分をクリックして、メニューの[auto]を選びましょう。

コンテナの左右のマージンに「auto」を指定すると、ページの中央に配置されるんです。





[11]
どうです?
コンテナが中央に配置されましたね!

ページの左端に、スクラバーと呼ぶ短いバーがありますので、ドラッグしてみてください。
ウィンドウの幅が変わるでしょう。

コンテナはどうなってる?
ウィンドウの幅にあわせて、伸縮しますよね。幅は常に80%です。

確認できたら、ページを保存しておきましょう。
HTMLファイルとCSSファイルを同時に保存する方法は覚えているかな?

補足ですが、グレーの領域をダブルクリックすると、スクラバーが元の位置(右端)に戻ります。





簡単な作業でしたが、CSSの指定方法は理解できた?
プロパティの知識がないと指定できませんが、CSSデザイナーを使うと、簡単でしょう。

[width]が「幅」で、[margin]が上下左右の「余白」ですよ、大丈夫かな。
覚えておいてね。


それでは、第4回の投稿をお待ちください。
次の投稿が何時頃になるかは、交通機関次第!


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


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

Dreamweaver CC 2015 基礎編パート1



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



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




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

筆者:
Creative Edge School Books