モバイル用のプレビュー確認を行う方法 (Dreamweaver CC 2014)

内容 (What's Covered)

この文書では、Adobe Dreamweaver でモバイル端末用のページプレビューを行う方法について説明します。

A. ウィンドウサイズの変更

Dreamweaver では、ウィンドウサイズの変更機能を使って、現在編集しているページが複数種類の画面解像度をサポートするデバイスに表示された場合にどのように見えるかを確認することができます。

ウィンドウサイズの変更機能では、デフォルトとして次の種類の画面がサポートされていますが、他のサイズを選択したり、ピクセルで指定することも可能です。

  • モバイル (画面サイズのデフォルト値 : 480 x 800 ピクセル)
  • タブレット (画面サイズのデフォルト値 : 768 x 1024 ピクセル)
  • フルサイズ (画面幅のデフォルト値 : 1000 ピクセル)

A-1. ウィンドウサイズを選択

  1. Dreamweaver を起動し、ドキュメントを開きます。

  2. ウィンドウ上部のドキュメントツールバーから、ビュー表示として「分割」または「デザイン」を選択します。

  3. 次のいずれかの操作を行います。

    • 表示/ウィンドウサイズ から、ウィンドウサイズを選択します。
    • ドキュメントウィンドウの右下にある、ウィンドウサイズアイコンをクリックします。下矢印をクリックすると他のサイズを選択することもできます。

  4. マルチスクリーンプレビューパネルが開き、プレビューが表示されます。

    ドキュメントウィンドウのビュー表示が、選択したサイズに変更されます。

A-2. 任意でウィンドウサイズを指定する

  1. ファイル/マルチスクリーンプレビュー を選択して、マルチスクリーンプレビューパネルを表示します。

  2. マルチスクリーンプレビューパネルで、「ビューポートのサイズ」をクリックします。

  3. ビューポートサイズを指定して、「OK」をクリックします。

    ※ 「デフォルトに戻す」ボタンをクリックすると、設定がデフォルトに戻ります。

  4. 設定した解像度プレビューが表示されます。

B. ページ方向の変更

高度な機能を備えたモバイルデバイスでは、持ち方が変わるとそれに応じてページの方向が変化します。

Dreamweaver では、ライブビューでもデザインビューでも、ページの縦置き表示と横置き表示を、表示/ウィンドウサイズ から「縦方向」または「横方向」に切り替えることができます。作成しているページが持ち方によってどのように表示されるかをテストし、各方向のレイアウトが意図したとおり表示されるようにすることができます。

 Adobe

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2024

Adobe MAX
クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX

クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX 2024

Adobe MAX
クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX

クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン