レスポンシブ レイアウトの概要

メディアルールを使用したレスポンシブ レイアウトの作成
レスポンシブ デザインでは、さまざまな向きやサイズのビューポートにフレキシブルに適応するレイアウトを使用できるため、複数のレイアウトを作成する必要がありません。Google Web Designer には、レスポンシブ デザインでページを作成するためのさまざまなツールが用意されています。

レスポンシブ ページのディメンション

レスポンシブ ドキュメントのページの幅と高さは、画面の表示領域がすべて埋まるよう、100% に設定します。

新しく作成するファイルの場合

[空のファイルを新しく作成] ダイアログで、ディメンションを指定するときに [レスポンシブ レイアウト] チェックボックスをオンにします(すべてのファイル形式で利用できるわけではありません)。

既存のドキュメントの場合

[レスポンシブ] パネルで、[レスポンシブ レイアウト] チェックボックスをオンにします。

割合に基づくサイズと位置

パーセント ベースの可変レイアウト

ページのディメンションだけでなく、要素のサイズや位置も、ピクセルの代わりに割合で指定できます。その場合、親コンテナが変化しても、親コンテナに対する要素のサイズと位置関係の割合は保持されます。

要素を配置する場合、位置揃えツールや均等割り付けツール可変レイアウト オプションを使用すると、割合に基づく位置を簡単に設定できます。

メディアルールを使用した CSS スタイルのオーバーライド

メディアルールを使用すると、ドキュメントでビューポートのサイズと向きを検出し、それに応じてさまざまなスタイルを適用できます。たとえば、スマートフォンではコンテンツを 1 列で表示し、タブレットでは同じコンテンツを 2 列で表示するといったことができます。このようなスタイル変更はオーバーライドと呼ばれ、指定したサイズまたはサイズ範囲に対して行われます。

レスポンシブ パネルで、次のルールセット間の切り替えを行えます。

  • デフォルト ルール: デフォルトのスタイルセットに変更を加える場合、またはすべてのビューポート サイズに適用される変更(アセット、コンポーネント、イベントの追加や削除など)を行う場合は、[デフォルト ルールを編集] を選択します。
  • メディアルール: 特定のサイズまたはサイズ範囲を選択して、そのビューポート サイズのデフォルト スタイルがオーバーライドされるようにします。

メディアルールを選択すると、そのサイズまたはサイズ範囲にのみ適用されるスタイルを設定できます。たとえば、要素の位置、サイズ、ソース、鮮明度、アニメーションを調整できます。

詳しくは、メディアルールとスタイルのオーバーライドの説明をご覧ください。

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

さらにサポートが必要な場合

問題を迅速に解決できるよう、ログインして追加のサポート オプションをご利用ください。