DreamweaverとBootstrapで作るレスポンシブページ 第2回 「Jumbotronでヒーローエリアに画面いっぱいの写真を配置」

by Naoki Matsuda

Posted on 08-17-2015

連載

DreamweaverとBootstrapで作るレスポンシブページ

この連載では、DreamweaverのBootstrap機能を使って素早く効率的にページをオーサリングするチュートリアルを紹介します。

前回の第1回 「Jumbotronを使ったヒーローエリアのレイアウト」では、BootstrapのJumbotronコンポーネントを使ってヒーローエリアのレイアウトまでを行いました。

今回は、そのヒーローエリアに背景画像を加え、独自のスタイルを適用してビジュアルをカスタマイズしていきましょう。

__
Dreamweaver体験版
ダウンロード

__
チュートリアル
ビデオを視聴

Adobe Stock でイメージに合った写真を探す

ページそのものをアピールするべきヒーローエリアですから、大きく美しいキャッチーな画像を背景画像として表示させたいですね。
Dreamweaverのアップデートと同時にローンチされたアドビのストックフォトサービス「Adobe Stock」を使って、このヒーローエリアの写真を探してみましょう。

Adobe Stock

Creative Cloud ライブラリと連携できるストックフォトサービス「Adobe Stock」

「coffee」と検索して見つかった以下の写真を使ってみます。この写真を最終的に使うかどうかはまだ検討中ということにしますので、まずは「プレビューを保存」でウォーターマークの入った写真をダウンロードして使用します。

「coffee」で検索した結果

「coffee」で検索した結果。CCライブラリ、また自分のマシンに保存できる。

Creative Cloud ライブラリと連携されたサービスなので、自分のCCライブラリの中にダウンロードすることが可能です。

Adobe StockとCreative Cloud ライブラリとの連携

ちなみにCCライブラリに保存すれば、PhotoshopやIllustratorなどでは[ライブラリ]パネルからファイルの存在自体を意識することなく写真を取り出して使用・購入することができます。(ストック写真を探す → プレビュー素材をダウンロード → ファイルを使う → またサイトに行って購入、といったフローが短縮でき便利ですよ。)

Photoshopのライブラリーパネル

**Dreamweaverはこの[ライブラリ]パネルがまだ実装されておらず、Adobe Stockと直接連携することはまだできません。**次のアップデートは連携されることを期待しましょう。
なので、今回は「デスクトップに保存」を選び、自分のマシンにダウンロードして使用します。

保存したプレビュー写真は定義してあるサイトフォルダーの中にコピーまたは移動させておきましょう。
そしてJumbotronコンポーネントに背景画像を指定するオリジナルのスタイルを追加します。

Jumbotronをカスタマイズするオリジナルのスタイルを用意

まず、オリジナルのスタイルを記述するcssファイルを用意します。
**[CSSデザイナーパネル]の[+]ボタンを押して「新規 CSS ファイルを作成」**を選択。任意のファイル名を付けて保存します。今回は「style.css」として保存しました。これよりオリジナルでカスタマイズするスタイルはすべてこちらのCSSファイルに記述していきます。

用意したstyle.cssに、以下のスタイル.jumbotron--coffeeを追加します。

.jumbotron--coffee {
    background: url(images/AdobeStock_61946367_WM.jpg) 0 0 no-repeat;
    background-size: cover;
    height: 100vh;
    min-height: 400px;
    color: #fff;
}

background-size: cover;で、背景画像の表示サイズをJumbotron全体に入るように調整しています。
また、height: 100vh;でJumbotronの高さがブラウザの高さちょうどになるように指定しています。

Jumbotronの中に挿入したcontainerには、以下のスタイル.jumbotron__contentを用意します。

.jumbotron__content {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

これでJumbotron内の見出しやテキスト部分が縦中央に配置されます。

用意したオリジナルのclassを追加する

Jumbotronコンポーネントに上記で用意したオリジナルのスタイルを適用しましょう。
Dreamweaverのライブビューからは、任意のブロックに対し、classを簡単に追加することができます。

classを追加

class="jumbotron jumbotron--coffee"というマルチクラスで、Bootstrapのスタイルとオリジナルのスタイルの両方を適用させることができました。
同様にcontainerには、.jumbotron__contentを追加します。

今回はここまで。
次回はJumbtronの中にロゴを入れ込んだり、ボタンをGhostボタンにしたりと調整していきます。

カスタマイズTips bootstrap.cssは編集・変更しない

なお、bootstrap.cssを編集・変更することはやめておきましょう。以下の様な理由が挙げられます。
(そもそもDreamweaverによって用意されたbootstrap.cssは読み取り専用であり編集不可になっていますが)

カスタマイズTips オリジナルのclass名には接頭辞を付けるのもオススメ

今回の例で言えば、Jumbotronのスタイルをカスタマイズする際に独自に.jumbotron--coffeeというclassを作りました。
Bootstrapの.jumbotronそのもののスタイルを上書きするような対処を行うと、こちらもオリジナルでのカスタマイズ箇所が分かりづらくなるなどのデメリットがあります。

オリジナルでスタイルを加える場合、独自のclassを用意し、しっかりと命名規則を設けておくといいでしょう。
以下のように「接頭辞 + コンポーネント名 + 種類や状態の種別」という風に決めておくと、誰が見てもどういったコンポーネントをカスタマイズしているかが分かりやすくなります。「種類や状態の種別」の部分をさらに「見た目の違い」や「大きさの違い」などでclassを分けてもよいでしょう。カスタマイズ用のclassの命名規則の例

接頭辞には、案件やプロジェクトに応じて任意のものを付けてください。
コンポーネント名は、Bootstrapのコンポーネントと同じclass名にしておくと分かりやすくなります。
種類や状態も任意で付けてよいでしょう。サイズ違いは「xs」「sm」「md」「lg」のように、Bootstrapと合わせておくと分かりやすくなります。

__
Dreamweaver体験版
ダウンロード

__
チュートリアル
ビデオを視聴

Topics: クリエイティブ, UI/UX & Web

Products: