Dreamweaver CCで作るレスポンシブWebデザイン

タブレット&PC端末に向けたCSS調整(メディアクエリ追加とclearfix)

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スマートフォン端末向けのCSS調整が完了したら、次はその部分に対して、タブレット端末に向けて、CSSでレイアウトを調整していきます。このレッスンでは、その手順について解説していきます。
講師:
12:05

字幕

このレッスンではこれまでのレッスンに引き続き Dreamweaver でレスポンシブ Web デザインを制作していく中でのフッター部分に対してタブレットとPC 端末に向けたスタイルシートの調整方法について解説していきます。まずはダウンロードしてきたファイルの中にある「 footer_tab_pc 」というフォルダーの中の「 HTML (完成版)」こちらのフォルダーの中の「 index.html 」こちらを Dreamweaverで開いてください。そしてこれがそのファイルを開いた状態です。このファイルは今回ご説明するフッター部分に対しての PC とそしてタブレット端末に向けたスタイルシートの設定をすでに完了しているファイルとなっています。このファイルを目で追いながら実際にレスポンシブ Web デザインに対応していく中でどのようにスタイルシートをコーディングしているかこちらのいくつかのポイントについて確認していきたいと思います。それでは早速レッスンを始めていきましょう。まずは今回の対象となるフッター部分のデザインについて確認しておきましょう。同じくダウンロードしてきたファイルの中にあるこちらの「デザイン」フォルダー・こちらの中に「 PC 」「タブレット」「スマートフォン」3つのデザインが入っていますのでこれらの画像ファイルを開いてください。 それではまずはタブレットの方から見ていきましょうか・タブレットの方はこのようになっていますね・フッターの中にナビゲーション部分とそしてコピーライトです。そして PC 用はというとこのようになっていますね・同じくナビゲーションとコピーライトの2つですが要素が横並びになっています。念のためスマートフォンのデザインも見ておきましょうか・スマートフォンはこちらのようにシンプルにコピーライトのみの表示となっていますね・それでは Dreamweaver に戻りましょう。それでは実際に CSS ファイルを見ていきたいと思います。こちらのファイルのメニューから「 style.css 」を選択します。そして今回はタブレットと PC 向けのスタイルシートの設定なのでタブレット向けのメディアクエリの中に書いています。それではその部分まで移動させてみましょう。こちらの「 min-width: 481px 」こちらの中ですねこちらの中のずっと下に行きましてこちらです。「 footer 」と書かれているところですね。この部分より下の所で CSS を書いています。さて今の状態で一度このファイルをブラウザでプレビューしてみましょうか。 ブラウザでプレビューするにはこちらの地球のアイコンをクリックします。そして「 Chrome 」を選択します。するとこのように表示されましたね。今は PC のデザインが表示されています。フッター部分はというとこのようになっていますね。それでは「デベロッパーツール」を開いて他の端末サイズも確認しておきましょう。はい今が PC の状態です。それではこちらの端を持って徐々に画面を狭めてみます。するとこのように徐々に内容が詰まっていってそしてこの状態でこちらの並び方が上下に変わりましたね。このフッターが上下に変わったポイントではまだ上の部分は PC の状態ですね。それではさらにどんどんと縮めていきます。はいこの段階でタブレット用のレイアウトに変わりましたね。このタブット用のレイアウトのときは同じようにこのように上下の並びになっていますね。さらにどんどんと縮めていきます。するとこのようにタブレットのレイアウトの中でこの部分がスマートフォン用に変わりましたね。これまでのレッスンで設定してきたいわゆる小さいタブレット向けのレイアウトに今変わっています。このレイアウトに変わった地点でこちらのフッター部分。 先ほどのフッターの中のナビゲーションが非表示になっていますね。これはこの段階に来ると先ほどのフッターナビゲーションがこの横幅に収まりきらなくなってレイアウトを崩してしまうためにこの段階において非表示としています。さらにどんどんと縮めていきます。するとこのように帯の色が変わってコピーライトが表示されていますね。この段階でスマートフォン用のレイアウトに変わっています。さてもう一度大きくしていきましょう。今が小さいタブレット用ですね小さいタブレット用そしてこれで大きいタブレット用で初めてこちらのナビゲーションが表示されてきます。そしてそのままずっと行くとこのようにPC のレイアウトに変わるんですがここでもまだ上下のレイアウトですね。さらにどんどんと大きくしていくとこのように横並びになるといった形です。このように PC のレイアウトに変わったあとでももう1つブレイクポイントを設定してそのブレイクポイントを境にこちらの要素の並び方ですね、上下か左右かというのを切り換えています。こちらも同様にこの並びの状態でどんどんと狭めていくとこちらのレイアウトが崩れてしまうためこのような形に設定しています。ではこれらの部分をどのようにスタイルシートで設定しているか見ていきましょう。 Dreamweaver に戻ります。さてこれをスタイルシートでどのように書いているかというとまずはこちらの「 min-width: 481px 」要するに小さいタブレット以上と定義しているものですねこの中で一通りのフッターのスタイルシートは定義しています。それにはフッターのナビゲーションそれも含まれています。ただし小さいタブレット用に関してはフッターのナビゲーションは非表示としていたのでこちらで「 display:none 」をしている状態ですね。それが大きいタブレットになると表示するという設定をさらにこの下で書いています。こちらの「 min-width: 680px 」とそして「 max-width: 768px 」ですねこちらのメディアクエリの中でこのように「 display:block 」に変えて表示させるようにしています。さらにこちらの「 min-width: 769px 」これは PC 用のメディアクエリですね。こちらの方にも同様にですね。こちらで「 display:block 」をしてフッターのナビゲーションを表示するようにしています。この PC 用のメディアクエリの中でも同様に「 display:block 」を指示しているのは先ほどの大きなタブレット用のメディアクエリそれには「 max-width 」が設定されていて、要するにこの PC 側の方にスタイルシートを継承しない状態になっていたからですねですのでこちらでも同様に指定しておく必要があるわけですね。 ちなみにこの PC 用のメディアクエリの中ではまだフッターのナビゲーションとコピーライトは上下の並びになっています。そして今回新たにメディアクエリを追加しました。それは「 min-width: 890px 」と設定しています。これは横幅 890px 以上の表示領域で見た場合に適用されるメディアクエリですね。この中にはそのフッターのナビゲーションとそしてコピーライトを横列に一列で並べるといったスタイルシートを書いています。このように書くことで先ほどブラウザでプレビューしたような形で各画面サイズに応じた形でレイアウトを変更していくことができるわけですね。ここで1点補足です。この「 min-width: 890px 」の中のメディアクエリの中でフッターのナビゲーションとそしてコピーライトこれらを横一列で表示させていますがそれをスタイルシートで「 float:left 」を使って実現しています。このように float を使って要素を回り込ませた場合、このままの状態でブラウザで表示させてしまいますとレイアウトが崩れる可能性が非常に高いです。そういった場合にどうするかといいますとこちらのソースコードの方を開いてみます。 そして該当部分のところを見てみるとまずフッターナビゲーションがこのナビゲーションタグですね。そしてコピーライトがこの p タグです。その親要素となるこの「 footer 」のところに「 class="clearfix" 」というのを付けています。この「 class="clearfix" 」ですがDreamweaver が既に準備をしてくれています。この「 class="clearfix" 」を使うことによってfloat の要素による回り込みの設定をした際に生じるレイアウトの崩れを回避してくれる役割がありますのでこちらは忘れずに覚えておきましょう。それでは最後にもう一度ブラウザでプレビューしておきましょうか。こちらの地球アイコンをクリックして「 Chrome 」を開きます。すると表示されましたね。この状態で「デベロッパーツール」を開いて順番に確認していきましょう。まずは PC 用のレイアウトですね、このような状態になっています。そしてずーっと縮めていきます。するとこのように縦並びに変わりましたねそしてまだ上は PC のレイアウトです。そしてさらにずーっと縮めるとタブレット用のデザインに変わりました。 そしてさらに縮めると 小さいタブレット用のデザインに変わっています。そしてどんどんと縮めていくとこのように最後はスマートフォン用のレイアウトになっていますね。これでレスポンシブ Web デザインに対応したページの制作が完了となりました。さて先ほどダウンロードしてきたファイルの中にはこちらの「 HTML 」フォルダーの中に今回のスタイルシートの設定をまだ行っていないファイルが入っていますので今回のレッスンを参考にしながらぜひご自身でスタイルシートの設定をやってみてください。以上でレッスンは終了です。今回は Dreamweaver を使ってレスポンシブ Web デザインに対応したフッター部分のタブレットと PC 端末に向けたスタイルシートの調整手順について解説いたしました。このレッスンを以てこの架空のサイトデザインに沿った形でのDreamweaver を利用したレスポンシブ Web デザインの一連の制作の流れの解説は終了となります。これまでのレッスンを参考にしながらぜひレスポンシブ Web デザインの制作にトライしてみてください。

Dreamweaver CCで作るレスポンシブWebデザイン

このコースでは、レスポンシブWebデザインに対応したサイトをDreamweaverを使いながら制作する方法について解説していきます。レスポンシブWebサイトについての説明や、制作するにあたっての設計のコツ、Dreamweaverがもつ機能や使い方などを実際の制作手順に基づいて解説していきます。

3時間40分 (32 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年04月02日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。