第6回は、「レスポンシブ」設定について学びます。
目次
「レスポンシブ」設定
「レスポンシブ」設定は、STUDIOでWebサイトを制作するうえで欠かせない設定
ざっくりいうとパソコン（PC）・タブレット（Tablet）・モバイル（SP）等の、様々なデバイスでWebサイトが表示された時に画面サイズに合わせてデザインを整える為の設定
デザインの確認方法
これまでの授業で使用してきたライブプレビュー画面のQRコードを読み取るだけ
リアルタイムで変化する動きを確認しよう
STUDIOにおけるレスポンシブ設定の仕組み
STUDIOでは、画面幅の大きい順にデザイン・設定した数値が適用される。そのため、最初に作るのはPCサイズ（一番大きい画面幅）でデザインを作成し、画面幅を順番に小さくしデザインを調整する必要がある。
ブレイクポイント
デザインが変化する切り替え地点のこと。
STUDIOではデフォルトで3つのブレイクポイントが設定されており、最大で5つまで追加可能。
- 基準
- 推奨サイズ：1280px
- スモール
- 推奨サイズ：1140px
- タブレット
- 推奨サイズ：840px
- モバイル
- 推奨サイズ：540px
- ミニ
- 推奨サイズ：320px
5つまで増やすことでどのデバイスでも綺麗に表示させる
ブレイクポイントの適正値は、制作するWebサイトのターゲット層（ターゲット層に見られやすい端末サイズ）によっても変わる為、正解がない。Webサイト制作に携わる際は、ターゲット層と現在普及している機種（画面サイズ）を把握することが大切。
要素の表示・非表示
ブレイクポイントごとに要素（ボックスやテキスト）を表示／非表示にすることが可能
ヘッダーメニューなどPC表示とスマホ表示で明確にデザインが変わるところで使用します。
以前作成した「ヘッダーメニュー」をレスポンシブ対応チャレンジ！
表示・非表示の設定を駆使して、レスポンシブ対応をしてみましょう。
作業手順
- 「無料相談」ボタンの右側に、スマホ用のボタン［三］（←ハンバーガーメニュー）を追加
- 「料金プラン・特徴・ご依頼からの流れ・よくあるご質問」のボックスを非表示
- 「無料相談」ボタンも非表示
ブレイクポイントごとに表示状態を確認しながら行いましょう
