レスポンシブ機能は、AMP HTML 広告ではサポートされていません。動画広告、アニメーション GIF、イメージ広告では、マルチサイズ レイアウトを使用できます。
レスポンシブ レイアウトを作成する際は、さまざまなビューポート サイズでドキュメントの外観がどのように変化するかを作業中に確認することをおすすめします。
マウスを使ってビューポートのサイズを自由に変更する
この方法では、割合に基づく要素の変更は確認できますが、スタイルルールの変更は確認できません。
- [レスポンシブ] パネルで「ベース ドキュメントを編集する」ボタン
をクリックします。ビューポートの周囲に枠線が表示されます。
- ビューポートの枠線上にある薄いグレーのハンドルのいずれかをドラッグします。
- Shift キーを押しながらドラッグすると、元のアスペクト比を維持できます。
- ハンドルが表示されない場合は、トップメニューから [表示] > [レスポンシブ] > [ビューポートのサイズ変更ハンドル] を選択します。
特定のビューポート サイズを選択する
次のいずれかの方法を使用します。
- [レスポンシブ] パネルに表示されているサイズのいずれかを選択します。
- 必要なサイズが表示されない場合は、リストの下部にある [カスタムサイズを追加] をクリックして必要なディメンションを入力します。
ビューポートを所定のサイズ範囲に収める
- [レスポンシブ] パネルに一覧表示される範囲メディアルールのいずれかを選択します。ビューポートが選択したサイズ範囲に収まらない場合、ビューポートのサイズはその範囲の上限の幅と高さに自動的に変更されます。
- ビューポートの枠線上にある薄いグレーのハンドルのいずれかをドラッグします。選択した範囲内でのみビューポートのサイズを変更できます。選択した範囲は、ルーラー上に色付きのバーで示されます。
- Shift キーを押しながらドラッグすると、元のアスペクト比を維持できます。
- ハンドルが表示されない場合は、トップメニューから [表示] > [レスポンシブ] > [ビューポートのサイズ変更ハンドル] を選択します。
複数のビューポート サイズをプレビューする
[レスポンシブ] パネルのレスポンシブ プレビュー ボタン をクリックすると、ドキュメントの操作中に複数のビューポート サイズを一目で確認できます。[サイズをプレビュー] チェックボックス
がオンになっているサイズはすべて、プレビュー パネルに表示されます。このプレビュー モードはレスポンシブ ドキュメントでのみ使用できます。
