Studio：ハンバーガーメニューを作成する
モーダルページを作成する
１．デザインエディタを開き、左パネル「ページ」>「+」をクリックします。
モーダルを選択します。
２．右パネル「ページ」で以下を設定します。
- ページ名：sp_menu
- パス：sp_menu
３．左パネル「レイヤー」で「Backdrop」を選択して以下のスタイルを定義します。
デフォルト
ボックス
- パディング：0px
４．左パネル「レイヤー」で「ModalBase」を選択して以下のスタイルを定義します。
デフォルト
ボックス
- 幅：100％
- 高さ：100vh
- 角丸：0
- はみ出し：垂直スクロール
タブレット
ボックス
- 高さ：100%
メニューとボタンを作成する
１．「ModalBase」内に「テキストボックス」を追加して、以下のスタイルを設定します。
デフォルト
テキスト
- 色：カラースタイル「Black」 もしくは 「#262D35」
- フォント：A1ゴシック R
- フォントサイズ：20px
- 行高：140%
- 間隔：5%
ボックス
- マージン：下 16px
２．スタイルを設定した「テキストボックス」を4つ複製して、画像のようにテキストを変更します。
３．「お問合せフォーム」のテキストにスタイルを設定します。
デフォルト
テキスト
- 色：カラースタイル White もしくは #FFFFFF
- フォントサイズ：14px
ボックス
- マージン：下 0px
４．「お問合せフォーム」のテキストをグループ化して、親のレイヤー名を「ボタン」にします。「ボタン」に以下のスタイルを設定します。
デフォルト
ボックス
- 背景色：カラースタイル「Black」 もしくは 「#262D35」
- 幅：auto
- マージン：下 16px
- パディング：上下 8px, 左右 24px
- 配置：中央（水平）, 中央寄せ（垂直）
５．メニューとボタンをグループ化します。親のレイヤー名を「wrapper」にして、以下のスタイルを設定します。
デフォルト
ボックス
- 幅：100%
- マージン：左右 48px
モバイル
ボックス
- マージン：左右 24px
６．「wrapper」をグループ化します。親のレイヤー名を「スマホナビ」にして、以下のスタイルを設定します。
デフォルト
ボックス
- 幅：100%
- 高さ：100vh
- パディング：上下 56px
閉じるボタンを作成する
１．「スマホナビ」の上に「アイコンボックス」を追加して、「Material Symbols」の「close」アイコンに変更します。
２．「アイコンボックス」のレイヤー名を「閉じるボタン」を選択して、以下のスタイルを設定します。
デフォルト
ボックス
- 幅：48px
- 高さ：48px
３．「閉じるボタン」を画面右上に移動します。
「閉じるボタン」レイヤーを選択して、以下のスタイルを設定します。
デフォルト
ボックス
- 位置：絶対
- 距離：上 0px, 右 0px
４．「閉じるボタン」レイヤーを選択して、「モーダルを閉じる」リンクを設定します。
ヘッダーの「ハンバーガーメニュー」にリンクを設定する
１．ページ「chapter5-実践」を選択します。
２．レスポンシブで「タブレット」を選択します。
３．ヘッダーパーツ内の「ハンバーガーメニュー」を選択して、リンク先に「sp_menu」を選択します。
４．ライブプレビューで画面幅を狭くした後、ハンバーガーメニューの挙動を確認します。
