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

デザインビューと画面サイズの切り替え

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
DreamweaverではレスポンシブWebデザインを制作するにあたり、便利な機能が揃っています。このレッスンでは、Dreaweaverのこれらの機能について解説致します。
講師:
07:40

字幕

このレッスンでは Dreamweaver でレスポンシブ Web デザインを制作していくにあたりDreamweaver の便利な機能であるデザインビューとその画面サイズの切り替え機能について解説いたします。まずはダウンロードしてきたファイルの中にある「 designview 」というフォルダーこちらの中にあるこの「 index.html 」こちらのファイルをDreamweaver で開いておいてください。そしてこれがそのファイルを開いた状態です。このファイルは Dreamweaver で可変グリッドレイアウトで新規のドキュメントを作成した状態のものとなっています。このファイルを利用して今回のデザインビューとその画面サイズの切り替えについて解説していきたいと思います。まずこの Dreamweaver の画面の中ですが大きく分けて3つのパーツに分かれます。まずはこちら こちらはHTML や CSS ファイルといったコードが表示されている画面ですね、こちらはコードビューと呼ばれるものです。HTML や CSS それらを手入力で入力していく場合にはこちらのビューを使ってコードを書いていきます。そして次にこちら こちらがデザインビューというものになります。 こちらのデザインビューはこちらのコードビューで書かれた内容ですね。こちらの内容をブラウザーで見た時の見栄えがある程度こちらに反映されている状態となります。そしてこちらの右側にあるパーツそしてこちらの下にあるパーツですね。これらは Dreamweaver の便利な機能にアクセスしていくた為パネルとなっています。ここのデザインビューとそしてこちらのパネルですね。あと上のメニューとかもそうなんですがこれらを組み合わせて利用することによってこちらのデザインビューこちらでも HTML の制作を直感的に見た目で行っていくことができます。このデザインビューで反映した内容はこちらのコードビューにも反映されています。複雑なページのレイアウトとかになってくるとこのデザインビューだけでのコーディングというのは少し難しくなってきますが、ある程度のものであればこのデザインビューとそしてこちらの各種パネルですね、こういったものを組み合わせて利用することによって実際にコードを書かなくてもページを制作していくことも可能です。さて Dreamweaver でレスポンシブ Web デザインを制作するにあたってこのデザインビューの便利な機能について説明していきたいと思います。 まずこの画面の中に表示されているこの薄い灰色の線ですね。この縦線ですがこれは Dreamweaver で「可変グリッドレイアウト」の新規ドキュメントを作った時に設定したグリッドを表示している状態となります。レスポンシブ Web デザインではこのグリッドを基準にしてこの各コンテンツの幅とかですねそういったものを決めて配置させていきます。また目には見えないのですが縦ではなく横にもですね。実は「行」の概念が存在しています。例えば今こちらの部分ですねデフォルトのコンテンツが入っていますがこの部分この部分で今1行となっています。そしてこの下にコンテンツをどんどんと追加していくと2行3行4行という形で大きなコンテンツブロックごとに1行という形で設置していくわけです。今こちらのデフォルト状態のこちらのブロックでは1行で1つのブロックとなっていますが制作を進めるにあたっては1行で2つのブロックや3つのブロックを設置するというような状況も出てきます。このように縦のグリッドと横の行をですねこちらを上手く使ってまるでブロックを組み立てているような感覚でレスポンシブのページのコンテンツを作り込んでいくわけです。 さて次にもう1つ便利な機能をご紹介したいと思います。それはこちらのデザインビューですねこちらの画面サイズ、いわゆるウィンドウサイズのサイズの切り替えについてです。このデザインビューではスマートフォン端末タブレット端末、そしてと PC 端末ですねそれらの端末に合わせた表示の確認やレイアウトの構築を各画面の表示をシュミレートした形で切り替えて表示の確認やレイアウトの構築を進めることができます。それを行うのがこちらの部分です。左からスマートフォン向けの表示モードそしてこちらはタブレット向けですね、の表示モード。そして最後に PC 向けの表示モードです。少し切り替えてみましょうか、まずスマートフォン向けに切り替えます。するとこのようにグリッドの線が4本になりましたね。これがスマートフォン向けの表示そして編集モードとなります。次にこちら タブレット端末用の表示そして編集モードそしてこちらは PC デスクトップサイズの表示編集モードとなっています。これらの画面モードを切り替えることによってそれぞれの端末に合わせた表示の確認。そして端末に合わせたレイアウトの編集を行っていくことが可能です。ちなみにこちらにあるそれぞれの画面サイズですがこちらに記載されていますね。 こちらをクリックすることによってこういうような形で他のサイズにも切り替えることもできます。またこちらの「サイズの編集」ホタンをクリックしますとこのようにさらにデバイスを追加したりですね。削除したりすることもできますので覚えておくとよいでしょう。またこういった PC 向けのサイズの場合、このようにデザインビューの中で横にずーっと長くなっていてパッと見た感じ全体像を把握するのは少し難しいですね。そういった場合はこちらの Dreamweaver の「表示」メニューから「表示比率」こちらの値を変えることによって全体を見やすくすることも可能です。一度やってみましょう。例えば「 66 %」このように表示のパーセントを変更することによってそのパーセントに合わせたサイズで表示してくれますので全体像を利用したい時などに利用するとよいでしょう。以上でレッスンは終了です。今回は Dreamweaver でレスポンシブ Web デザインを制作する際にとても便利な機能であるデザインビューとその画面サイズの切り替えについて解説いたしました。実際にこの機能を使うことでかなりレスポンシブ Web デザインの制作を効率的に進めていくことができますのでしっかりと理解しておきましょう。

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

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

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

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

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

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