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

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

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

ぜひご覧ください。

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

字幕

このレッスンでは Dreamweaver でレスポンシブ Web デザインを制作していくにあたってこのチャプターで学習するグローバルナビゲーションとメイン画像部分のHTML コーディングおよび各端末に向けたスタイルシートの調整についてまずはその全体の内容の確認を簡単に一緒に行っていきます。それではレッスンを始めていきましょう。さて今回のチャプターで学習していくところそれはこちらのグローバルナビゲーションとそしてメイン画像部分のレスポンシブ Web デザインに対応したHTML コーディングとスタイルシートの調整です。今このデザインは PC 用の画面ですね。他のデザインも見てみましょうかまずはタブレット用のデザインです。タブレット用はこの様な形になっていますね。見た感じ PC サイトのデザインとはあまり変わりがありませんね。サイズぐらいでしょうか。そして最後にスマートフォン用のデザインを確認します。するとスマートフォン用のサイトはこのようになっていますね。このグローバルナビゲーション部分は横幅ももちろん違いますがそれ以上にメニューが縦列に並んでいますね。そして右側には PC 用やタブレット用にはなかった矢印のアイコンが付いています。 そしてこちらのメイン画像は先ほどタブレットや PC ではこのようにグローバルナビゲーションの端から端までのサイズと同様のサイズでこのように横幅が広がっていますがスマートフォン用のデザインでは少しスペースが空いた状態で表示されていますね。このあたりが今回のチャプターでのポイントとなりますので意識しながら以降のレッスンも進めていきましょう。以上で今回のレッスンは終了です。このチャプターで学習する項目についてまずは簡単に全体の内容について確認しました。以降のレッスンで具体的にどのように実装していくかを解説していきますのでそちらも合わせて参考にしてみてください。

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

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

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

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

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

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