正月休みでDreamweaverとMuseの基礎を習得しておこう!


第5回「いよいよデザインの調整、CSSデザイナーの超基本をマスターせよ!」



Dreamweaver(+Bootstrap)/Muse+レスポンシブWebデザイン関連の記事は、以下のカテゴリーページで一覧できます。すでに学習した内容は割愛しますので、わからない箇所があったら、一読をお願いします!

Dreamweaver/Museのカテゴリーページ:




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


[01]
一応、Bootstrapの基本ページが組み上がったことにします。
いよいよ「調整」のプロセスですが、まずは簡単なスタイルの指定から始めていきます。

ジャンボトロンのタイトル「Hello, world!」の色を変更してみましょう。
CSSデザイナーを使いますので、パネルグループの[CSSデザイナー]タブをクリックして表示してください。





[02]
まずは、新しいCSSファイルを作成しておきます。
[ソース]の[+]をクリックして、ポップアップメニューから[新規CSSファイルを作成]を選んでください。

ダイアログが表示されますので、CSSファイル名を入力します。
ここでは「style」にしました。OKをクリックしてください。





[03]
新しいCSSファイルが作成できました。
このCSSファイルに、Bootstrapのスタイルを「上書き」する独自のスタイルを記述していきます。





[04]
ジャンボトロンのタイトル「Hello, world!」をクリックしてください。
念のため、DOMパネルで確認!
「h1」タグが選択状態になっていることを確認しておきましょう。





[05]
CSSデザイナーの[セレクター]の[+]をクリック!
自動的に、セレクター名が入ります。
「.jumbotron .container h1」と表示されていますね。

ジャンボトロンの中の、コンテナの中の、タイトル(h1)に対して、スタイルを指定しますよ!ということです。

Enterキーを押して、決定します。





[06]
[プロパティ]で指定可能になりましたので、[テキスト]アイコンをクリックして、[color]のカラーアイコンをクリック、明るい青を選んでください。

Enterキーを押して、決定します。





[07]
ジャンボトロンのタイトル「Hello, world!」が、明るい青に変わりました!





[08]
同様に、タイトルの下のリード文も色を変更してみましょう。
タイトル「Hello, world!」の下の欧文をクリックしてください。





[09]
CSSデザイナーの[セレクター]の[+]をクリックします。
「.jumbotron .container p」と表示されますので、Enterキーを押してください。

ジャンボトロンの中の、コンテナの中の、段落(p)に対して、スタイルを指定しますよ!ということです。





[10]
タイトルと同じ色にしましょう。
簡単に指定できます。タイトルのスタイルをコピーすればよいのです。

「.jumbotron .container h1」を右クリックして、メニューから[スタイルをコピー]を選びます。続けて、サブメニューから[テキストスタイルをコピー]を選んでください。





[11]
今度は、「.jumbotron .container p」を右クリックして、メニューから[スタイルをペースト]を選んでください。





[12]
スタイルがコピーされて、タイトルと同じ色に変わりました。
こんな感じで、CSSデザイナーだけで、Bootstrapのスタイルを「上書き」していくことができます。簡単ですね。




ここまでの作業を保存しておきましょう。
ページだけではなく、新しく作成したCSSファイルも保存しなければいけませんので、ファイルメニューの[すべてを保存]を選んでください。


いかがでしょう?
タイトルと段落の色を変更しただけですが、CSSのコードを書かずにスタイルを追加できました。
レイアウトの調整なども、CSSデザイナーで作業していきますので、操作手順を覚えておいてください。



もう9時になってしまうので、第6回は明日かな。

「Dreamweaver CC 2015 基礎編パート1( http://design-zero.tv/Dreamweaver/ )」で学習した内容をもう一度、再確認しておくと、より理解できると思います。

ここまでの完成データは、「Dreamweaver CC 2015 基礎編パート1」の購入者ページでダウンロードできるようにしておきますので。


正月休みで、Dreamweaver(+Bootstrap)の基礎を習得!
頑張りましょう!



関連コンテンツ:
本日のテキストキャスティングのベースになっているオンライン講座

Dreamweaver CC 2015 基礎編パート1



Muse CC 2015 ビジネスガイドブック




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

筆者:
Creative Edge School Books