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

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

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

ぜひご覧ください。

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

字幕

このレッスンでは Dreamweaver でレスポンシブ Web デザインを制作していくにあたってこのチャプターで学習するコンテンツ部分のHTML コーディングおよび各端末に向けたスタイルシートの調整についてまずはその全体の内容の確認を簡単に一緒に行っていきます。それではレッスンを始めていきます。このチャプターで学習するところそれはこちらのコンテンツエリア部分のHTML コーディングとスタイルシートの調整方法についてとなります。それでは各端末向けのデザインを確認していきましょう。まずは PC 用のデザインですね、PC 用のデザインはこのようにまずテキスト部分があって写真が横並びに3つ並んでいますね。それぞれの写真にはこのようにタイトルが乗っかっています。そしてその下にはメニューボタンがありますね。ちなみにこのテキストの左右には1px の縦線がありますね、それではタブレットに行きます。タブレット用のデザインはというとこのようになっていますね、ほとんど PC 用のデザインと同じです。ただ先ほどのテキストの左右には1px の縦線はこちらには存在していませんね。そして最後にスマートフォン用のデザインです。 スマートフォン用のデザインはというとこのようにテキストの部分は先ほどとそれほど変わりませんね。こちらも左右の縦線は無くなっています。ただギャラリーの部分に関しては大きく変わっていますね。先ほど写真が横並びで3つに並んでいたのに対し今回は縦並びで一列になっています。またタイトルの表示の仕方も異なっていますね。このギャラリー部分のレイアウトに関しましては今回のチャプターの大きなポイントとなりますのでこのことを頭に入れておきながら以降のレッスンも進めていきましょう。以上で今回のレッスンは終了です。今回はこのチャプターで学習する項目についてまずは簡単に全体の内容について確認しました。以降のレッスンで具体的にどのような実装をしていくか解説をしていきますのでそちらも合わせて参考にしてみてください。

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

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

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

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

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

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