SuperPreview でのページの表示

  • [アーティクル]

SuperPreview を使用すると、異なる Web ブラウザー上でのレイアウト問題のテストおよびデバッグのプロセスを簡略化できます。SuperPreview を使用して、複数のブラウザーで同時にページを表示、またはブラウザーでページがどのようにレンダリングされるかをページの模擬表示イメージと比較します。

Microsoft Expression 開発サーバーを使用して、ASP.NET または PHP の Web ページをプレビューできます。Expression 開発サーバーは Microsoft Expression Web のインストール時にインストールされます。Expression 開発サーバーを修復または再インストールする必要がある場合には、「Expression 開発サーバーのインストール」を参照してください。

ASP.NET または PHP の Web ページのプレビュー方法の詳細については、「ASP.NET ページのプレビュー」および「PHP ページのプレビュー」を参照してください。プレビュー用のカスタム URL 使用の詳細については、「ブラウザーでのページのプレビュー」を参照してください。

Noteメモ :

ASP (ASP.NET ではない) ページをプレビューするには、Microsoft インターネット インフォメーション サービス (IIS) を使用する必要があります。 プレビュー用のカスタム URL 使用の詳細については、「ブラウザーでのページのプレビュー」を参照してください。

ページを SuperPreview で表示するには

  • Expression Web でページが開かれ選択された状態で、[SuperPreview に表示] アイコン Ee371310.79c275f9-6a28-4b9c-879e-07293f26da55(ja-jp,Expression.40).png をクリックします。または、[ファイル] メニューから、[SuperPreview に表示] または、Shift キーを押しながら F12 キーを押します。現在選択されているページが SuperPreview で表示されます。

    Noteメモ :

    最初に SuperPreview を使用するとき、ページは表示されません。この場合、ベースライン ブラウザーを選択し、SuperPreview を閉じ、[SuperPreview に表示] アイコン Ee371310.79c275f9-6a28-4b9c-879e-07293f26da55(ja-jp,Expression.40).pngを再度をクリックします。

ポインター モード

2 つの SuperPreview ポインター モードにより、SuperPreview との対話方法を変更できます。

  • [選択モード] w4_sp_selectionをクリックし、[選択モード] ポインターを選択します。[選択モード] を使用して、比較用の個々のページ セクションを選択します。

  • [手のひらモード] w4_sp_panningをクリックし、[手のひらモード] ポインターを選択します。[手のひらモード] を使用して、ページをブラウザー ビュー内にドラッグします。このモードでは、マウス ホイールによりブラウザー ビューの倍率が変更されます。[手のひらモード] ではページ セクションを選択できません。

DOM 反転表示

ページでポインターを移動して、ページの異なるセクションを反転表示できます。セクションをクリックし選択します。セクションの HTML タグ名、そのクラス、または ID 名およびそのサイズと位置属性がステータス バーに表示されます。SuperPreview には 2 つの DOM 反転表示モードがあります。

  • [ボックス反転表示モード] w4_sp_box では、選択した要素がベースライン ブラウザー ビューに青色で反転表示されます。選択した要素は、比較ブラウザー ビューでは緑色で反転表示されます。

  • 通常、[暗転表示モード]w4_sp_lights_out では選択した要素は通常に表示され、ページの残り部分は暗く表示されます。

ルーラー表示

[ルーラーの可視性の切り替え] w4_sp_ruler をクリックし、ルーラー表示をオン、またはオフにします。配置ガイドを作成するには、ルーラー表示をオンにしておく必要があります。配置ガイドの詳細については、このトピックの後半にある「配置ガイド」を参照してください。

サムネイル表示

サムネイル表示を使用すると、ページの領域を素早く選択できます。

[サムネイルの表示/非表示] w4_sp_thumbnail をクリックして、サムネイル表示のオン、またはオフにします。

配置ガイド

配置ガイドを追加すると、ページ内の複数の要素の配置の評価に役立ちます。

  • 水平ルーラーをクリックして水平ガイドを作成します。これをページ ビューの位置までドラッグすることができます。ガイドが選択されている間、ガイドからページの左上コーナーまでの垂直距離がピクセル単位で表示されます。ガイドをページ表示の範囲外にドラッグして削除します。

  • 垂直ルーラーをクリックして垂直ガイドを作成します。これをページ ビュー上の位置までドラッグすることができます。ガイドが選択されている間、ガイドからページの左上コーナーまでの水平距離がピクセル単位で表示されます。ガイドをページ表示の範囲外にドラッグして削除します。

  • [ガイドの表示/非表示] w4_sp_guide をクリックして、ガイドを表示または非表示にします。

レイアウト モード

SuperPreview には、4 つのレイアウト モードがあります。

  • [左右分割レイアウト] w4_sp_vertical_split では、並行に配置してブラウザー ビューを比較します。

  • [上下分割レイアウト] w4_sp_horizontal_split では、1 つのブラウザー ビューとその下にあるブラウザー ビューを比較します。

  • [オーバーレイ レイアウト] w4_sp_overlayでは、オーバーレイ モードでブラウザー ビューを比較します。

  • [シングル レイアウト] w4_sp_singleでは、シングル ブラウザー ビューが表示されます。

DOM ビュー

[DOM] タブをクリックして、DOM ツリー表示をオン、またはオフに切りえます。

ドキュメント オブジェクト モデル (DOM) ツリー内の要素の位置が分かります。左右分割または上下分割レイアウト ビューを使用している場合、どちらのブラウザー ビューでも要素を選択することができ、選択されたブラウザー ビューの属性を更新した DOM ビューが表示されます。または、DOM ビューの要素を選択するとブラウザー ビューを更新することができます。

レイアウト ウィンドウ表示の選択

[ベースライン] または [比較] ブラウザーを選択するには、コンピューターにインストールされているサポート対象のブラウザーの一覧から選択します。イメージ ビュー モードを選択すると、ブラウザー ビューと全体的なレイアウト (comp) イメージを比較できます。

SuperPreview を使用すると、インストールされているバージョンにより異なりますが、Internet Explorer の次のバージョンでページを表示できます。

  • Internet Explorer 8   Internet Explorer 8 でのプレビュー (Internet Explorer 8 がインストールされている場合にのみ使用できます)

  • Internet Explorer 8 → 7   Internet Explorer 7 互換モードで実行中の Internet Explorer 8 でのプレビュー (Internet Explorer 8 がインストールされている場合にのみ使用できます)

  • Internet Explorer 7→7   互換モードで実行中の Internet Explorer 7 でのプレビュー (Internet Explorer 7 がインストールされている場合にのみ使用できます)

  • Internet Explorer 7   Internet Explorer 7 でのプレビュー

  • Internet Explorer 6   Internet Explorer 6 でのプレビュー

最大 8 個の [比較] ブラウザーを選択し、それぞれのアイコンをクリックして素早く切り替えることができます。

[追加] Ee371310.31665cc2-3483-4f04-91fc-029a20d1d7a9(ja-jp,Expression.40).png をクリックして、ブラウザーを [比較] ビューに追加します。[ベースライン ブラウザー位置の切り替え] Ee371310.c219a564-2cba-4f7e-a680-e793f1816be1(ja-jp,Expression.40).png をクリックして、[ベースライン] ブラウザー ビューと [比較] ブラウザー ビューを切り替えます。

場所

プレビューする Web ページの URL またはファイル パスを入力します。

Noteメモ :

ファイル パスを入力した場合、既定のページは表示されません。既定のページのファイル名を明示的に含める必要があります。たとえば、次のようになります。

C:\inetpub\wwwroot\default.html

ページ対話モード

Microsoft Expression Web SuperPreview では、ユーザー認証を必要とする Web コンテンツをプレビューできます。

w4_sp_interactive をクリックして (ページ対話モードを使用して安全なサイトにログオンし、プレビューするページに移動します)、[ページ対話モード] 画面を表示します。

ページ対話モードの使用の詳細については、「セキュリティで保護された Web サイト コンテンツの表示」を参照してください。

SuperPreview オンライン サービス

Microsoft Expression Web SuperPreview オンライン サービスは、SuperPreview の機能を拡張して、さらに多くのブラウザーやオペレーティング システムをサポートできるようにするサービスです。

[SuperPreview オンライン サービス] w4_sp_remoteをクリックして、リモート ブラウザー プレビューを有効にします。

Noteメモ :

SuperPreview オンライン サービスがこのコンピューターで有効になっていない場合、[SuperPreview オンライン サービス] アイコン (w4_sp_remote) は表示されません。w4_sp_remote をクリックして、SuperPreview のオンライン サービス サインアップ プロセスを開始します。

SuperPreview オンライン サービスのライセンス認証の詳細については、「SuperPreview オンライン サービスのライセンス認証」を参照してください。

ズーム ツール

倍率のレベルを選択するか、倍率の値を入力します。

オプション

[オプション] w4_sp_prefs をクリックして、[オプション] ダイアログ ボックスを開きます。

[オプション] ダイアログ ボックスでは次のオプションが使用できます。

  • [サーバーの状態]   [状態の確認] をクリックして、SuperPreview オンライン サービスの状態を表示します。

  • [パッケージ化]   [リモート ブラウザー プレビュー用に Web ページを常にパッケージ化する] を選択して、ページのすべてのアセット ファイルをパッケージに含めます。これは、特にサイトがイントラネット上にある場合に、ページのレンダリングに関する問題に役立つ可能性があります。

    Noteメモ :

    ただし、これによりリモート ブラウザーのレンダリング パフォーマンスが低下する可能性があります。

  • [アカウント管理]   次のアカウント管理オプションを設定します。

    • [非アクティブ化]   クリックすると、このコンピューターの SuperPreview オンライン サービスが無効になります。

    • [アカウントの削除]   クリックすると、SuperPreview オンライン サービス アカウントが削除されます。

    Caution note注意 :

    SuperPreview アカウントを削除すると、アカウントのライセンス認証に使用した電子メール アドレスに関連付けられている SuperPreview オンライン サービスのすべてのインスタンスが無効になります。SuperPreview オンライン サービス アカウントを削除した場合、SuperPreview オンライン サービスを再度ライセンス認証するには、削除した電子メール アドレスに関連付けられているコンピューターごとにサインアップ プロセスを再度完了させる必要があります。

関連項目

概念

SuperPreview オンライン サービスのライセンス認証
SuperPreview ワークスペース