ブラウザーでのプレビュー

今回は Dreamweaverで作成した Webサイトをプレビューする方法を説明します リアルタイムのブラウザープレビューを使います 作成したサイトが表示されています これを複数のデバイスで表示確認します なぜかと言うと レスポンシブサイトだからです 画面サイズに応じて 最適な表示になるか確認しましょう ブラウザープレビューボタンは右下にあります 今回は、「Google Chrome」を使用します これがChromeで表示されるサイトです このブラウザーウィンドウを セカンドモニターで開き Dreamweaverでの調整が どのように反映されるか確認します また、デスクトップ画面だけでなく スマートフォン、タブレットなどで 確認することも重要です そのためには、すべてのデバイスを 同じWifiネットワークで接続する必要があります ここではデバイスのネットワーク接続は設定済みです デバイスでのプレビューにはいくつかの方法があります リアルタイムプレビューボタンをクリックして URLを入力する方法 タブレットでやってみましょう URLを入力します ご覧ください タブレットでのWebサイトです もう1つ、面白い方法があります 右下のQRコードを使用します デバイスにQRコードリーダーを入れておいてください 様々な無償アプリがあります スマートフォンでリーダーを開き QRコードにリーダーのカメラを向けます 読み込み成功 しばらくすると サイトが表示されます レスポンシブサイトで 複数のレイアウトがあります テキストもレイアウトも異なります 画面サイズに応じて最適な表示にするためです このプレビューが素晴らしいのは、編集後の更新です 両方ともフッターを表示します Dreamweaverでこのグラデーションを 指定しているコードを見つけます 値をゼロに変更しましょう このように瞬時に更新されます 設定を微調整したときに モバイルデバイスなど他のデバイスで 想定外の影響がないかを その場で確認できます 扱いやすく 見ながら調整できます 今回は以上です Dreamweaverでページをプレビューする方法 リアルタイムのブラウザープレビューを紹介しました