Dreamweaverのブラウザでプレビューの使い方をお探しですね。

広告

Dreamweaverで作ったページを確認する方法｜ブラウザ・スマホでのプレビューを初心者向けに解説

DreamweaverでHTMLやCSSを編集したら、「実際のブラウザではどう見えるのか」「スマホでレイアウトが崩れていないか」を確認する作業がとても大切です。

Dreamweaverの画面上だけで判断してしまうと、ブラウザによる表示の違いやスマホ対応の崩れに気づけないことがあります。

この記事では、作ったページをちゃんと確認するために、Dreamweaverでブラウザプレビューする方法と、スマホ・タブレットで表示を確認する方法を、初心者の方にもわかりやすく解説していきます。

1. Dreamweaverで作ったページを確認する前に知っておきたいこと

Dreamweaverには、作成中のWebページを確認するための機能がいくつか用意されています。

代表的なのは、Dreamweaverの中で表示を確認できる「ライブビュー」と、ChromeやSafari、Firefoxなど実際のブラウザで確認する「ブラウザプレビュー」です。

さらにバージョンによっては、スマホやタブレットで表示を確認できる「デバイスプレビュー」や、編集内容がブラウザにリアルタイムで反映されるプレビュー機能も使えます。

まず知っておいてほしいのは、Dreamweaverの画面上で見えている表示と、実際のブラウザでの表示は必ずしも完全に同じではないということです。

Webページは、ブラウザの種類、画面の幅、OS、読み込まれるフォント、JavaScriptの動き方などによって見え方が変わることがあります。

だから、コーディングが終わったらDreamweaverの中だけで確認せず、実際のブラウザで表示を確認するのが基本です。

確認する前には、作成中のファイルをちゃんと保存しておくことも大事です。

保存していない状態でプレビューすると、古い内容が表示されたり、CSSや画像の変更が反映されていないように見えたりすることがあります。

また、画像やCSS、JavaScriptのパスが正しく指定されているかも確認しましょう。

特に初心者の方は、HTMLファイルだけを開いて確認しているつもりでも、関連ファイルの場所がずれていてデザインが崩れるケースがよくあります。

Dreamweaverでサイト全体を管理している場合は、「サイト設定」でローカルサイトフォルダーを正しく指定しておくと確認作業がスムーズです。

ローカルサイトフォルダーというのは、自分のパソコンの中でWebサイトのファイルをまとめて管理する場所のこと。

これを設定しておくと、Dreamweaverが画像やCSSの位置関係を把握しやすくなって、リンク切れや読み込みミスを防ぎやすくなります。

2. Dreamweaverでブラウザプレビューする基本手順

Dreamweaverでブラウザプレビューを行う基本的な流れは、作ったHTMLファイルを開いて、プレビューしたいブラウザを選んで表示するだけです。

一般的には、画面上部のメニューから「ファイル」やプレビュー関連の項目を選んで、「ブラウザーでプレビュー」や「リアルタイムプレビュー」を実行します。

バージョンによってメニュー名やアイコンの位置が違うことがありますが、考え方は同じです。

ブラウザプレビューを使うと、Dreamweaverの中での見た目ではなく、実際のWebブラウザでページの表示を確認できます。

たとえば、Google Chromeで表示したときに余白が思ったとおりになっているか、ボタンの位置がずれていないか、リンクをクリックできるかなどをチェックできます。

Dreamweaverのライブビューは便利なんですが、最終確認としては実際のブラウザで見るほうが安心です。

基本的な確認の手順は、次のように進めると迷いにくくなります。

– HTML、CSS、JavaScriptなど編集したファイルを保存する
– Dreamweaverで確認したいHTMLファイルを開く
– プレビューしたいブラウザを選んで、ブラウザプレビューを実行する
– 表示、リンク、画像、フォーム、動きのある要素を確認する

ブラウザが自動で開かない場合や、使いたいブラウザが選択肢に出てこない場合は、Dreamweaverの環境設定を確認してみましょう。

「環境設定」や「プレビューに使用するブラウザー」の設定画面から、使いたいブラウザを追加できる場合があります。

Chrome、Edge、Firefox、Safariなど複数のブラウザを登録しておくと、表示の違いを比較しやすくなります。

また、ショートカットキーでプレビューできる環境もあります。

DreamweaverのバージョンやOSによって違いますが、よく使うブラウザをプライマリブラウザとして設定しておくと、作業中にすばやく確認できます。

何度も編集と確認を繰り返すWeb制作では、プレビューの操作を短縮できるだけでも作業効率がぐっと上がります。

ひとつ注意したいのが、PHPなどサーバー上で動くファイルを確認する場合です。

単純にHTMLファイルとしてブラウザで開くだけでは、PHPの処理やデータベース連携が正しく動作しないことがあります。

その場合は、Dreamweaverのサイト設定でテストサーバーを設定するか、ローカル開発環境を用意して確認する必要があります。

普通のHTMLページなのか、サーバー処理を含むページなのかによって、正しい確認方法を選ぶことが大切です。

3. スマホ・タブレットでデバイスプレビューする方法

スマホ対応のWebページを作る場合、パソコンのブラウザ幅を狭めるだけでは確認が不十分なことがあります。

実際のスマホでは、タップのしやすさ、文字の読みやすさ、画像の表示サイズ、ヘッダーメニューの開閉、フォーム入力のしやすさなど、パソコンでは気づきにくいポイントがたくさんあります。

だから、Dreamweaverで作ったページは、できるだけ実際のスマホでも確認するのがおすすめです。

Dreamweaverには、バージョンによってスマホやタブレットで確認できるデバイスプレビュー機能が用意されています。

一般的には、Dreamweaver側でプレビュー用のURLやQRコードを表示して、スマホでそのQRコードを読み取ってページを開く流れです。

パソコンとスマホが同じWi-Fiネットワークに接続されている必要があることが多いので、うまく表示できないときは通信環境を確認してみましょう。

デバイスプレビューを使うときは、次の点を確認しておくとトラブルを減らせます。

– パソコンとスマホが同じネットワークに接続されている
– Dreamweaverで対象ファイルを保存している
– セキュリティソフトやファイアウォールが通信を妨げていない
– 画像、CSS、JavaScriptが相対パスで正しく読み込まれている

もしDreamweaverの画面にデバイスプレビュー機能が見当たらない場合は、使っているDreamweaverのバージョンによって機能名や提供状況が違う可能性があります。

でも、確認をあきらめる必要はありません。

ローカルサーバーを立てて同じネットワーク内のスマホからアクセスしたり、一時的にテスト用サーバーへアップロードしてスマホでURLを開いたりすれば、実機での確認はできます。

スマホ確認では、単に「表示されるか」だけじゃなく、「使いやすいか」まで見ることが大事です。

たとえば、ボタン同士の間隔が狭すぎるとタップミスが起きやすくなります。

文字サイズが小さすぎると、ユーザーが拡大しないと読めないページになってしまいます。

画像が大きすぎると読み込みが遅くなって、離脱につながることもあります。

Dreamweaverでデザインが整って見えても、スマホの実機では印象が変わるので、必ずユーザー目線で確認しましょう。

さらに、iPhoneとAndroidでは標準ブラウザや表示の癖が違うことがあります。

できれば、iPhoneのSafari、AndroidのChromeなど、複数の環境でチェックすると安心です。

すべての端末を用意するのは難しいですが、主要なスマホ幅を意識するだけでも、レスポンシブデザインの精度は高まります。

4. ブラウザプレビュー・スマホプレビューで確認すべきポイント

Dreamweaverでプレビューを行う目的は、ページが「表示されるか」を見るだけじゃありません。

公開した後にユーザーが問題なく閲覧できるか、デザインや操作性に不自然な点がないかを確認することが本当の目的です。

Webページは、HTML、CSS、JavaScript、画像、外部フォントなど複数の要素で構成されているので、どこか一つに問題があるだけでも表示崩れが起きることがあります。

ブラウザプレビューでは、まずレイアウト全体を確認します。

ヘッダー、メインビジュアル、本文、サイドバー、フッターなどが意図した位置に配置されているかを見ましょう。

次に、リンクやボタンが正しく動作するかを確認します。

リンク先が間違っている、クリックしても反応しない、別タブで開く設定が想定と違うといったミスは、公開前に見つけておきたいポイントです。

スマホプレビューでは、画面幅が狭くなったときの変化を重点的に確認します。

レスポンシブデザインでは、パソコンでは横並びだった要素をスマホでは縦並びにすることがよくあります。

この切り替わりがうまくいっていないと、文字が画面外にはみ出したり、画像が大きすぎて横スクロールが発生したりします。

横スクロールはスマホサイトで特に避けたい表示崩れの一つです。

公開前の確認では、以下の項目を一通り見ておくと安心です。

– 画像や背景画像が正しく表示されているか
– CSSが反映されて、余白や文字サイズが思ったとおりになっているか
– ナビゲーション、ボタン、フォームが操作できるか
– スマホで横スクロールや文字の重なりが発生していないか
– ページの読み込みが極端に遅くないか

もし変更した内容がブラウザに反映されない場合は、キャッシュが原因のことがあります。

キャッシュというのは、ブラウザが過去に読み込んだファイルを一時的に保存する仕組みです。

ページ表示を速くする便利な機能なんですが、制作中は古いCSSや画像が残ってしまって、修正が反映されていないように見えることがあります。

その場合は、ブラウザを更新する、スーパーリロードを行う、キャッシュを削除するなどの方法で再確認してみましょう。

Dreamweaverで作ったページを確認する流れは、「保存する」「ブラウザで見る」「スマホで見る」「問題点を直す」の繰り返しです。

最初は手間に感じるかもしれませんが、この確認作業を丁寧に行うほど、公開後の表示崩れやユーザーの離脱を防ぎやすくなります。

特にスマホからの閲覧が多い今では、パソコン表示だけで完了とせず、スマホ・タブレットでの見え方まで確認することが欠かせません。

Dreamweaverのプレビュー機能を活用しながら、実際の利用環境に近い状態でページをチェックしていきましょう。

広告