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

ブラウザでプレビュー

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
各端末向けに主要コンテンツ部分の制作が完了したら、次は実際にブラウザでプレビューしてみましょう。このレッスンでは、ブラウザでプレビューを行う手順について、解説していきます。
講師:
07:24

字幕

このレッスンでは Dreamweaver でレスポンシブ Web デザインを制作していくにあたり制作しているファイルをブラウザで確認する方法について解説いたします。まずはダウンロードしてきたファイルの中にあるこの「 preview 」というフォルダーの中に「 index.html 」こちらが入っていますのでこちらを Dreamweaver で開いておいてください。そしてこれがそのファイルを開いた状態となります。この画面は左にコードビューそして右にデザインビューそしてデザインビューは今スマートフォンですね。スマートフォンの画面サイズで表示しているような状態となっています。このファイルを使いながら今回のレッスンを進めていきたいと思います。それでは早速始めていきましょう。さてこのような形で Dreamweaver で制作しているファイル、これをブラウザでプレビューしたいときその場合は Dreamweaver のアプリケーションメニューのファイルからこちらの「ブラウザーでプレビュー」。そしてこちらでプレビューしたいブラウザを選択してクリックすれば今制作中のファイルをブラウザで開いてくれます。それでは一度こちらの「 Google Chrome 」を選択してブラウザで開いてみましょう。 するとこのようにブラウザが立ち上がってファイルを表示することができました。今 Dreamweaver でレスポンシブ Web デザインを制作しているわけですがもちろん今こちらは PC ですねPC で確認している状態ですのでこのような形で PC のレイアウトで表示されてきたと思います。ではこれをタブレット用したい場合はそしてスマートフォン用のレイアウトを確認をしたい場合はどのようにすれば良いでしょうそれはいたって簡単です。このブラウザの横幅ですね、横幅のサイズを変更してあげるだけで大丈夫です。一度やってみましょう、このブラウザのアプリケーションの縁ですね。縁の方を持って右にこのようにドラッグしていきます。するとこのように徐々に徐々にレイアウトが変わっていってますね。そしてここでブレイクポイントです。ここでタブレット用のレイアウトに変更されました。そしてさらにどんどんやっていくとこのようにサイズに追従してレイアウトが変わっていきますね。今回のファイルはタブレット用のレイアウトとスマートフォン用のレイアウト今の段階ではどちらもワンカラムで同じ状態なので見栄えに変化はありませんね。これを例えばまた元に戻していくとこのようにまたこちらでレイアウトが変わってPC のレイアウトに変わりました。 このようにブラウザを通してレスポンシブ Web デザインを確認していく際には単純にブラウザの幅を変更してあげるだけで大丈夫です。もう1つ効率的な確認方法をご紹介します。それは Chrome ブラウザのデベロッパーツールを使う方法です。一度やってみましょう。今このファイルを表示しているブラウザはChrome のブラウザです。まずはこちらの三本線のアイコンこちらをクリックしてそして「ツール」そしてその状態からこちらの「デベロッパーツール」を選択します。するとこのように通常画面の下にですね。こういったデベロッパーツールの画面が表示されてきますのでこのデベロッパーツールのこちらのボタンですね、こちらのボタンを右クリックで長押しします。するとこういったボタンが下に出てきますのでこれをクリックします。するとこのようにデベロッパーツールが画面の右端に移動しました。そしてこの状態でこちらの「 Elements 」というボタンを押します。するとこのように今現状の HTML タグが表示されましたね。そしてこの状態からレスポンシブのレイアウトの確認ですがこちらのデベロッパーツールの左端のこのライン、このラインをドラッグして左に移動させれば大丈夫です。 このように先ほどと同じようにブラウザの幅が変わっていってるような感じですね。そしてまたこのように元に戻していくとこのようになりますね。このデベロッパーツールで便利なのはこういったかたちで今現状のサイズですね。表示サイズが上の方に出ているかと思います。この部分ですね、これを見ながら確認することができるのでレスポンシブ Web デザインを作るときには大変便利です。また HTML タグだけでなくその選択した HTML タグに紐づいた CSS ですね。こちらで確認することができます。ですのでレスポンシブ Web デザインのような解像度に応じて適応するスタイルシートが変わるときそういった状況を確認するのにとっても便利です。それでは Dreamweaver に戻りましょう。さて先ほどブラウザでプレビューする際にこちらの Dreamweaver のアプリケーションメニューの「ファイル」からこのように「ブラウザーでプレビュー」と選択していきましたが他にもブラウザでプレビューするためのアプローチがあります。それはまずこちらこの地球のアイコンですね。こちらをクリックすると同様にこういった「ブラウザーでプレビュー」というものが出てきますのでこれを選択することによってもブラウザでファイルを開くことができます。 またこちらの「ブラウザーリストの編集」こちらをクリックするとこのような環境設定の画面が出てくるのですがこちらで他のブラウザの登録なども行うことができます。今は Google Chrome と Safari だけですが例えば Firefox や Internet Explorerそういったものもこの中に追加することができてDreamweaver からそのブラウザを指定して立ち上げることができます。それではこちらの画面を閉じます。そしてもう1つのアプローチ、それはキーボードによるショートカットキーです。キーボードのショートカットキーを確認するためには先ほどのこちらのアイコンを一度クリックしてみるとこのようにブラウザの名前のあとにこういったショートカットキーが書いています。これをキーボードで押してあげることによってこういったメニューからブラウザを起動するのではなくてキーボードからすぐにブラウザを立ち上げてプレビューすることが可能です。以上で今回のレッスンは終了です。今回は Dreamweaver でレスポンシブ Web デザインを制作するにあたって制作しているファイルをブラウザで確認する方法について解説いたしました。 ブラウザでのプレビューは頻繁に利用することになりますのでショートカットキーと合わせて覚えておくと良いでしょう。

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

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

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

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

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

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