Studioのレスポンシブと設定のコツ

この記事ではStudioのレスポンシブ設定方法とコツをご紹介します。

Tips：Webサイトのレスポンシブ対応とは？

レスポンシブ対応とは、デバイスの画面サイズや解像度に応じてWebサイトのデザインやレイアウトを最適化することです。これにより、どのデバイスからでも快適に閲覧できます。

レスポンシブ設定の手順

Studioでは、PC用にデザインした内容が自動的にタブレットやスマートフォンの画面サイズにも適応されます。

そのため、StudioではまずPC用の広い画面でデザインを作成し、その後スマートフォンやタブレットなどの小さい画面用に順番にデザインを調整します。

注意：「画像」「テキスト文言」「グルーピング構造」はブレイクポイントごとに変化させることはできません。必要に応じてボックスの表示設定を利用して調整してください。

レスポンシブ設定の順番：

画面サイズの切り替えはエディタ上部の「ブレイクポイント」で行えます。

各ブレイクポイントで調整したスタイルはエディタ上でハイライトされ、タブレットは緑、モバイルはオレンジで表示されます。

設定したブレイクポイントごとのスタイルは個別に解除できます。ハイライトされたスタイルにカーソルを当て[×]をクリックすることで解除できます。

ボックスのサイズは「px」で指定すると固定されますが、「%」で指定すると親ボックスや画面幅に応じて自動的に調整されます。横幅を「％」で指定すると、画面幅に応じて自動でサイズが調整されるため、「px」指定するよりも効率良くレスポンシブ設定できます。

他にも便利なサイズ単位が指定できます。サイズ単位の詳細については、サイズ単位をご覧ください。

ボックスの並ぶ方向は上下左右、折り返しから選択できます。横並びのボックスをモバイルサイズで縦並びに変化させるには、並ぶボックスの１階層上の親ボックスを選択し、矢印を上下のどちらかに変更します。

ブレイクポイントごとに画像やテキストを非表示にすることができます。

標準で表示するナビゲーションメニューをモバイルでは非表示にし、ハンバーガーメニューを表示する場合などにご活用いただけます。詳しくは、ハンバーガーメニューはどのように作成できますか？をご覧ください。

設定した内容が意図したものになっているかサイト公開前に確認しておきましょう。

エディタ上で確認

エディタ上でスクリーンの幅を伸縮させると、ブレイクポイント間の画面幅での表示が簡単に確認できます。レイアウト崩れや考慮もれを探すことができます。

ライブプレビューで確認

ブラウザ上でサイトの表示確認ができる「ライブプレビュー」機能を使い、手元にあるタブレットやスマホでチェックすることも可能です。

手元でサイトをチェックしながら調整すると、編集とチェックが同時に行えるため効率よく設定いただけます。

iPad アイパッド