本レッスンからは、前回まで作成したページをレスポンシブ化していきます。
00.スマホ幅調整のための下準備
Google Chromeの検証ツールを使って、幅を375pxにしてみます。
（iPhoneSE等を選択、レスポンシブを選択して手入力、どちらでも可）
そうすると、かなり崩れていることがわかります。
表示領域からのはみ出しも多く、横スクロールも結構ありますね。
表示モードによっては、下図のような表示になる事もあります。
このまま各セクションごとに調整していくのは、進めにくいですね。
そんなときには、最初に大きくはみ出している箇所を簡単に調整してしまいましょう。
大きくはみ出した箇所は、スクロールしていけば大体わかります。
1.CTAのボタン
例えば、CTAボタン。
スタイルを見てみると、2つのボタンを横並びにするための.cta-btnsが原因でした。
子要素のボタンが折り返せていないので、はみ出しています。
スタイルパネル上でflex-wrapプロパティを追加してみます。
直りますね。
ブラウザ幅を広げたときも、flex-wrap:wrap;指定が追加されていても問題ありません。
ですので、既存の.cta-btns{}内に追加して書いておきます。
2.卒業生の声の写真
スマホ幅でスクロールダウンしていくと、次にはみ出しているのは「卒業生の声」です。
写真が重なった上に、横にもはみ出していますね。
ここはwidthとheightで細かく指定している箇所。
2ボックス横並び→1ボックスずつ縦並び、と変更したほうが早いです。
col-6クラス部分で「スマホ幅の場合は12カラム分」と指定すれば出来そうです。
メディアクエリを使って、スマホ幅のみ適用されるクラスを作成しましょう。
style.css
Bootstrapの-smや-lgのように、間に-spを挟むことで「スマホ幅限定」で有効なクラスである ことを示しています。
htmlで新しく作ったcol-sp-12クラスを適用し、ブラウザで確認してみましょう。
lp.html
↓
3.料金プランの表
プランごとの料金やサービス内容が書かれているテーブルタグ部分。
自動で調整されて見にくいですし、はみだしもありますね。
仕上がりでは横スクロールになっているので、簡単にそのためのCSSだけ書きます。
style.css
半透明のdivを重ねるときにも使った、overflowプロパティです。
overflowは要素のサイズからはみ出した分、後ろの-xはｘ軸方向（今回のページの場合は横方向）をどうするか、という意味になります。
ただ親要素に overflow-x: scroll; を指定しても、tableは自動的にブラウザ幅に合わせて縮小されてしまいます。
このため、table自体の幅をprice-tableクラスを使って指定しています。
style.css
.price-tablewrapper > .bg-white{
overflow-x: scroll;
}
.price-table{
width: 820px;
}
こんな感じでスクロール表示になればOKです。
きれいに整えるのは、あとでやりましょう。
4.footer部分
最後はfooter。
col-4やcol-3クラスで分割してしまうと、狭すぎますね。
2.卒業生の声で作った「col-sp-12」クラスを追加しましょう。
lp.html
↓
これで、ブラウザ幅（スマホ幅）からのはみ出しは落ち着きました。
配置や余白などを調整しすくなったと思います。