Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

サンプルで学ぶDreamweaver CS6!「レスポンシブWebデザイン」に挑戦してみよう

マルチデバイス対応のサイト制作者必見!Dreamweaver CS6概説

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/05/16 14:00
目次

Dreamweaverを使った「レスポンシブWebデザイン」作成の流れ(可変レイアウトの作成編)

 可変グリッドを使って、次のような画面設計を行っていきます。

 開いている「index.html」を確認すると、画面下の(モバイル)が選択されています。

 その右側の、さらに右側のをクリックすると、[新規ドキュメント]ダイアログボックスで設定していたグリッドを確認できます。

 モバイルサイズに戻します。画面上部の緑の部分にカーソルをおき、ウィンドウ下部のタグセレクターの<div#LayoutDiv1>をクリックします。

 [プロパティ]パネルの[ID]には「LayoutDiv1」と入力されていますが、これを「header」に変更します。

 また、画面上部の緑の部分にカーソルをおき、command+Tキーを2回押してクイックタグ編集を表示させます。

 divを削除し、headerと入力してenterキーを押します(<div id="headder">を<header id="header">に変更します)。

 この操作で、次のように変わりました。

<div id="LayoutDiv1">...</div>

<header id="header">...</header>

 画面上部の緑の部分にカーソルをおき、ウィンドウ下部のタグセレクターの<header#header>をクリックし、右矢印キーを押します。この操作でコードビューでは</header>の右側にカーソルが移動します。

 [挿入]パネルを開き、[可変グリッドレイアウトのDivタグを挿入する]ボタンをクリックします。

 [可変グリッドレイアウトのDivタグを挿入する]ダイアログボックスが開きます。

 [ID]に「main」と入力し、[OK]ボタンをクリックします。

 同様の手順で可変グリッドレイアウトのDivタグを2つ挿入し、それぞれのID名を「sub」「footer」に設定します。

 新しく追加した3つのdiv要素を、クイックタグ編集を使って、それぞれ「article」「aside」「footer」に変更します。

div要素とid属性
要素名 id属性
header header
article main
aside sub
footer footer

 ソースコードに切り替えると、次のように記述されています。

<div class="gridContainer clearfix">
 <header id="header">追加の可変グリッドレイアウトの Div タグの挿入パネルを使用。 メモ : すべてのレイアウト Div タグは、"gridContainer" div タグ内に直接挿入する必要があります。 ネストされたレイアウト Div タグは現在サポートされていません。</header>
 <article id="main">これは、レイアウト Div タグ "main" のコンテンツです。</article>
 <aside id="sub">これは、レイアウト Div タグ "sub" のコンテンツです。</aside>
 <footer id="footer">これは、レイアウト Div タグ "footer" のコンテンツです。</footer>
</div>

 「sozai」フォルダーの「sozai-html.txt」を開き、コードビューに切り替えて、それぞれの要素内にコピー&ペーストします。body要素には、<body class="concept">のようにclass属性を設定しておきましょう。

 デザインビューに切り替えると、次のように見えます。

 cssフォルダー内の「base.css」を読み込みます。次のように「boilerplate.css」、「base.css」、「rwd.css」の順番に読み込まれるように設定します。

<link href="css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/base.css" rel="stylesheet" type="text/css">
<link href="css/rwd.css" rel="stylesheet" type="text/css">

 ドキュメントツールバーの[ライブ]ボタンをクリック(またはoption+F11キー)してライブビューに切り替えます。

 読み込んだ「base.css」を適用してレイアウトが調整され、次のように表示されます。

 command+shift+Iキーでガイドやグリッドを消すことができますが、ここでは表示したまま進めましょう。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 鷹野 雅弘(タカノ マサヒロ)

     株式会社スイッチ  Webサイトの構築やコンサルティングを中心に、WebやDTPに関しての講演やトレーニングのほか、書籍の企画や編集、スクールなどのカリキュラム開発も手がける。  2005年からCSS Niteを主宰。日本全国、および海外に展開し、260回を超える関連イベントを通し、のべ36,...

  • 松田 直樹(マツダ ナオキ)

     株式会社まぼろし  当初身を置いていたゲーム業界にて、デザイナーにPhotoshopを教えてもらい、デザインの持つ力に驚愕した後、Web業界に転身。  2008年に株式会社TSUDUMIを設立、現在に至る。テーマパークの開設運営で培った企画力を生かし、デザイン、マークアップ、プログラムといった...

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5