ビューポートのサイズを変更する

レスポンシブ レイアウトを作成するときは、さまざまな画面サイズでのドキュメントの外観を確認することをおすすめします。Google Web Designer では、そのサイズや向きに指定したスタイルがステージ上のドキュメントに適用されるようにビューポートを調整できます。

[レスポンシブ] パネルで [マスタールール] を選択している場合は、ユニバーサル スタイルのみが適用されます。ビューポートに応じたスタイルを有効にする方法は以下のとおりです。

  • [レスポンシブ] パネルの [メディアクエリ] タブで、[メディアルール] を選択します。
  • 2 方向の広告の場合は、代わりに [ルール(横向き)] か [ルール(縦向き)] を選択します。

マウスを使ってビューポートのサイズを自由に変更する

  1. ツールバーでビューポートのサイズ変更ツール をクリックします。ビューポートの周囲に枠線が表示されます。
  2. ビューポートの枠線上にある薄いグレーのハンドルのいずれかをドラッグします。
    • Shift キーを押しながらドラッグすると、元のアスペクト比を維持できます。

ビューポートのサイズを指定する

  1. ツールバーでビューポートのサイズ変更ツール をクリックします。
  2. アスペクト比を維持するには、上部にあるツール オプション バーで [アスペクト比を固定] を選択します。
  3. ツール オプション バーで幅と高さの値を変更します。

ビューポートを所定のサイズ範囲に収める

  • 縦または横のルーラーで色付きの領域をクリックします。

プリセットされたビューポート サイズを選択する

  1. ツールバーでビューポートのサイズ変更ツール をクリックします。
  2. ツール オプション バーの [プリセット] プルダウンから該当するサイズを選択します。

独自のプリセット ビューポート サイズを追加する

  1. ビューポートのサイズ変更ツール を選択します。
  2. 保存するサイズにビューポートを設定します。
  3. ツール オプション バーで「カスタムのビューポート サイズの追加」ボタン をクリックします。[プリセット] プルダウンで、[カスタムサイズ] の下に現在のビューポート サイズが表示されます。

ビューポートの横向きと縦向きを切り替える

  1. ツールバーでビューポートのサイズ変更ツール をクリックします。
  2. ツール オプション バーで「向きの切り替え」ボタン をクリックして、幅と高さの値を反転させます。

複数のビューポート サイズをプレビューする

プレビュー モードで [すべてのサイズ] を使用すると、ブラウザで複数のビューポート サイズを一目で確認できます。 このプレビュー モードはレスポンシブ ドキュメントでのみ使用できます。

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。