このシリーズのパート7では、CSSメディアクエリーを使用して、スマートフォンやタブレットのブラウザーで表示したときに、レイアウトを2カラムから1カラムに変更する方法を学びます。
必要な情報
注意：このダウンロードには、このチュートリアルシリーズで使うCreative Cloudライブラリおよびプロジェクトファイル一式が含まれます。パート1で使用した開始ファイルでそのまま作成を続行するか、ダウンロードしたファイルから、前パートの完了時のファイルをご利用ください。
入門
このチュートリアルシリーズのパート7では、DreamweaverでCSSメディアクエリーを使用する方法について説明します。ゴールは目前です。あとは、2ページ目を作成して、1カラムレイアウトのBayside Beat webサイト（図1を参照）をタブレットおよびデスクトップに適した2カラムのデザインに修正する作業が残っているだけです。
解像度が大きい画面で別のレイアウトを表示するには、CSSメディアクエリーを使用します。メディアクエリーは、ビューポートの最小幅または最大幅といった特定の条件にもとづいて各種スタイルルールをテストしてから、ブラウザーで表示します。複雑にならないように、ここではメディアクエリーを2つだけ作成します。1つは画面の幅が700px以上のときに2カラムレイアウトでページを表示するもので、もう1つは画面の幅が900px以上のときに画像に回り込むようにテキストを流し込んで表示するものです。このパートの最後まで進むと、ホームページの表示は図2のようになります。
作業の過程で、位置(position)を絶対位置(absolute)にする際の問題を回避する方法も学びます。しかしまず、まだスタイルが設定されていない2ページ目での作業に取りかかります。
2ページ目のスタイル設定
外部スタイルシートを使用することの利点は、スタイルシートがリンクされているすべてのページにスタイルの変更が即時に適用されることです。スタイルシートをsights.htmlにリンクして、2ページ目のナビゲーションメニューを更新します。
- ファイルパネルでsights.htmlをダブルクリックしてドキュメントウィンドウで開きます。
- CSSデザイナーに切り替えて、ソースペインの左上部にあるプラスボタン（+）をクリックし、「既存のCSSファイルを添付」を選択します（図3を参照）。
- 開いているダイアログボックス内の「参照」ボタンをクリックして、stylesフォルダーのresponsive.cssに移動します。「OK」（Windows）または「開く」（macOS）をクリックしてから、「OK」をクリックして最初のダイアログボックスを閉じます。
スタイルシートを添付すると、直ちにページの体裁が変わります。Dreamweaverは、スタイルにAdobe Edge Web Fontsが使用されていることも検出して、ソースコードにこのフォントをダウンロードするためのコードを挿入します。
- ナビゲーションメニューはこの時点ではまだ順序なしリストの外観のまま表示されています。DOMパネルで、ul要素を選択します（headerおよびnav要素にネストされています）。ul要素をダブルクリックして、右側のフィールドに#navlinks .displayedを入力します。IDとクラスの両方のコードヒントがポップアップ表示されます（図4を参照）。
ナビゲーションメニューのスタイルは再設定され、最初の見出しと後続の段落の前面に絶対的な位置で配置されます。ライブビューが1000pxより広い場合、半透明の背景がwrapperの<div> をはみ出ますが、気にする必要はありません。2カラムのレイアウトでは非表示になります。
- DOMパネルで
ul要素を展開してから、2番目のli要素を展開し、中にネストされているa要素を選択します。ライブビューでもSIGHTSリンクが選択され、正しい要素を選択したことを確認できます。
DOMパネルでa要素をダブルクリックし、それにthispageクラスを割り当てます（図5を参照）。
Enter／Returnキーを押して編集を確定すると、このクラスがエレメントディスプレイにも表示され、2番目のリンクの色が変わります（図6を参照）。
- ナビゲーションメニューを完成させるには、トリガーリンクとJavaScriptファイルを追加する必要があります。そのための方法はいくつかありますが、ここでは作業中のDOMパネルで続きを進めます。
ドキュメントウィンドウでindex.htmlをアクティブなページにして、DOMパネルでh2 #menulinkを右クリックし、コンテキストメニューから「コピー」を選択します（図7を参照）。
- sights.htmlに戻り、DOMパネルで
nav要素を選択し、右クリックして「子としてペースト」を選択します。
注意：「子としてペースト」ではなく「ペースト」をクリックすると、トリガーリンクはnav要素の兄弟として（つまり、HTMLの同じ階層に）挿入されるため、DOMパネルのulの後に配置されることになります。しかし、absoluteにより絶対位置に指定された順序なしリストは、通常のドキュメントフローから除外されているため、ライブビューでは正しくペーストできたように見えます。
図8に示されているように、h2 #menulinkがul要素の上位にあるnav要素内に正しくネストされているかDOMパネルで確認します。
h2 #menulinkがul要素より後にある場合は、Ctrl+Zキー（Windows）またはCmd+Zキー（macOS）を押して取り消します。その後、nav要素をもう一度選択して、右クリックし、「子としてペースト」をクリックします。
- index.htmlに切り替えて、DOMパネルの下部にある
script要素を右クリックし、コンテキストメニューから「コピー」を選択します。
- sights.htmlに戻って、DOMパネルの
footer要素を右クリックし、コンテキストメニューから「ペースト」を選択します。
今回は「子としてペースト」ではなく「ペースト」を選択します。このスクリプトはフッター内にネストするのではなく、フッターの後に配置する必要があります。
スクリプトが添付されると、ナビゲーションメニューはindex.htmlの場合と同じように非表示になります。ドキュメントウィンドウが1000pxより広い場合、このスクリプトを添付すると、ラッパーがライブビュー内で左にシフトする可能性があります。そうなった場合は、F5キーを押してページを更新します。
- sights.htmlを保存します。
パート3で作成した未完成版のナビゲーションメニューをコピーしてここでアップデートするのではなく、先にナビゲーションメニューを完成させるべきだという考えもあります。しかし実際には、web開発が順序通りに進むことはまずありません。開発者自身やクライアントが新しいアイデアや要件を提案するかもしれません。そのため、要素を他のページにコピーする方法を知っていることは大切です。また、こうした作業は要素が正しくネストされていることを確認する練習にもなります。このページはフッターにスクリプトがネストされていてもそのまま機能しますが、不適切なネストにより問題が発生することもよくあります。コードの構造が適切であれば、トラブルシューティングはずっと簡単になります。
トリガーリンクのフォントの修正
前のセクションでは、index.htmlとsights.htmlを何回か切り替えて作業しました。MENUの文字をよく確認すると、2つのページのトリガーリンクの文字の太さが異なる場合があります。index.htmlの「MENU」のテキストはsights.htmlのテキストよりも細字です（図9を参照）。
パート4で、本文のフォントをAdobe Edge Web Fontsのsource-sans-proを利用するように指定しました。Dreamweaverは初期設定としてfont-weightを200（細字）で適用しましたが、その後400(標準)に変更しました。パート4でこのスタイルルールを作成したときのDreamweaverのfont-weight初期設定は200（細字）でした。そのため、index.htmlでAdobe Edge Web Fontsを読み込むスクリプトは、両方の太さのフォントをダウンロードします。しかし、スタイルシートをsights.htmlに添付した結果、Dreamweaverはsource-sans-proを標準のfont-weightでのみ認識したのです。この状態を修正するには、別の太さも使用できるようにスタイルを調整する必要があります。
- sights.htmlがドキュメントウィンドウのアクティブページとして指定されている状態で、CSSデザイナーのセレクターペインで
#menulinkを選択します。
- 必要であれば、プロパティペインの「セットを表示」の選択を解除し、
アイコンをクリックしてテキストプロパティに移動し、font-familyをsource-sans-proに設定します。これで、Edge Web Fontsをダウンロードする<head>セクションのスクリプトが更新されます。
- index.htmlに切り替えて、CSSデザイナーのセレクターペインで
#hero pのスタイルルールを選択します。このルールではfont-weightが600で宣言されています。この設定は標準のfont-weightより太いため、ブラウザー（ライブビューを含む）はそのフォントをセミボールドとして表示しますが、ここではそのfont-weightを利用したくはありません。そこで、このルールのfont-familyもsource-sans-proに設定します。段落内のテキストがすっきりとしました。
- いくつかのファイルに変更をおこなったので、ファイル／すべて保存を選択します。
- Dreamweaverからsights.htmlのwebフォントを更新するかどうかの確認が求められます（図10を参照）。
- 「更新」をクリックしてから、「閉じる」をクリックして、更新がおこなわれたことを知らせるダイアログボックスを閉じます。Dreamweaverは更新したファイルを自動で保存します。
通常、本文以外のスタイルルールにfont-familyを指定する必要があるのは、本文とは異なるフォントを使用するときのみです。しかし、ここではEdge Web Fontsを使用しており、このフォントはアドビのサーバーからダウンロードする必要があります。ダウンロードサイズが最小限になるように、Dreamweaverは使用され太さのフォントのみを読み込むようにします。セミボールド（600）はindex.htmlのみで使用されていますが、それ以外の余分なfont-weightはsights.htmlを表示したときにブラウザーのキャッシュに保存されるので、それにより負荷が高くなることはほとんどありません。しかし、webフォントをたくさん使用している（おすすめはしませんが）場合は、使用しないフォントのダウンロードについては慎重に検討してください。
ローカルソースからの画像の挿入
パート5では、直接Bayside CCライブラリから<figure>要素に画像を挿入しました。しかし、ローカルに保存されていない画像を使用することも少なくありません。このセクションでは、sights.htmlに2つの画像を異なる方法で追加します。プロセスはパート5と非常によく似ていますので、手順説明は最小限にします。
- CCライブラリパネルで、alcatrazというラベルの画像をクリックして、コンテキストメニューから「リンクされていないアイテムをダウンロード」を選択します。
- 表示されるダイアログボックスで画像形式をJPEGに変更します。
- 直前に実行した2つの手順を繰り返して、cable_car2というラベルの画像をダウンロードします。パート1でデフォルト画像フォルダーを定義しているため、上記の両方の画像はCCライブラリから抽出され、Bayside Responsiveサイトのimagesフォルダーにダウンロードされます。
- ライブビューでsights.htmlの最初の段落（「The precipitous hills」で始まる）を選択します。
- 「挿入」パネルの「HTML」セクションで、「Figure」を選択し、
<figure>要素をネストされている<figcaption>と一緒に挿入します。配置アシストダイアログから「後」を選択します。
<figure>要素を選択した状態のまま、次のいずれかの方法でcable_car2.jpgを挿入します。
- 挿入パネルの「HTML」セクションで、「Image」をクリックする。
- 挿入／Imageを選択する。
- キーボードショートカットCtrl+Alt+Iキー（Windows）またはCmd+Opt+Iキー（macOS）を使用する。
- 配置アシストダイアログから「ネスト」を選択し、開いたダイアログボックスからcable_car2.jpgを選択します。
- クイックプロパティインスペクターを使用して、画像の幅と高さを削除します。
<figure>要素のプレースホルダーテキストを削除し、キャプションプレースホルダーテキストを「The front seat of a cable car affords a great view of the city」に置き換えます。
- 3番目と4番目の段落の間に
<figure>要素を<figcaption>と一緒に挿入します。
- ファイルパネルからローカル画像をドラッグ＆ドロップすることはできませんが、標準ワークスペースのDOMパネルにデフォルトでドッキングされているアセットパネルからは、ローカル画像をドラッグ＆ドロップすることができます。
アセットパネルのタブをクリックしてパネルを開き、左上でイメージアイコンが選択されていることを確認します（図11を参照）。
必要に応じて、右下の円矢印（リロード矢印）をクリックし、パネルの内容を更新します。プレビューペインの下端を下方にドラッグして、ペインのサイズを大きくすることもできます。
- ファイル名のリストまたはプレビューペインからalcatraz.jpgを選択し、その画像をライブビューにドラッグします。パート5で行ったのと同じ方法で、
<figure>要素の真上にグリーンの線が見えるようになるまで画像をドラッグして配置し、いったん停止してから、表示される</>アイコンの上にマウスポインターを移動します。その後、フローティングDOMパネルで引き続きドラッグし、マウスポインターがfigure要素に重なったところでマウスボタンを放します（図12を参照）。これで、画像が要素の内部にネストされます。
- クイックプロパティインスペクターを使用して、この画像の幅と高さを削除します。
<figure>要素のプレースホルダーテキストを削除し、キャプションを「Alcatraz—former exclusive residence for notorious criminals」に置き換えます。
- Alcatrazの画像を選択し、エレメントディスプレイを使用してこの画像に
grayscaleクラスを適用します（クラスを割り当てていることを示すための、最初のドットを忘れないでください）。
- sights.htmlを保存します。
メディアクエリーを追加して、タブレットおよびデスクトップ用にサイトをスタイル設定
メディアクエリーはほとんどどのブラウザーでもサポートされています。注意すべき例外はInternet Explorer 8およびそれ以前のバージョンのみですが、これらの旧式ブラウザーはMicrosoftによる公式サポートが終了しているため、使用しているユーザーはほぼいません。メディアクエリーの大きな利点は、画面の幅、方向、ピクセル密度などの特定の特徴に応じた様々なCSSセットを使ってブラウザーに表示できることです。ここでは、理解しやすいように画面の最小幅にもとづく簡単なメディアクエリーを2つだけ作成します。
- ここからはCCライブラリパネルは必要ありませんので、パネルのタブをパネルグループにあるスニペットパネルの右横にドラッグします（図13を参照）。パネルグループ全体を囲む青い線が表示される位置にタブを移動します。その後マウスボタンを放して、タブを他のパネルと一緒にドッキングさせます。
- ドキュメントウィンドウがほぼ700pxの幅になるまで、ライブビューのスクラバーをドラッグします。正確に合わせる必要はなく、index.htmlまたはsights.htmlのどちらがアクティブドキュメントであっても構いません。
- ドキュメントウィンドウの上部にある
アイコンをクリックして、メディアクエリーを設定するポップアップパネルを開きます（図14を参照）。
- 一番上のドロップダウンメニューを「min-width」に変更して、「min-width」フィールドの値を700pxに設定し、一番下のドロップダウンメニューで「responsive.css」を選択します。設定した内容が図15と同じであることを確認し、「OK」をクリックします。
- これで、ドキュメントウィンドウの上部にあるビジュアルメディアクエリバーに紫色の横線が表示されるようになりました。この横線をクリックすると、ドキュメントウィンドウがちょうど700px幅になります。
- CSSデザイナーの上部にある「すべて」ボタンが選択されていることを確認します。ソースペインでresponsive.cssを選択して、@Mediaペインを展開します。これで、メディアクエリーが一覧に表示されるようになりました。メディアクエリーを選択すると、セレクターペインは空になります（図16を参照）。
- @Mediaペインの「グローバル」をクリックします。パート4～6で作成したすべてのセレクターが一覧に表示されます。これらのスタイルは、画面の幅に関係なくすべてのブラウザーに適用されます。画面が700px幅以上であるときに優先させる値を変更する場合にのみ、メディアクエリーを使用します。
- ファイル／すべての関連ファイルを保存を選択し、作業内容を保存します。
複数のメディアクエリーの作業を行っているうちに、「Visual Media Queries」バーの仕組みがよくわかってきます。一番上の行に最大幅クエリーが緑色の横線で表示され、真ん中の行に最小および最大の両方のクエリーが水色の横線で表示され、一番下の行に最小幅のクエリーが紫色の横線で表示されます。適切な横線をクリックするとドキュメントウィンドウのサイズが調整され、各種スタイルルールの効果を確認できます。「Visual Media Queries」バーについて詳しくは、オンラインマニュアルを参照してください。
2カラムレイアウトのナビゲーションメニューのスタイル設定
ナビゲーションメニューが常時2カラムレイアウトで表示されるようになります。ここまででセレクターとスタイルルールを作成する方法を学習しましたので、以下の手順は比較的簡潔に説明します。
- ドキュメントウィンドウが700px以上の幅であることを確認します。index.htmlまたはsights.htmlのいずれがアクティブでも構いません。ライブビューでナビゲーショントリガーリンク内の任意の場所をクリックして、そのリンクを選択します。
- CSSデザイナーで「すべて」ボタンが選択されていることを確認して、ソースペインでresponsive.cssを選択し、@Mediaペインで（min-width: 700px）を選択します。セレクターペインは空であるはずです（図16を参照）。
- セレクターペインでプラス（+）ボタンをクリックし、#menulinkのセレクターを作成します。プロパティペインの「レイアウト」セクションで、displayプロパティを「none」に設定します。メニュートリガーリンクが消えます。
- ライブビューのスクラバーを左にドラッグして、ページの幅を700pxより狭くします。すると、トリガーリンクが再び表示されます。逆方向にドラッグすると、ページの幅が700pxになったとたんに、リンクが再び非表示になります。
- @Mediaペインでメディアクエリー（min-width: 700px）が選択された状態であることを確認し（この確認は以降、いかなる変更の際にもおこないます）、#navlinksのセレクターを作成し、以下のプロパティと値を設定します。
max-width: 1000px position: static background-color: transparent
positionプロパティをstaticに変更したため、ナビゲーションリンクの順序なしリストが絶対位置指定ではなくなって、ページ内の通常の位置に表示され、それにともなってページの残りのコンテンツは下に動きました。collapsedクラスはmenu.jsのJavaScriptによって動的に制御されているため、リンクはまだ表示されていません。
- #navlinks.collapsed（ドットの前後にはスペースなし）のセレクターを作成し、opacityプロパティを1に設定します。メニューは再び表示されますが、前の手順で背景カラーが透明に設定されているため、thispageリンクしか見えません。白い背景に配置された白いリンクは見えません。
- #navlinks aのセレクターを作成してリンクを修正し、以下のプロパティと値を設定します。
width: 20% margin-bottom: 20px padding-top: 15px padding-bottom: 15px float: left (it’s the first icon for this property) color: #1E1E1E
これで、ナビゲーションメニューは図17のようになります。
ナビゲーションメニューには5つのリンクがありますので、それぞれのリンクのwidthを20%に設定し、floatをleftにして左から順に配置させることで、リンクはページ全体に均等に広がります。手順5でmax-widthプロパティを1000pxに設定しているので、リンクがwrapper<div>からはみ出すことはありません。
floatプロパティは、ブロックレベル要素を水平に揃えるために広く用いられている方法です。通常、リンクはブロックレベルではありませんが、リンクのdisplayプロパティはパート4～6で作成したグローバルスタイルでblockに設定されています。
絶対位置(absolute)を使用して画像上にテキストを配置
パート5で、ゴールデンゲートブリッジの画像の下の段落を、下側のボーダー付きのピンク色のセミボールドフォントでスタイル設定しました。2カラムレイアウトではabsoluteを使用して画像上にその段落を配置し、四方をボーダーで囲み別のカラーでスタイル設定します。absolute指定によって起こりがちな誤りを防ぐ方法についても学習します。
- 必要であれば、index.htmlに切り替え、ビジュアルメディアクエリバーの紫色の横線をクリックして、ドキュメントウィンドウの幅を700pxに設定します。
ページ上部のルーラーが正しく設定されていないようであれば、index.htmlを閉じてからもう一度開きます。700px未満の画面上でナビゲーションメニューを制御するJavaScriptが、ルーラーを移動することがあります。
- ライブビューで、ゴールデンゲートブリッジの画像の下にある段落を選択します。CSSデザイナーでresponsive.cssのメディアクエリーが選択された状態であることを確認し、#hero pのセレクターを作成して、以下のプロパティと値を設定します。
width: 36% padding-top: 20px padding-left: 25px padding-right: 25px position: absolute
positionプロパティをabsoluteに設定すると、見出し「Riding the Cable Cars」とそれに続くテキストは、スタイル設定中の段落の背後で移動します。絶対位置に指定すると、標準のドキュメントフローから外れ、その要素を他の要素の前面のレイヤーに配置します。
positionプロパティのすぐ下にあるビジュアルツールを使用し、上部と右側のオフセットを設定して、ゴールデンゲートブリッジの画像上に段落を移動します。オフセットに正の値を設定すると、要素の辺はその要素のコンテナブロックの同じ側の辺から遠ざかります。
ここで、パート5で説明したスクラブ操作を実践します。px を単位として選択してから、マウスポインターを値の上またはそのすぐ下に合わせてカーソルが双方向の矢印に変わるのを待ち（図18を参照）、値を増やす場合は右に、減らす場合は左にドラッグします。ひとまず、topを200px程度、rightを30px程度に指定します。
colorプロパティをwhiteに設定し、四辺のボーダーを5px幅およびsolidに設定します。この設定によって、段落はゴールデンゲートブリッジ上に図19のように配置されます。
- ライブビューの端のグレー領域をダブルクリックして、ドキュメントウィンドウの幅全体にテキストが表示されるようにします。モニターが大きければ大きいほど、結果の見栄えは悪くなります（図20を参照）。
この結果を見たほとんどの人は、絶対位置指定をおこなった要素が移動したと考えます。しかし、実際には移動していません。上部と右側のオフセットは、まったく変化していません。問題は、オフセットが位置決めされた要素の含まれているブロックから計算されるという点です。確かに、hero <div>の中にネストされています。その点から、これがコンテナブロックであるように考えられます。
そのように推測するのは自然なことです。しかし、CSS仕様では位置を指定したい要素を含んだコンテナブロックも位置決めしなければならないことになっています。しかし、コンテナブロックとして扱われる要素に位置決めがされていない場合は、ページがコンテナブロックになります。したがって、36％幅とは、hero <div>ではなくページに対する相対的な比率ということになります。オフセットはページの上部と右側から計算されます。
- この問題を修正するのは非常に簡単です。
#heroのセレクターを新たに作成し、そのpositionプロパティをrelative（相対位置指定）に設定します。こうすることで、親<div>が絶対位置指定された段落のコンテナブロックになり、オフセットがページの上部と右側から計算されなくなります。
#hero pセレクターを選択し、topプロパティを90px程度に設定し直して、段落の位置を調整します。hero画像は最大幅で図21のようになります。
700pxでは、テキストは依然として図19と同じ位置に表示されます。
- ファイル／すべての関連ファイルを保存を選択し、作業内容を保存します。
要素のpositionプロパティをrelativeに設定することで、周辺の要素に影響を与えることなく、ページ内の要素が適切な位置にオフセットされるようになります。この例では、hero <div>にはオフセットが設定されていないので、移動はありません。しかし、hero <div> はpositionプロパティが定義された要素であるため、絶対的に位置指定された段落に対してはコンテナブロックとなります。理解しにくいかもしれませんが、これが絶対的位置指定の仕組みです。
今回のように、画像上にテキストを配置するなどの個々のタスクに関して絶対的位置指定と相対的位置指定を組み合わせて使用するのは便利ですが、webページ全体のレイアウトに両方を組み合わせて使用することはおすすめしません。これは、webのレイアウトは流動的に変化するためです。
カラムを横並びにする
以前に、ナビゲーションリンクを水平に揃えるときにfloatプロパティを使用しました。このプロパティは2カラムレイアウトを作成するために広く用いられている方法です。ある要素が左または右にフロート指定されている場合、その要素は指定された側に移動し、後続の要素は上に移動して空いたスペースに流れ込みます。要素をフロートさせるには、要素のwidthまたはmax-widthが宣言されている必要があります。
- CSSデザイナーでresponsive.cssとメディアクエリーが選択された状態であることを確認し、mainのセレクターを作成して、そのwidthプロパティを60%に設定します。
- asideのセレクターを作成し、そのwidthプロパティを28%に設定します。さらに、margin-leftを0pxに設定します。この設定はグローバルスタイルから継承する4%のマージンを無効にするために必要です。
<main>要素は両側の4％マージンをグローバルスタイルから継承し、<aside>要素では、右側のみに4%のマージンが適用されます。そのため、2つの要素とそれぞれの水平マージンの幅を組み合わせると、合計でちょうど100％になります。
main, asideのグループセレクターを作成します。次のプロパティと値を設定します。
margin-top: 30px margin-bottom: 30px float: left font-size: 0.875em
floatプロパティを設定した直後は背景のほとんどが黒に変わり、異変が起きたように見えます（図22を参照）。
これで正常な挙動です。絶対位置指定の要素の場合と同じようにして、フロートした要素はドキュメントのメインフローから除外されます。ここで何が起きているかというと、 <footer>要素も<main> 要素に合わせて上に移動し、フロート要素が移動して空いたスペースに背景が入り込んだのです。この状況を修正するのは簡単です。
1. footerセレクターを作成し、clearプロパティをleftに設定します。すべてがあるべき場所に戻ります。
2カラムのレイアウトに使用できる、flexboxというテクニックもあります。主要なブラウザーの最新バージョンではほぼサポートされているため、flexboxを使用するケースも増えています。
画像周囲へのテキストの回り込み
floatプロパティの本来の用途は、画像周囲のテキストを回り込ませることでした。それでは、2番目のメディアクエリーを作成し、sights.htmlでブラウザーのビューポートが900pxより大きいときに、画像周辺にテキストをフローさせてデザインを完了させましょう。
- sights.htmlに切り替え、ライブビューのスクラバーを使用してライブビューのサイズを900px程度に変更します。
- ルーラーのアイコンをクリックし、
min-width: 900pxのメディアクエリーをresponsive.cssに作成します（設定については、図23を参照）。
- 「ビジュアルメディアクエリー」バーで900pxの右をクリックして、ライブビューの幅を900pxに再設定します。
- sights.htmlの上部にあるケーブルカーの画像を選択し、上矢印を1回押して、その親
<figure>要素を選択します。エレメントディスプレイの「プラス（+）」ボタンをクリックします。入力フィールドに.floatrightと入力し、Tabキー、EnterキーまたはReturnキーを押してクラスを割り当てます。ポップアップパネルでresponsive.cssが選択されていることを確認してから、2番目のドロップダウンメニューでmin-width: 900pxメディアクエリーを選択します（図24を参照）。
- CSSデザイナーの@Mediaペインで
min-width: 900pxメディアクエリーを選択してから、セレクターペインで.floatrightを選択します。このクラスに次のプロパティと値を設定します。
float: right margin-right: 0px margin-left: 10px
このように設定することで、次の段落のテキストが、画像とキャプションの左側と下側に回り込みます（図25を参照）。
画像が右側に移動しない場合は、画像の親<figure>要素ではなく、画像自身に対してクラスを適用している可能性があります。
- alcatrazの画像に手順4と5を繰り返し、今回は
.floatleftというクラスを作成して、次の値を設定します。
float: left margin-right: 10px margin-left: 0px
- ファイル／すべての関連ファイルを保存を選択し、作業内容を保存します。
Viewportメタタグの設定
レスポンシブなデザインは完了です。ここで、完成した作品をモバイル端末に正しく表示するための、最後の手順を実行します。
挿入パネルのHTMLカテゴリで「ビューポート」を選択します（図26を参照）。ビューポートは、上から3分の2ほど下がったあたりの3番目のセクションにあります。
この作業をsights.htmlとindex.htmlの両方（およびその他のレスポンシブページ）でおこなう必要があります。このメタタグが設定されていないと、モバイルフォンは自動でページをスケーリングし、メディアクエリーを無視してしまうからです。
次のステップ
ここまでの長い工程で、Dreamweaverの使用方法だけでなく、webデザインの現状についても多くのことを学習しました。難しいと感じたテクニックがあれば、そのパートを復習してください。HTMLとCSSの基本を学ぶことは難しくありませんが、webデザインはますます洗練され精巧になっています。すぐにエキスパートになることを期待すべきではありません。自分はデザイナーでありプログラマーではないと主張するグラフィックデザイン畑の人々の多くが、この点を見落としています。webサイトの構築はデザインすることです。しかし、デザインにはコードを使用します。実際にコードを作成しているのは人ではなくDreamweaverですが、デザイン担当者は、望んだ効果を得るために必要なCSSプロパティと値を把握しておく必要があります。
レイアウトやデザインの問題を解決するためにサポートが必要であれば、問題のページをwebサイトにアップロードして、メインのDreamweaver Support Forumに質問を投稿してください。投稿にはURLと問題の簡単な説明を含めてください。多くの場合、閲覧した人たちからのアドバイスが得られます。
作成したwebページと他のアセットを実働webサーバーにアップロードする方法については、このチュートリアルの最後のパートで学習します。
