※もし、まだレスポンシブデザインについて読まれていない場合は、こちらをご確認ください。

ギャラリーなど、Webサイトの一部のセクションでは、小さい画面サイズでも見やすくなるように調整する必要があります。

こちらは、レスポンシブに対応していないレイアウトの例です。

上記の例では、各写真のサイズはコンテナボックスの33.3%(1/3)です。

このため、ページが小さくなるにつれて、各写真とテキストも小さくなり表示できません。

こちらは、レスポンシブに対応したレイアウトの例です。

各要素は、それぞれの画面に表示されるのに十分なスペースがあります。

レスポンシブに対応するために、レイアウトのサイズを調整する方法は以下をご確認ください。

レスポンシブのサイズ変更

レスポンシブ対応にするために、ギャラリーやセクションのサイズを変更するには:

  1. レスポンシブバーを使用して、各ブレイクポイントを1つずつ確認します。最適に表示されないブレイクポイントを見つけたら、要素のサイズを変更します。
  2. 要素のサイズを効果的に変更するには、サイズの単位は%を選択します。同じ行に複数の要素を配置するための十分なスペースがない場合は、1行に1つ、または2つの要素を表示するには、横幅を50%または100%に設定します。

レスポンシブのサイズ設定のヒント

小さい画面サイズでコンテンツがカットされないようにするために、親要素の縦幅は常にautoを使用することをお勧めします。縦幅をautoに設定するには、要素の上端または下端をタブルクリックするか、トップバーから「auto」を選択します。

悪い例:親要素の縦幅がピクセル(px)で設定されているとき

良い例:親要素の縦幅がautoに設定されているとき

Did this answer your question?