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

このチャプターで学習するポイント

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このチャプターでは、Webページのフッター部分のレスポンシブ化について、架空のWebサイトのデータを使って解説していきます。このレッスンでは、このチャプターのレッスンを通して制作していく内容について、まずは確認しておきます。
講師:
03:03

字幕

このレッスンでは Dreamweaver でレスポンシブ Web デザインを制作していくにあたってこのチャプターで学習するフッター部分のHTML コーディングおよび各端末に向けたスタイルシートの調整についてまずはその全体の内容の確認を簡単に一緒に行っていきましょう。それではレッスンを始めていきます。今こちらに表示しているのはこのチャプターの中のレッスンで一通り行う実装を既に反映している状態のものとなります。そして今回のチャプターでやっていく箇所それはこのフッター部分ですね。それではこのフッター部分の各端末に向けたデザインを確認していきましょう。こちらのデベロッパーツールの端を持って徐々に小さくしていきます。まず今表示しているのがPC 用のデザインですね。そして徐々に小さくしていくとこの段階で一旦レイアウトが変わります。このフッターのナビゲーションとコピーライトが縦に並びましたね先ほどまでは横に並んでいました。ただしまだ上は PC サイトのレイアウトのままです。さらにそのままどんどん小さくしていくとタブレット用のデザインに変わりました。このときフッターの状況は先ほどと変わらず縦に並んでいますね。 そしてさらに縮めていきますと今タブレットのデザインですがこちらのサイドメニューの部分がスマートフォン用のレイアウトに似た形に変わりましたね。そしてフッターの方はというとフッターのナビゲーションが非表示になりました。さらにどんどん縮めていくとここでスマートフォン用のデザインに変わります。ここはフッターの帯の色が変わりましたね。さて PC のデザインに戻します。このチャプターのレッスンを通して学ぶ大きなポイントとして2つあります。1つはまずこのフッターのデザインですがこちらの上のサイトの枠から大きくはみ出していますね。画面一杯に広がっています。まずはこちら1点です。そして先ほど見ていただいた通りにこのように画面を小さくしていくとPC のデザインの中でさらにもう一段階表示の切り換えがありますね。この部分が2つ目のポイントとなります。これらのポイントに注目しながら以降のレッスンも進めていきましょう。以上でレッスンは終了です。今回はこのチャプターで学習する項目についてまずは簡単に全体の内容について確認しました。以降のレッスンで具体的にどのように実装してくか解説していきますのでそちらも合わせて参考にしてみてください。

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

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

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

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

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

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