Point：Studioのレスポンシブデザイン
Studioでは、1つのページデザインを基準に、各種画面幅（ブレイクポイント）ごとにスタイルを調整してレスポンシブデザインを実現します。
ボックスやテキストのレイアウト・外観・ポジションなどはブレイクポイントごとに変更できますが、画像やテキスト自体の内容、グルーピング構造は共通です。
レスポンシブデザイン全体の考え方や関連機能については、次の記事も参考にしてください。
ハンバーガーメニューは、主にモバイルデバイスなど小さな画面で使うコンパクトなナビゲーションメニューです。 3本の横線が重なったアイコンとして表示され、このアイコンをクリックすると隠れていたメニューが展開されます。
この記事では、ブレイクポイントのデフォルトやスモール（PCサイズ）では常時表示されるナビゲーションメニューを、モバイルとタブレットサイズではハンバーガーアイコンで表示する方法を説明します。
Tips: セクションパーツを利用してハンバーガーメニューを設定する
セクションパーツのメニューにはレスポンシブデザインが設定され、あらかじめハンバーガーメニューが実装されています。
左パネルで追加パネルを開きます。
[セクション]タブを開き、用途に合わせてヘッダーまたはフッターからセクションメニューを選びます。[すべて表示]をクリックすると、利用できるセクションパーツの一覧が表示されます。
追加されたセクションパーツ内のボックス要素を、必要に応じて編集します。
不要なボックスは削除します。
テキストボックスを編集します。
ボックスの外観やレイアウト・ポジションを編集し、デザインや配置を調整します。
メニュー項目となる各ボックスにサイト内リンクを設定します。
ライブプレビューで表示確認をします。
公開中のサイトを編集している場合には、サイトの更新をして公開サイトに反映します。
事前準備：ナビゲーションメニューを作成する
この記事の説明では、ブレイクポイントごとの表示設定を活用したハンバーガーメニューの作成方法のみ扱います。
ブレイクポイントのデフォルトやスモール（PCサイズ）で表示するナビゲーションメニューは、事前に作成してください。
ハンバーガーメニューを作成する
手順 1. ナビゲーションメニューの非表示設定をする
ナビゲーションメニューをタブレット以下の画面サイズで非表示にする設定をします。
該当のナビゲーションメニューを選択します。
手順 2. ハンバーガーアイコンを配置する
タブレットとモバイルで表示するハンバーガーメニュー用のアイコンを配置します。
ツールバーのブレイクポイントバーで[タブレット]を選択します。デフォルト（PCサイズ）で作成したナビゲーションメニューが非表示になっていることを確認します。
スクリーン上のヘッダーに、アイコンボックスを追加してハンバーガーメニューアイコンに変更します。
配置したアイコンを選択し、レイヤーパネルを開きます。
手順 3. メニューページをモーダルで作成する
ハンバーガーアイコンをクリックしたときに表示するメニューを、モーダルで作成します。
ページ追加でモーダルを選択します。
作成したモーダル内に、ナビゲーション用のボックスやテキスト、ボタンなどを配置してメニューをデザインします。
Tips：モーダルに出現時アニメーションを設定する
モーダル出現時に動きをつけたい場合には、条件付きスタイルを活用します。
モーダル全体または最上部のレイヤーを選択します
右パネルで[条件スタイル]ボタンをクリックして、[アニメーション]メニューから[出現時]を選択します。
出現時アニメーションを、テンプレートまたはカスタムで設定します。
手順 4. モーダル内のメニューアイコンへリンクを設定する
ハンバーガーアイコンと作成したメニュー用モーダルをリンクでつなぎます。
スクリーン上のハンバーガーメニューアイコンを選択します。
モーダルを開くリンクを設定します。
プレビューで動作を確認します。
ハンバーガー ハンバーガーメニュー モバイルメニュー ハンガーメニュー ハンガー バーガーメニュー バーガー menu ハンバーガーアイコン メニューボタン モーダルメニュー メニューモーダル