第6回は、いよいよ「レスポンシブ」設定について学びます。「レスポンシブ」設定は、STUDIOでWebサイトを制作するうえで欠かせない設定のひとつです。どんなことが出来るのか、概要から設定方法まで、じっくり学んできましょう。
どんなスマホサイトを制作するか迷った時、参考にしたいリンク集
「レスポンシブ」設定
「レスポンシブ」設定とは、ざっくりいうとパソコン（PC）・タブレット・モバイル（SP）など、様々なデバイスでWebサイトが表示された時に画面サイズに合わせてデザインを整える為の設定です。
スマホデザインの確認方法はとっても簡単！
実は、これまでの授業でもたびたび目にしているライブプレビューのURL発行画面に、QRコードが表示されています。手持ちのスマートフォンでQRコードを読み取り、自分の作ったサイトの状態をリアルタイムで確認してみましょう。
STUDIOにおけるレスポンシブ設定の仕組み
近年のWeb業界において、モバイルデバイスのサイズを基準としてデザイン設計を行う「モバイルファースト」や「スマホファースト」といった考え方もありますが、STUDIOではパソコン（PC）サイズを基準としてその後にタブレット・モバイルサイズ時のデザインを設計する考え方を採用しているという点を覚えておきましょう。
ブレイクポイント
デザインが切り替わる画面幅のポイントをブレイクポイントといいます。ブレイクポイントをどこにするかは様々意見があり、制作するWebサイトのターゲット層によって見られやすい端末サイズも変わる為、どれが正解というものはありません。実際にWebサイト制作に携わる際は、一般的に普及している機種の大まかな画面サイズ（相手=ターゲットのこと）を把握することが大切となります。
ボックスの表示・非表示
ブレイクポイントごとにコンテンツの表示または非表示の設定ができます。ヘッダーメニューなど、PC表示とスマホ表示で明確にデザインが変わるところで、よく使用します。
以前作成した「ヘッダーメニュー」をレスポンシブ対応チャレンジ！
「無料相談」ボタンの右側に、スマホ表示用のボタン［三］←ハンバーガーメニューを追加し、表示・非表示の設定を駆使して、レスポンシブ対応をしてみましょう。
【おまけ – 1】「リンク」に関する設定
要素をクリックした際に右側に「＋」が表示されます。
「＋」をクリックすると、右側パネルにてリンク設定が可能です。
STUDIOにおけるリンク設定の種類
- 別ページへのリンク
- 別のページに移動するとき
- アンカーリンク
- ページ内のある地点に遷移するとき
- あらかじめ遷移先となるボックスにIDを設定しておく必要有り
- 外部サイトへのリンク
- 外部サイトのURLを直接入力で指定
- モーダルを開く・閉じる
- モーダルページを設定中にのみ「モーダルを閉じる」の選択が可能
- プロパティの選択
【おまけ – 2】QRコードの作り方
紙のポートフォリオ作成時にWebサイトへの誘導が必要な場合、サイトアドレス（URL）をQRコード化して配置しましょう。
以下のWebサイトが使いやすくオススメです。
