コードを打たずにページを見たまま編集・作成 第3回:CSSでレイアウトを整えよう

BY 公開

コードを打たずにページを見たまま編集・作成

Dreamweaver CC(2014年06月公開)

前の記事

前回は、[ライブビュー]で新しいタグを挿入したり、タグを複製したりして、コンテンツ(バナー群)を追加しました。今回は、[CSSデザイナー]パネルなどを使ってCSSを適用し、コンテンツのレイアウトを整える方法を解説します。

Dreamweaver CC の体験版をダウンロード    サンプルファイルをダウンロード

作成するレイアウト

前回、ボタン画像やバナー画像を追加しました。これらを下図のように、「畑の様子」コンテンツの右横に配置してみましょう。

Dreamweaver CCで前回作業したindex.htmlを開いてください。なお、前回の作業を行ったサンプルファイル「toshinai_farm03.zip」も用意しています(上記「サンプルファイルをダウンロード」ボタンから入手できます)。

コンテンツを横2列に並べる

見出し画像を変更する

「畑の様子」コンテンツの見出し画像は、このままだと横幅が長過ぎるので、短い画像に変更します。

「畑の様子」と書いてある画像をクリックし、[プロパティ]パネルの「Src」横のフォルダーアイコンをクリックします。

[イメージソースの選択]ダイアログボックスが開くので、サンプルファイルの中からhead_farm.pngを選択し、[OK]ボタンをクリックします。見出し画像の横幅が短くなりました。

画像をクリックすると、左上に[ライブビュープロパティインスペクタ]と呼ばれる青い部分が出てきます。画像の変更は、この[HTML属性を編集](横三本線のアイコン)をクリックすると表示されるダイアログボックスからも行えます(詳しくは、第1回を参考にしてください)。どちらでも同じことができるので、使いやすい方で作業してください。

横2列に並べる

ここからは、[CSSデザイナー]パネルを利用して、CSSを調整します。[CSSデザイナー]パネルは、パネルの横幅によってレイアウトが変化し、広げていくと左右に分割されます。この左右に分割された状態で利用すると使いやすいでしょう。

「畑の様子」コンテンツの横幅を狭くして、右横にバナー群を配置できるように調整します。

写真の辺りをクリックし、[タグセレクター]から「section#farm.clearfix」をクリックして選択します。

「畑の様子」コンテンツを囲むように青枠が出たら、[CSSデザイナー]パネルの[プロパティ]ペインで、「レイアウト」のwidthプロパティを700pxに変更します。

また、floatプロパティで「Left」を選択します。

「畑の様子」コンテンツが少し左側にはみ出してしまうので、marginの左側のmargin-leftプロパティを110pxにします。

※marginやpaddingを指定する際、ボックスの中央が鎖マークになっていると、1カ所指定した値が上下左右すべてに適用されてしまいます。今回のように個別の数値を指定する場合は、鎖マークをクリックして解除してから、数値を入力します。

コンテンツの崩れを直す

バナー群を右側に配置できましたが、「畑の様子」コンテンツのレイアウトが崩れてしまっているので、余白を調整します。

写真をクリックし、[タグセレクター]から「div.blogitem」をクリックします。[CSSデザイナー]パネルを見ると、paddingのpadding-leftプロパティには90pxと指定されています。

90pxの下辺りにマウスカーソルを持ってくると、「CSSプロパティを削除」アイコン(バケツアイコン)が表示されるので、これをクリックして90pxの値を削除します。

写真が3つ繋がった状態になってしまうので、marginのmargin-leftプロパティに10px、margin-rightプロパティに30pxを指定して間隔を取ります。

これで収まりましたが、文字がフッター部分に重なってしまっています。floatプロパティを適用すると高さの計算ができなくなるため、表示が崩れてしまいます。この時点で修正してしまいましょう。

黒いフッター部分をクリックし、[タグセレクター]から「footer」をクリックします。

[CSSデザイナー]パネルのclearプロパティでbothを選択します。これで、フッターの領域ではフロートが解除されるので、きちんとした表示に変化します。

プロパティの数値を計算式で記述可能

[CSSデザイナー]パネルでプロパティの値に数字を指定する際、計算式で記述することも可能です。例えば、widthに「500px/2」と入力してEnterキー(Returnキー)を押せば、250pxと入力されます。ちょっとした計算が必要な場合は、直接計算式のまま入力できるので便利です。

また、数値を少しだけ変化させる場合は、数値にマウスカーソルをのせると、指のカーソルの左右に矢印が表示されます。この状態で左右にドラッグすると、数値を1ずつ変化させることが可能です。

バナー群の位置や見た目を調整する

続いて、バナー群の位置や見た目を調整していきます。

バナー群の位置を調整する

「Online Shop」バナーをクリックし、[タグセレクター]から「aside」をクリックします。

[CSSデザイナー]パネルを見ると、asideタグに対するスタイルの定義は、normalize.cssに記述はありますが、レイアウトなどのスタイルを担っているstyle.cssには記述がありません。この場合、style.cssに対して初めて、asideのスタイルを定義することになります。

[CSSデザイナー]パネルの[ソース]ペインから「style.css」を選択し、[セレクター]ペインから「セレクターを追加」(「+」アイコン)を選択します。

最初は、「body main aside」というようにbodyを頂点としたセレクター候補が表示されますが、上方向のカーソルキーを2回押します。1回押すごとに、セレクター候補がひとつずつ簡略化されていきます。逆に詳細にしたい場合は、下方向のカーソルキーを押します。

上方向のカーソルキーを2回押してセレクター候補が「aside」の状態になったら、Enterキー(Returnキー)を押します。

[CSSデザイナー]パネルの[プロパティ]ペインで、widthプロパティに242px、marginのmargin-topプロパティに90px、margin-rightプロパティに110pxを指定し、floatプロパティはrightを選択します。

バナー群全体が適切な位置に収まりました。あとはそれぞれのバナーを調整していきます。

バナー群の見た目を調整する

各画像の下側に影を付けましょう。

まずは、最初の2つのボタン画像です。「Online Shop」バナーをクリックしたら、[タグセレクター]でliをクリックします。

[CSSデザイナー]パネルの[プロパティ]ペインで、marginのmargin-bottomプロパティに20pxを指定します。

[プロパティ]ペインの「ボーダー」に移動して、borderの左から4番目のアイコンを選択し、widthプロパティに5px、styleプロパティにsolid、colorプロパティとして#CCCCCCを指定します。これでバナーの下に少しだけ影のようなものが付きました。

続いて、「野菜料理レシピ」画像をクリックし、[タグセレクター]からpをクリックします。

[CSSデザイナー]パネルの[ソース]ペインから「style.css」を選択し、[セレクター]ペインから「セレクターを追加」(「+」アイコン)を選択します。「aside p」になるように上方向のカーソルキーを1回押して、Enterキー(Returnキー)を押して確定します。

[CSSデザイナー]パネルの[プロパティ]ペインで、marginのmargin-bottomプロパティに20px、borderで左から4番目のアイコンを選択し、widthプロパティに5px、styleプロパティにsolid、colorプロパティとして#244069を指定します。これで完成です。

今回は、HTMLファイルとCSSファイルの両方を編集しています。保存する場合は、両方が一度に保存できる「すべてを保存」で保存すると便利です。

3回に渡り、Dreamweaver CC 2014を使ったWebサイトの制作方法を解説しました。以前のDreamweaverなら[コードビュー]でコードを打たないと上手く操作できなかったり効率が悪かったりする、というところも[エレメントクイックビュー]を使うことで効率的に操作できるようになっています。

特に[ライブビュー]でそのまま編集できるため、ブラウザーでいちいち確認しながらコードを書いていくという手間を削減することができるのは、大きな効率化とわかりやすさに繋がるでしょう。

今回の連載で紹介できなかった機能もたくさんあります。他にも掲載されている記事などを参考に、Dreamweaverを使って、素敵なWebサイトを制作していってください。

  TAGS

  AUTHOR

関口 和真

株式会社コムセント / 最高技術責任者(CTO)/ PHPを利用したフルスクラッチシステムの作成、CMSのカスタマイズ、Dreamweaver・Photoshopなどを利用したPCサイト、スマートフォンサイトの制作およびJavaScriptを利用したフロントエンド開発を行うほか、システムの運用保守に携わる。大学講師や専門学校講師を兼任。著書に『DreamweaverレッスンブックCC対応』(ソシム社)など