ブレークポイントの追加と領域の管理

この機能は AMPHTML 広告では使用できません。

ブレークポイントは、ドキュメント内でスタイルが変更される境界線です。ブレークポイントは 2 つの方法で追加することができます。ルーラーに直接追加するか、スタイルを変更する位置にビューポートのサイズを指定してから、[レスポンシブ] パネルで新しいブレークポイントを追加します。

2 つのブレークポイント間のスペースを領域と言います。Google Web Designer では、広告に幅と高さが異なる複数の領域がある場合、ルーラーでは異なる色のバーとして、[レスポンシブ] パネルでは領域として表示することで、それぞれの領域を区別できるようにしています。異なる領域が重なる四角い部分は、独自のスタイルで表示されます。ブレークポイントを変更することで、領域の形を変更したり、領域を完全に削除したりできます。

メディアルールが有効な場合は、ルーラーに定義済みの領域、ブレークポイント、編集中の領域が表示されます。

Responsive Layout: Advanced Techniques

ブレークポイントを追加する

ブレークポイントをルーラーに直接追加するには:

  1. [レスポンシブ] パネルで [メディアルール](広告の向きをデュアルに設定した場合は [ルール(横向き)] / [ルール(縦向き)])が選択されていることを確認します。
  2. ブレークポイントを追加する横または縦のいずれかのルーラー上で右クリックします。
  3. ポップアップ メニューから [ブレークポイントを追加] を選択します。

[レスポンシブ] パネルでブレークポイントを追加するには:

  1. [レスポンシブ] パネルで [メディアルール](広告の向きをデュアルに設定した場合は [ルール(横向き)] / [ルール(縦向き)])が選択されていることを確認します。
  2. スタイルを変更する位置にビューポートをドラッグします。
  3. [レスポンシブ] パネルの下部にある [ブレークポイントを追加] ボタンをクリックします。
  4. ポップアップ メニューから [幅のブレークポイント] または [高さのブレークポイント] を選択します。ビューポートの縦または横の辺に対応するブレークポイントが追加されます。

ブレークポイントを移動する

ブレークポイントを移動するには

[レスポンシブ] パネルで [メディアルール](広告の向きをデュアルに設定した場合は [ルール(横向き)] / [ルール(縦向き)])が選択されていることを確認してから、次のいずれかの操作を行います。

  • ルーラーのブレークポイントをドラッグします。
  • [レスポンシブ] パネルの [メディアルール] ペインでブレークポイント値をクリックし、値を大きくする場合は右に、値を小さくする場合は左にドラッグします。

領域を削除する

領域を削除するには

[レスポンシブ] パネルで [メディアルール](広告の向きをデュアルに設定した場合は [ルール(横向き)] / [ルール(縦向き)])が選択されていることを確認してから、次のいずれかの操作を行います。

  • 削除する領域を右クリックし、ポップアップ メニューから [選択範囲を削除] を選択します。
  • [レスポンシブ] パネルの [メディアルール] ペインで領域をクリックし、パネルの下部にある削除ボタンをクリックします。

スタイルのオーバーライドを作成する

ブレークポイントの作成では、ブレークポイントによって定義される四角形の領域ごとに別々のスタイルを適用します。たとえば、縦に 1 つ、横に 1 つのブレークポイントを使用する場合、4 つのスタイルを作成することになります。ブレークポイントを設定した後は、要素のスタイルを自由に設定することができます。CSS で定義できる要素は、アニメーションを含め、スタイルごとに変更できます。

スタイルのオーバーライドを削除する

レスポンシブ モードでスタイルに変更を加えると、[マスタールール] で設定されているデフォルトのスタイルがオーバーライドされます。マスター スタイルがオーバーライドされると、プロパティ ラベルが強調表示されます。

オーバーライドを削除するには

  1. [レスポンシブ] パネルで [メディアルール](広告の向きをデュアルに設定した場合は [ルール(横向き)] / [ルール(縦向き)])が選択されていることを確認します。
  2. 削除するスタイルのオーバーライドのプロパティ ラベルをクリックします。オーバーライド ウィンドウが表示されます。
  3. ウィンドウの下部にある [オーバーライドを削除] をクリックします。
この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。