全349コースを10日間無料でぜひご覧ください。円このコースを購入するDreamweaverには、ブラウザでのプレビューと同様の確認を、ツール内で行うことのできるライブビュー機能というものがあります。このレッスンでは、そのDreaweaverのライブビュー機能を使って、レスポンシブWebデザインのプレビューを行う手順についてご紹介します。搭載されているライブビュー機能を使ってプレビューする方法について解説いたします。開いておいてください。これがそのファイルを開いた状態です。この画面は現在左にコードビューそして右にデザインビュー、そしてそのデザインビューはスマートフォンの画面サイズで表示されています。このファイルを使って今回のライブビュー機能について解説を進めていきたいと思います。それではレッスンを始めていきましょう。内蔵しており、それを通して現在制作中のファイルを表示させることで実際にブラウザを通してサイトを見た状態に近い形で再現させることが可能な機能です。今この画面で表示されているこちらのデザインビューこちらもある程度ブラウザで制作中のファイルを表示したときに近い形で表示はされてくるもののこのデザインビューは簡単に言うと目視での編集を行うためのビューであって実際にブラウザでの表示を再現しているわけではありません。したがってこれからご説明するライブビューに関してはこのデザインビューとは違ってさらにブラウザで表示した形に近い形で確認することができるといった感じです。それではこの状態から一度ライブビューに切り替えてみましょう。ライブビューに切り替えるにはこちらのボタンですね。ここに「ライブ」と書いてますがこちらをクリックすることで変更することができます。それでは押してみます。するとこのような形に少し変更になりましたね。今現在こちらの可変グリッドレイアウトのこちらのグリッドが表示されている状態ですのでこちらを消してあげましょう。消すにはこちらのアイコンですね、こちらのボタンを押してあげます。するとこれでブラウザの表示に限りなく近い状態で表示されているのが分かります。こちらのビューのことをライブビューと言います。ちなみにこのライブビューですがデザインビューと同様に画面サイズを各端末向けに変更することができます。一度やってみましょう。分かりやすいようにこちらをドラッグして領域を広げておきます。今スマートフォンですね。次タブレット端末向けのサイズに変更してみます。こちらをクリックするとこのように見栄えが変わりましたね。向けのサイズに変えてみましょう。こちらをクリックするとこのようにレイアウトが変更になりましたね。サイズに変更してあげることによってこのように変更されたものが表示されたわけです。編集画面の中でこのように各端末に向けたサイズの切り替え等々も含めて表示を確認することができます。このライブビューですが大変便利な機能が2つ付いています。そちらも合わせてご紹介したいと思います。分かりやすいようにコードビューの方を出してきてそしてこちらのライブビューですね、こちらをスマートフォンサイズに変えておきます。ご紹介したい機能その1それはライブコード機能です。ライブコード機能はここにあるボタンを押すことで有効にすることができます。一度押してみましょう。するとこちらのコードビューが黄色になりましたね。このようにコードビューが黄色くなっている状態ではこちらおコードビューを編集することはできなくなっています。プログラミングをこのページで走らせているときそのプログラムが走っている様子をこちらのコードビューでリアルタイムに確認することができる機能です。要素が追加されていくような形のプログラムがあったとします。コードを確認することができる機能です。1つの機能を紹介します。それはこちらの「インスペクト」という機能です。一度クリックしてみましょう。ライブコードの方は解除しておきます。機能に似たようなものです。プロパティの確認を行うことができる機能です。中で確認を完結させることが可能です。それではこの「インスペクト」を解除しておきましょう。最後にこのライブビューですがデザインビューのようにこちらに書かれている内容を変更したりすることも可能です。一度やってみましょう。タグですね、こちらを選択して、そしてこの中でダブルクリックしてみましょう。するとこのように編集モードに変わるので例えばこちらのレイアウトというのを消してみましょう。するとこのようにレイアウトという文言が消えてこちらのコードビューの中でも消えていますね。変更を行ったりすることも可能です。便利な機能ですので覚えておくと良いでしょう。以上でレッスンは終了です。デザインを制作するにあたってライブビュー機能の使い方について解説いたしました。このライブビューを使いこなせるようになると作業効率がグンと向上しますので積極的に使っていきましょう。これはあくまで制作をムーズに行う為の補助的な機能となりますので最終的な制作ファイルの確認には必ず実際のブラウザにて行うようにしてくださいね。CCで作るレスポンシブWebデザインこのコースでは、レスポンシブWebデザインに対応したサイトをDreamweaverを使いながら制作する方法について解説していきます。レスポンシブWebサイトについての説明や、制作するにあたっての設計のコツ、Dreamweaverがもつ機能や使い方などを実際の制作手順に基づいて解説していきます。発売日:2014年04月02日このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。お問い合わせは、cs-jp@lynda.com宛までご連絡ください。無料レッスンを視聴するここから世界が拡がります。lynda.comとlynda.comのロゴは、商標登録されています。登録してからブックマークを使用してください。lynda.comにジャンプしました。