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

ライブビュー機能でプレビュー

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Dreamweaverには、ブラウザでのプレビューと同様の確認を、ツール内で行うことのできるライブビュー機能というものがあります。このレッスンでは、そのDreaweaverのライブビュー機能を使って、レスポンシブWebデザインのプレビューを行う手順についてご紹介します。
講師:
07:48

字幕

このレッスンでは Dreamweaver でレスポンシブ Web デザインを制作していくにあたり制作しているファイルを Dreamweaver に搭載されているライブビュー機能を使ってプレビューする方法について解説いたします。まずはダウンロードしてきたファイルの「 liveview 」というフォルダーの中にあるこの「 index.html 」こちらを Dreamweaver で開いておいてください。そしてこれがそのファイルを開いた状態です。この画面は現在左にコードビューそして右にデザインビュー、そしてそのデザインビューはスマートフォンの画面サイズで表示されています。このファイルを使って今回のライブビュー機能について解説を進めていきたいと思います。それではレッスンを始めていきましょう。今回紹介するDreamweaver のライブビュー機能ですがこれは実際のブラウザエンジンをDreamweaver に内蔵しており、それを通して現在制作中のファイルを表示させることで実際にブラウザを通してサイトを見た状態に近い形で再現させることが可能な機能です。今この画面で表示されているこちらのデザインビューこちらもある程度ブラウザで制作中のファイルを表示したときに近い形で表示はされてくるもののこのデザインビューは簡単に言うと目視での編集を行うためのビューであって実際にブラウザでの表示を再現しているわけではありません。 したがってこれからご説明するライブビューに関してはこのデザインビューとは違ってさらにブラウザで表示した形に近い形で確認することができるといった感じです。それではこの状態から一度ライブビューに切り替えてみましょう。ライブビューに切り替えるにはこちらのボタンですね。ここに「ライブ」と書いてますがこちらをクリックすることで変更することができます。それでは押してみます。するとこのような形に少し変更になりましたね。そして今現在こちらの可変グリッドレイアウトのこちらのグリッドが表示されている状態ですのでこちらを消してあげましょう。消すにはこちらのアイコンですね、こちらのボタンを押してあげます。するとこれでブラウザの表示に限りなく近い状態で表示されているのが分かります。この状態ですね こちらのビューのことをライブビューと言います。ちなみにこのライブビューですがデザインビューと同様に画面サイズを各端末向けに変更することができます。一度やってみましょう。まず分かりやすいようにこちらをドラッグして領域を広げておきます。そして今スマートフォンですね。では次タブレット端末向けのサイズに変更してみます。こちらをクリックするとこのように見栄えが変わりましたね。 さらに次は PC 向けのサイズに変えてみましょう。こちらをクリックするとこのようにレイアウトが変更になりましたね。この今開いている HTML ファイル、これは PC 上のみレイアウトの変更がかかっている状態ですのでこのような形でライブビューをPC のサイズに変更してあげることによってこのように変更されたものが表示されたわけです。このようにライブビュー機能を使うことによってその都度ブラウザを立ち上げて確認する必要がなくなり同じ Dreamweaver の編集画面の中でこのように各端末に向けたサイズの切り替え等々も含めて表示を確認することができます。さてこのライブビューですが大変便利な機能が2つ付いています。そちらも合わせてご紹介したいと思います。まずは分かりやすいようにコードビューの方を出してきてそしてこちらのライブビューですね、こちらをスマートフォンサイズに変えておきます。ご紹介したい機能その1それはライブコード機能です。ライブコード機能はここにあるボタンを押すことで有効にすることができます。一度押してみましょう。するとこちらのコードビューが黄色になりましたね。このようにコードビューが黄色くなっている状態ではこちらおコードビューを編集することはできなくなっています。 さてこのライブコード一体どういう機能なのかといいますとこちらは JavaScript などのプログラミングをこのページで走らせているときそのプログラムが走っている様子をこちらのコードビューでリアルタイムに確認することができる機能です。例えばこのページの中にボタンが1つあったとしてそのボタンを押したときにこちらの下に例えばdiv 要素が追加されていくような形のプログラムがあったとします。その場合にここに置いてあるボタンを押すことによってこちらのコードビューの中にも div タグが同様に増えていくといった形で動的に動いている処理の HTML コードを確認することができる機能です。さらにもう1つの機能を紹介します。それはこちらの「インスペクト」という機能です。一度クリックしてみましょう。そしてライブコードの方は解除しておきます。このインスペクトの機能ですが内容的には Chrome ブラウザのデベロッパーツールまたは Firefox の Firebug の機能に似たようなものです。このように該当する要素にマウスを合わせるだけで該当する HTML ソースと CSS のプロパティの確認を行うことができる機能です。 これまではこういった機能を使うためにはブラウザを通してファイルを確認する必要がありましたがこの機能を使えばいちいちブラウザを立ち上げることもなく、Dreamweaver の中で確認を完結させることが可能です。それではこの「インスペクト」を解除しておきましょう。さて最後にこのライブビューですがデザインビューのようにこちらに書かれている内容を変更したりすることも可能です。一度やってみましょう。例えばこちらの article タグですね、こちらを選択して、そしてこの中でダブルクリックしてみましょう。するとこのように編集モードに変わるので例えばこちらのレイアウトというのを消してみましょう。そうするとこのようにレイアウトという文言が消えてこちらのコードビューの中でも消えていますね。またこういったテキストの変更だけではなく画像の変更したり、またその HTML タグですね、例えば article に紐づいているクラスや ID の変更を行ったりすることも可能です。とても便利な機能ですので覚えておくと良いでしょう。以上でレッスンは終了です。今回は Dreamweaver でレスポンシブ Web デザインを制作するにあたってライブビュー機能の使い方について解説いたしました。 このライブビューを使いこなせるようになると作業効率がグンと向上しますので積極的に使っていきましょう。但し、これはあくまで制作をムーズに行う為の補助的な機能となりますので最終的な制作ファイルの確認には必ず実際のブラウザにて行うようにしてくださいね。

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

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

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

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

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

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