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

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

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

ぜひご覧ください。

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

字幕

このレッスンでは Dreamweaver でレスポンシブ Web デザインを制作していくにあたってこのチャプターで学習するサイドメニュー部分の HTML コーディングおよび各端末に向けたスタイルシートの調整についてまずはその全体の内容の確認を簡単に一緒にやっていきます。それではレッスンを始めていきましょう。今ブラウザに表示しているこちらの画面ですがこれは今回のチャプターのレッスンを通して作成した完成版の HTML となります。今回制作をしていく部分はこちらのサイトの中のこちらのサイドメニュー部分ですね。それでは PC タブレット スマートフォン用それぞれの画面サイズに切り換えて見え方を確認してみましょう。まずは今表示しているのがPC サイズのレイアウトですね。それではデベロッパーツールの端を持って徐々に小さくしていってみましょう。するとどんどんどんどん小さくなっていってそしてここでタブレットのレイアウトに変わりました。タブレットのレイアウトに変わった段階でこちらのサイドメニュー部分はこのような形になっていますね。そして更にどんどんどんどん小さくしていくとこのタイミングでこちらのサイドメニューの部分のレイアウトがスマートフォン用のデザインによく似た形に変わりました。 ただし上はまだタブレットのままですね。それではさらにどんどんと画面を狭めていってみましょう。するとこのようにデザインがスマートフォン用のデザインに変わりました。そしてこちらのサイドメニュー部分もそのままスマートフォン用のレイアウトになっていますね。それでは PC 用のレイアウトに戻します。今回のチャプターのポイントそれはまず PC 版のこちらのレイアウトとスマートフォン版のこちらのレイアウトですね。こちらのレイアウト内容がほとんど同じですね見た目も同じです。このようにタブレットに向けたデザインのみが異なる場合それとタブレットの画面を表示していたときこのサイドメニュー部分が途中でさらに切り換わりましたね。このように切り換わります。この大きく2点が今回のチャプターで学習するポイントとなります。まとめますと PC とスマートフォンのレイアウトは同じでタブレットのみが異なる場合そしてタブレット向けのデザインの表示の中でもう一段階レイアウトの切り換えがあることこの2点に注目しながら以降のレッスンも進めていきましょう。以上でレッスンは終了です。今回はこのチャプターで学習する項目についてまずは簡単に全体の内容について確認しました。 以降のレッスンで具体的にどのように実装してくかを解説いたしますのでそちらも合わせて参考にしてみてください。

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

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

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

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

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

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