Dreamweaverで覚える最新Web開発ワークフロー: Sass＆ライブビューでBootstrapをカスタマイズ

連載

Dreamweaverで覚える最新Web開発ワークフロー

Dreamweaver CC 2017リリースが公開されて、CSSプリプロセッサーが正式にサポートされ、SassからCSSをコンパイルできるようになりました。今回は、Sassとライブビュー機能などを使ったBootstrapの便利なカスタマイズ方法をご紹介します。

SassのBootstrapを入手する

Bootstrapは、Dreamweaverに内蔵されています。しかし、それはCSSの状態です。
CSSプリプロセッサーを使ってBootstrapを編集するには、まずBootstrapの公式サイトからSassかLESSで記述されたコンパイル前のファイルをダウンロードします。
今回はSassを使いたいので、Bootstrapの公式サイト「Getting started」から、「Download Sass」をクリックし、BootstrapのSass版のソースコードをダウンロードしましょう。

http://getbootstrap.com/getting-started/

Getting startedページの「Download」からは、コンパイル済みのCSSと、LESS版、Sass版のBootstrapをダウンロードできる

新しいサイトを定義

始めに、Sass版のBootstrapを配置するための新しいサイト定義をDreamweaverに作成しましょう。
「サイト」メニューから「新規サイト」をクリックしてサイト設定ダイアログを開き、任意のサイト名とファイルを配置するローカルフォルダーを定義します。
続いて、ダイアログパネル内の「CSS プリプロセッサー」の項目に移動して、「ソースと出力」も設定しておきます。ここでは、出力フォルダーに「css」フォルダーを用意し、ソースフォルダーには「sass」フォルダーを作成しておきます。

サイト設定ダイアログからSassの入力と出力フォルダーを指定

定義したサイトの中にSassファイルを追加

Bootstrapの公式サイトからダウンロードしたSassのソースコードを解凍しましょう。解凍したソースコードのフォルダー階層は下記のようになっています。

bootstrap/
├── assets/
│ ├── fonts/
│ ├── images/
│ ├── javascripts/
│ └── stylesheets/
│ 　　　├── _bootstrap-compass.scss
│ 　　　├── _bootstrap-mincer.scss
│ 　　　├── _bootstrap-sprockets.scss
│ 　　　├── _bootstrap.scss
│ 　　　└── bootstrap/
├── lib/
├── tasks/
├── templates/
└── test/

assetsフォルダーの下のstylesheetsフォルダーの中に、「_bootstrap.scss」と「bootstrap」フォルダーが入っていますね。
このファイルとフォルダーを、先ほどDreamweaverのサイト定義で指定した「sass」フォルダーにコピーしましょう。

ただし、このままではCSSが生成されません。bootstrapのファイル名がパーシャルになっているためです。
パーシャルとは、SassやSCSSファイルの名前の先頭に「_」が付いたファイルです。CSSが生成されない特性を生かし、別のファイルに読み込むために使うファイルのことです。

解凍した状態のファイル名「_bootstrap.scss」はパーシャルですので、ファイル名から「_」をとった「bootstrap.scss」に名前を変更しましょう。ファイルパネル内でファイル名をクリックすると、ファイル名を変更できる状態になります。
名前を変更すると「css」フォルダー内に「bootstrap.css」が生成されるはずです。確認してみてください。

パーシャルのファイル名を変更すると、bootstrapのCSSが出力された

もしCSSが生成されなかったら、「sass/bootstrap.scss」を開いて、改行などの変更をコードに加えてから保存してみてください。

ライブビューを使って見た目を作る

サンプルデザイン

この記事では、Adobe Max Japan 2016のセッションで使用したサンプルサイトの、デザインの購入エリアを題材とします。
HTMLをある程度用意した状態から始めます。また、細かいCSSの指定方法などは省きますが、Sassを使ってコーディングするためのポイントを解説します。クラスの付与やボタンの追加などはライブビューを使います

この記事で扱うサンプルの完成状態。「購入する」ボタンのあるエリアの作成に、Sassとライブビューを使用

以下は作業をはじめる前のHTMLコードです。div内のタグにクラス名は付けてありません。

<div>
  <div class="container text-center">
    <h2><img src="images/logo.png" alt="MAX Energy Plus"/></h2>
    <p>手馴染みの良いマテリアル感<br>
手のひらに収まりの良いサイズ感<br>
iPhone6 を約1.5回充電可能</p>
    <p>¥2,000<small>（税込）</small></p>  
  </div>
</div>

ライブビューとDOMパネルを使って、クラス名を追加

ライブビューやDOMパネルを使うとHTML要素にクラス名を簡単に追加できます。まずはライブビューを使ったクラスの付け方です。
クラス名を付けたい要素をライブビューからマウスで選択します。すると選択した要素の左上に要素名と+ボタンが表示されます。クラス名を追加するには、+ボタンをクリックして表示されたフィールドにクラス名を入力していきます。

クラスを追加したい要素をクリックし、左上の+ボタンからクラス名を追加。サンプルでは、変化が分かりやすいようにスタイルを用意した状態から始めている。

DOMパネルでもクラス名を簡単に追加できます。DOMパネルからクラス名を追加したい要素を選択し、ダブルクリックします。すると入力欄が表示されるので、CSSのセレクタのようにクラス名を追加していきましょう。要素の高さがない場合など、ライブビューで上手く要素を選択できない場合はこちらの方がおすすめです。

DOMパネルからもクラスを追加できる。追加したクラスはライブビューに即座に反映される

ボタンの要素を追加する

用意したHTMLに購入ボタンを追加しましょう。追加するのは、ボタンを囲む要素とBootstrapのボタンです。

DOMパネルはクラス名などの追加だけでなく、要素の追加なども簡単です。DOMパネルで追加したい前の要素を選択し、選択した要素の左側にある+ボタンをクリックして「後ろに挿入」を選択します。
追加された要素の初期値は「div」になっているのでp要素に変更後、tabキーを押すか、マウスで右側のクラス名の入力欄を選択し、新しいクラスを追加しておきましょう。
追加したp要素をライブビューで確認すると「これは、レイアウト P タグのコンテンツです」という文言が仮で入っています。追加したp要素を選択し、文言を削除します。

DOMパネルから要素を追加する。+ボタンをクリックすると、要素を挿入する位置を選択できる

続いて、新しく追加したp要素の中にBootstrapのボタンを追加します。
挿入パネルの上部にあるプルダウンが「Bootstrap のコンポーネント」になっているのを確認し、「Buttons」の▼ボタンをクリックし、「Primary」を選択します。ライブビューに前や後ろ、ネストなどのアイコンが表示されるので「ネスト」を選択するとp要素の中にボタンが挿入されます。

DreamweaverのBootstrapの機能を使ったボタンの挿入

Sassを使って見た目を作る

追加したBootstrapのボタンの見た目をSassを使って整えましょう。まずは、見た目を記述するためのパーシャルのSCSSファイルを作成します。
[ファイル]->[新規]から「SCSS」を選択し、名前の先頭に「_」を付けてファイルを作成します。今回はファイルの名前を「_section.scss」とします。
ファイルの保存場所はSassフォルダーの中に入れれば、どこでも構いませんが、Bootstrapのファイルと見分けが付くように、Sassフォルダーの中に「modules」フォルダーを作成し、その中に新しいパーシャル用のファイルを置くといいでしょう。

ファイルを作成したら、bootstrap.scssファイルを開き、「@import “[ディレクトリ名]/[パーシャルのファイル名]”;」を追記します。
modulesフォルダーに入っている_section.scssを読み込むなら、記述は「@import “modules/section”;」となります。
この際、ファイル名の先頭の「_」と拡張子を記述する必要はありません。

bootsrap.scssの読み込みの例

// My Styles
@import "modules/section";
@import "modules/footer";
@import "modules/header";
@import "modules/hero";
@import "modules/menu";

Sassの書き方は、連載の現場で役立つ実践Sass | Adobe Creative Stationを確認しましょう。

ライブビューとSassファイルの分割表示

DreamweaverでSassを扱う時は、直接Sassファイルに記述していくことになります。ただしHTMLとSassのファイルを行き来していたのでは手間がかかってしまうので、ファイルを横に並べましょう。
HTMLファイルとSassを記述するファイルを2つ開いた状態で、[ウィンドウ]->[整列]->[左右に並べて表示]を選択します。
この状態だと、HTML要素の確認やクラス名などの取得が容易になり、Sassが書きやすくなります。

ライブビューとSCSSファイルを並べることで、Sassが書きやすくなる

実際にコードを記述する

それでは、実際にSCSSを書いてみます。
Bootstrapのボタンに「purchase__button」クラスをライブビューから指定してから、SCSSに「purchase__button」クラスのコードをを書いていきます。

Bootstrapのボタンに「purchase__button」クラスを追加した

SCSSには、ボタン用のCSSをそのまま記述することもできますが、Sassの特性を生かしてレスポンシブ対応もしてみましょう。
まずは、メディアクエリーを切り替えるmixinを用意します。mixinの変数には、Bootstrapに用意されているブレークポイントの変数を流用します。細かい説明を省きますが、下記がメディアクエリーを切り替えるmixinです。

@mixin mq($level, $range: max) {
  $screen: 0;
  $px: 0;
  @if $range == min {
    $px: -1;
  }
  @if $level == sm {
    $screen: ($screen-sm + $px);
  } @else if $level == md {
    $screen: ($screen-md + $px);
  } @else if $level == lg {
    $screen: ($screen-lg + $px);
  }
  @media screen and (#{$range}-width:#{$screen}){
    @content;
  }
}

このmixinは、@includeで呼び出し、Bootstrapで使われているsm, md, lgなどの命名規則ルールを引数にいれることで、メディアクエリーを切り替えることができます。
下記のコードはこのmixinを使って書いたSCSSの例です。

.purchase__button {
  display: block;
  margin: 48px auto 0;
  max-width: 315px;
  @include mq(lg) {
    margin-top: 30px;
  }
}

SCSSを保存すると自動的にCSSにコンパイルされます。下記のようなコードが生成され、その下のが像のように見た目が変わりました
Sassの機能のおかげで効率良くCSSを記述できました。

.purchase__button {
　　display: block;
　　margin: 48px auto 0;
　　max-width: 315px; 
}
　　@media screen and (max-width: 1200px) {
 　　.purchase__button {
  　　margin-top: 30px;
　　}
}

SCSSコードを記述した後のライブビューの見た目

クラスが、どこのSassに記述してあるのか確認する

特定のクラス名などをSassファイルから探す時、クラス名が分かっていれば、Dreamweaverの検索機能を使ってクラスを探すことができます。しかし、複数の結果がヒットした場合、検索結果の精査に手間がかかります。

Sassなどのプリプロセッサーを使う時は、「ソースマップ」を使うと便利です。ソースマップは、コンパイル前のクラスなどがどこに記述されているかを記したファイルです。
Dreamweaverのリアルタイムプレビュー機能と組み合わせると、ブラウザの開発ツールから利用できます。

ソースマップを生成するには、「サイト」→「サイトの管理」から編集したいサイト名をダブルクリックしてサイト設定ダイアログを開き、「CSS プリプロセッサー」→「一般」を表示します。「SASS/SCSS」の項目にある「ソースマップを生成」にチェックを入れましょう。

サイト設定から「SASS/SCSS」の「ソースマップの生成」にチェックを入れる

Sassのファイルを保存すると、コンパイルされたCSSと同じディレクトリにmapファイルが生成されます。試してみてください。

後は「ファイル」→「リアルタイムプレビュー」からブラウザを立ち上げ、開発ツールからHTMLを選択してみましょう。Chromeの開発ツールであれば右側の「Styles」のエリアに、選択しているHTML要素のCSSの一覧が表示され、Sassのファイル名と行番号が表示されます。
このようにしてソースマップを使い、Sassの記述を確認できます。

ソースマップを使用すると開発ツールのCSSの箇所にSCSSファイルの名前と行番号が表示される

ライブビューとSassコードを並べて作業すると、ライブビューはHTMLの編集、SassはCSSの管理と切り分けて使うことができます。
さらにリアルタイムプレビューとソースマップを使うことで、Sassの修正作業も楽になります。
これらの機能をうまくワークフローに取り入れて、Web制作を効率化していきましょう。