昨年の12月29日に投稿したテキストキャスティング(第1~5回)の続きです。

あらためて、新年明けましておめでとうございます。

明後日から仕事始め、正月休みは明日で終わりますので、今日はBootstrapのスタイルを「調整」する基本的な操作などを大まかに学んでいきましょう。

少々長めですが、前半は復習なので問題ないと思います。




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

第6回「Bootstrapの基本スタイルを「自分のスタイル」で「調整」していこう!」



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

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





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


[01]
復習を兼ねて、一からページを作成していきますので、デスクトップに作成したフォルダ「MyLP」の中のデータを整理します。「images」フォルダだけ残して、あとはすべて削除してください。

「images」フォルダを開きます。
Dreamweaverが追加したサムネイルの画像なども削除しましょう。素材データの3つの画像ファイルだけ残しておきます。





[02]
Dreamweaverを起動して、ファイルメニューの[新規]を選択、フレームワークから[Bootstrap]を選び、[Bootstrap CSS:]の[新規作成]をクリック、続けて[作成]をクリックします。
ここは、何度もやっていますので、問題ありませんよね。

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





[03]
挿入パネルの[Container-fluid]をクリックします。ページに「可変幅」のコンテナが挿入されました。
続けて、[Grid Row with column]をクリックしてください。





[04]
ダイアログが表示されますので、カラム数は「3」のまま、コンテナの中に挿入したいのですから[ネスト]をクリックし、OKをクリックしましょう。

DOMパネルを見てください。
最初に挿入したコンテナの中に、もう1つコンテナ「div(class="col-sm-4")」が入っていて、その中に3つのカラムがあります。

一番上のカラム「div(class="col-sm-4")」をクリックして選択しておきます。





[05]
挿入パネルのカテゴリーを[HTML]に切り替えて、[Image]をクリックしてください。
選択したカラムに画像を挿入したいと思います。

コンテナの中に画像を挿入するのですから、[エレメントディスプレィ]の[ネスト]をクリック。





[06]
ダイアログが表示されますので、「tagline1024_01.png」を選択して[開く]をクリック。

何か出てきましたね。
まだ、新規ページを一度も保存していないので、相対パスで記述されないよ!というアラートです。後で保存しましょう。とりあえず、ここではOKをクリックしてください。





[07]
画像は挿入されたけど、デカイですね!
ここは復習になります。
伸縮させたい場合はどうすればよいのでしょう?






[08]
わかりますよね?
伸縮する画像(レスポンシブイメージ)にするBootstrapのクラス名を追加するだけです。

[エレメントディスプレィ]の「img」タグの[+]をクリックして、「img」と入力すれば候補メニューが表示されますので、カーソルキーで[.img-responsive]を選択して、Enterキーを押してください。





[09]
あとは、DOMパネルでコピーしていきましょう。
「img(class="img-responsive")」を右クリックして、[コピー]を選択します。

続けて、2つ目のカラム「div(class="col-sm-4")」を右クリックして、[子としてペースト]を選んでください。
カラム(親)の中に画像(子)をペーストする、ということですね。この親子関係についてはすでに学習していますので、わかりますよね。

3つ目のカラムも同じ手順です。





[10]
これで3つのカラムに、伸縮する画像が挿入されました。
保存しておきましょう。ファイルメニューの[保存]を選び、「index.html」という名前で保存してください。





[11]
中央と右側の画像を入れ替えます。
この作業は簡単ですよね。
中央の画像をクリックして選択し、「img」タグのハンバーガーアイコンをクリックします。

ポップアップが表示されるので、[src]のフォルダアイコンをクリック、ダイアログで「tagline1024_02.png」(青い画像)を選んで、[開く]をクリックしましょう。

ポップアップは、もう一度ハンバーガーアイコンをクリックすると閉じますよ。





[12]
入れ替わりました。
右端のカラムも同じ操作です。「tagline1024_03.png」(オレンジの画像)を選んでください。

ここまでは復習。

カラムには、左右に15pxの余白があります。
第1回で学びましたね。

この余白を無くしたい場合は、独自のスタイルを指定しなければいけません。
さて、どうするか?

一度、ページを保存しておいてください。





[13]
新しいCSSファイルを作成します。
パネルグループの[CSSデザイナー]をクリックして表示しておきます。

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

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





[14]
カラムの左右の余白をゼロにするスタイルをつくります。

[セレクター]の[+]をクリックし、ここでは「.zero-space」と入力しました。
Enterキーを押してください。

どんなスタイルなのか、すぐわかる名前にしておきましょう。





[15]
スタイルを指定する前に、3つのカラムが入っているコンテナにクラス名を付けておきます。

DOMパネルで「div(class="row")」をクリックして選択、[エレメントディスプレィ]の「div」タグの[+]をクリックして、「zero」 と入力。

候補メニューが表示されます。
といっても、今作成した「.zero-space」だけですね。
カーソルキーで選択して、Enterキーを押してください。





[16]
さて、ここからCSSの知識が必要なので、難易度が上がります。
ゆっくりいきましょう。

[セレクター]の[+]をクリックし、「.zero-space>[class*="col-"]」と入力、Enterキーを押してください。
半角の記号もあるので、間違わないように注意してね。

このページのコードをコピー&ペーストしてもかまいませんが、これも勉強。直接入力してみましょう。



解説しましょう。
まず、「.zero-space」+「>」ですが、これは、クラス「.zero-space」が追加されているコンテナの中にある要素が対象だよ!という意味。つまり、3つのカラムに対して適用します、ということです。

[class*="col-"]は、「col-」を含むクラス名すべてに適用するという意味です。
現在、3つのカラムには「col-sm-4」というクラス名が付いていますので、適用されます。

まとめると、
クラス「.zero-space」が追加されているコンテナの中にある
「col-」を含むクラス名が追加されている要素すべてに
これから指定するスタイルを適用します!
ということ。

ちょっと、難しい?
まずは、やってみましょうね。




[17]
スタイルを指定します。
カラムの左右の余白をゼロにするのは簡単。
パディング(padding)を指定するだけです。

[プロパティ]のレイアウトアイコンをクリックして、[padding]の左の値の「単位」をクリックしてください。メニューが表示されますので「px」を選びます。
※デフォルトで「px」になっていますが、この操作が必要です。

続けて、[padding]の右の値の「単位」をクリックして「px」を選びます。





[18]
どうですか?
カラムの左右の余白が無くなりましたよね!

ページを保存しておきましょう。CSSファイルも同時に保存しますので、ファイルメニューの[すべてを保存]を選んでください。





[19]
念のため、ウェブブラウザーでも確認しておきましょう。





いかがでしょう?
CSSの知識があれば、数分程度の作業だということがわかると思います。

クラス名しか書いていないんですよ。
CSSデザイナーって、すごい便利だと思いませんか?


CSSについては、ページを作りながら学んでいきましょう。
どんどんレイアウト構造が複雑になっていきますが、使用頻度の高いプロパティはすぐ覚えられると思いますので。



それでは、第7回の投稿をお待ちください。
明日になるかな。



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

Dreamweaver CC 2015 基礎編パート1



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



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

筆者:
Creative Edge School Books