Dreamweaver CCのDOMパネルとCSSデザイナーで作るFlexboxベースのWebページレイアウト
はじめまして。ウェブ制作系のセミナー講師をしている森和恵と申します。この記事では、Dreamweaver CCのDOMパネルとCSSデザイナーパネルを組み合わせて、Flexboxレイアウトを作る工程をご紹介します。
先日開催されたDreamweaver 20周年イベント『CSS Nite LP51「Reboot Dreamweaver」』でお話した内容からの抜粋です。
最近のわたしのワークスペース
Dreamweaver CC 2017リリースでは、プロパティパネルが非表示になるなど、標準ワークスペースに変化がありました。昔からDreamweaverを使っている人は、驚いたのではないでしょうか？ちなみに、[ウインドウ]－[プロパティ]メニューから表示が可能です。
わたしは右利きなので、ページ編集で操作の中心となるドキュメントウインドウを右側に持ってきています。各パネルは左側へ移動しました。表示しているパネルはよく使うものばかりです。今回使うCSSデザイナーとDOMパネルは連携して使うことが多いので、２つのタブを並べてあります。
ドキュメントウインドウは、ライブビューをメインに使っています。ソースコードを確認しつつ作業する場合は、上側にライブビューを下側にコードビューを配置して分割ビューに切り替えています。このように、自分が使いやすく並べたワークスペースをカスタムワークスペースに保存しています。
今回作成するレイアウトについて
今回は、３つのボックスを横に並べた３カラムレイアウトを作ります。CSSでカラムを横に並べる方法として、floatプロパティを用いたフロートレイアウトが主流ですが、今回はブラウザの対応状況も落ち着き、現場でもよく使われるようになった「display:flex」を用いるフレックスボックス（フレキシブルボックス）レイアウトを使います。
フレックスボックスレイアウトは比較的シンプルなコードで書けますが、古いブラウザの中には今回紹介するコードに対応していないものもありますので、実際にお仕事で利用する場合は、フレックスボックスレイアウトのルールについて詳しく学ぶことが必要です。
今回は、以下の２つのCSSコードを利用します。
- ３つのボックスを囲む外側のボックスに
display:flexを指定すると、内側のボックスが横に並びます。もちろん、内側にあるボックスの幅の合計が外側のボックスの幅を超えないようにします。 justify-content:space-aroundを指定することで、内側にあるボックスが均等に並びます。
今回の操作をすべて終えると、下記の画像のようなレイアウトが完成します。
Dreamweaverでレイアウトを作るには、CSSデザイナーパネルから始める手順（CSSのセレクターを先に作る方法）とDOMパネルから始める手順（CSSのセレクターを後で作る方法）があります。この記事では、まず内側のボックスをCSSデザイナー→DOMパネルの順で作成し、続いて外側のボックスをDOM→CSSデザイナーパネルの順で作成します。
CSSデザイナーパネル→DOMパネルの順で内側のボックスを作る
先に紙やソフトでページの「絵」を描いてから、それを確認しつつコーディングする制作方法をよく見かけます。つまり、組むデザインとしてCSSのコードが先に決まっていて、それを元にページを作るということです。
その手順に合わせて、CSSデザイナー→DOMパネルの順でレイアウト枠を作ってみます。
この場合のポイントは、CSSデザイナーパネルでCSSを直感的に組めることと、HTMLタグにCSSを指定する時に、先に作っておいたセレクターを簡単に選べることです。
１）内側のボックスのスタイルを作る
CSSデザイナーパネルで、内側のボックスのスタイルを作ります。CSSデザイナーパネルは、基本的に上から順番に進めます。まずは、ソース指定から。今回は、[ページで定義]を選び、<style>タグでページに埋め込む方法をとりました。
次に、セレクターを追加します。[＋]をクリックし、クラスセレクター.boxを追加しました。
最後にプロパティでルールを指定します。[セットを表示]のチェックを外すと全てのプロパティが表示されます。
カテゴリアイコンから[レイアウト]を選び、width:300pxとheight:200pxを指定します。次に、カテゴリアイコンから[背景]を選び、background-color:#F1F188を指定します。カラーコードの指定は[背景色の設定]アイコンからカラーパネルを出して、色をみながら直感的に指定します。おなじみの#が付いた16進数カラーコードの他に、RGBaでも指定できます。
この作業で、以下のようなコードが生成されました。
２）内側のボックスを３つ、DOMパネルから作る
CSSを組んだら、次はHTMLの追加です。今回は<div class="box">という形で３つのボックスを作成します。
DOMパネルの<body>の前にある[＋]をクリックし、[子を挿入]をクリックします。<body>の子要素として<div>が追加されました（デフォルトで追記される要素が<div>なので要素名の入力は不要です）。続けて、<div>のclass属性を指定します。名前の頭文字の「b」を入力すると先に定義しておいたクラスセレクター「box」が表示されるので選びます。
ドキュメントウインドウを確認すると<div class="box">とスタイルが指定された状態でボックスが追加されました。<div>要素内には、空白にならないように「新規 div タグの内容がここに入ります」という文言が追記されています。
更にあと２つ、このボックスを追加します。DOMパネルでは、要素の複製ができます。
DOMパネルの <div.box>を右クリックし、[複製]をクリックします。すると、同じタグが下に追加されました。この作業を繰り返します。
DOMパネル→CSSデザイナーパネルの順で外側のボックスを作る
先ほどとは逆に、HTMLでページの枠組みを先に作り、後からCSSを定義することもできます。今度は、DOM→CSSデザイナーパネルの順でレイアウト枠を作ってみましょう。
この場合のポイントは、先にHTMLタグのclass属性で指定しておいたセレクター名をCSSデザイナーパネルで選べることです。
ここでは、先に作った3つのボックスを囲む外側のボックス<div class="wrapper">を追加し、クラスセレクター.wrapperにフレックスボックスレイアウトのためのプロパティを指定します。
１）外側のボックスを追加する
DOMパネルで、3つのボックス<div class="box">を選択します。このとき、[Ctrl]（Macでは[Cmd]）キーを押しながらクリックで選ぶと、HTMLタグが複数選択されます。続いて、前にある[＋]ボタンをクリックし、[折り返しタグ]を選びます。
3つのボックスを囲む形で<div>が追加されたので、続けてセレクターに.wrapperを入力します。
※クラスセレクターの「.（ピリオド）」を入力しなかった場合は補完されます。
２）外側のボックスのスタイルを作る
DOMパネルで指定したクラスセレクター.wrapperをCSSデザイナーパネルで作ります。
<div class="wrapper">を作成した直後のため、ソースコードでは<div class="wrapper">が選択状態です。そのまま、CSSデザイナーパネルのセレクターにある[＋]をクリックすると、.wrapperが自動的に入力されます。（選択中のコードにある未定義のセレクターを読み取って補完されます）
続いて、.wrapperセレクターのプロパティに、display:flexとjustify-content: space-aroundを追加します。今回は、この２つのプロパティを[…その他]カテゴリー追加します。
justiry-contentプロパティは、どのカテゴリーにもまだ登録されていないため、[…その他]のカテゴリーを使います。displayプロパティの値flexは、[レイアウト]カテゴリーから操作すると項目リストにまだ未登録なのですが、[…その他]カテゴリーから操作すると候補リストに表示されます。
Dreamweaverのバージョンが上がるにつれ、まだ未登録のプロパティや値が登録されていく予定ですが、パネルに未登録のプロパティであっても、コードヒントには表示されますので、プロパティの頭文字を入力して選んだり、値を選択項目から選ぶことができます。
またここでは、作業完了後に追記したすべてのプロパティが一覧で表示されるように[セット表示]にチェックを入れてから進めます。
[プロパティを追加]の欄にdisplayを入力し、続いてflexを選びます。次に[プロパティ追加]の欄にjustify-contentを入力し、続いてspace-aroundを選びます。
以上の作業で、以下のようなコードが追記で生成されました。
ここまでの操作ですべての作業か完成です。先に紹介した完成レイアウトと同じように作られているかを確認しましょう。
最後に
DOMパネルとCSSデザイナーを使ってレイアウト枠を組む方法が、いろいろ試してみて一番楽でしっくりくる方法でした。Dreamweaverでは、これ以外にもさまざまな方法で同様の作業をが可能です。いろんな機能を模索してみて、自分にあった方法をチョイスしてください。
今回お話した方法は、わたしがYouTubeで公開しているムービーでもご覧いただけます。今回お話しなかった、ちょっとしたTipsについてもムービー中で紹介していますので、ぜひあわせてご覧ください。