タブレット幅の表示を、見本に合わせていきましょう。
コンテンツ幅よりも小さくなると崩れそうな箇所がないかも、合わせてチェックしていきます。
1.ファーストビューの調整
1-1.メディアクエリを書く
まず、タブレット幅（834px以下）のみスタイルを適用出来るようにします。
css
/* ===================================
/ ===================================
/ 幅834px 以下（タブレット向け）の設定
/ ===================================
/ =================================== */
@media(max-width: 834px) {
} /* @media */
1-2.ファーストビューを1カラムに
タブレット幅でのヘッダーとフッター表示はそのままです。
ファーストビューは変更点が結構あります。
メールマガジン登録フォームの部分から調整しましょう。
タブレット幅以下の時は12カラム分のスペースを確保する、col-tb-12クラスを作ります。
css
/* @media(max-width: 834px) {} 内に書く */
.col-tb-12{
flex: 0 0 auto;
width: 100%;
}
htmlでは、col-6クラスを指定しているdivに、col-tb-12クラスを追加します。
html
<div class="row justify-content-end">
<div class="col-6 col-tb-12">
<div class="fv-form b-radius30">
<p class="fw-bold">
会員様限定コンテンツ配信中！
</p>
1-3.ファーストビューの高さと背景調整
下記の３点を調整します。
- ファーストビューの高さ（長さ）を短くする
- ゴリラが中央にくるよう、背景画像の位置を調整
- 左右paddingを増やす（コンテンツを中央に寄せる）
css
/* @media(max-width: 834px) {} 内に書く */
/* ---------------------- */
/* first view
/* ---------------------- */
.fv {
height: 70vh;
padding: 2rem 1rem;
background-position:left bottom;
}
だいぶ見本に近づいてきました。
1-4.テキストとフォームの配置
トップコピーと、メールマガジン登録フォームを上下に離します。
css
/* @media(max-width: 834px) {} 内に書く */
.fv-inner {
justify-content: space-between;
}
2.イベント・ニューオープン
イベント・ニューオープンのセクションも<article>を12カラム分に変更します。
しかし、表示を見ると画像が歪んでしまっています。先にここを直しましょう。
2-1.画像の縦横比を保持
画像が歪んでいるのは、min-height指定が原因で以下のように表示されているためです。
- 横幅：親要素の幅いっぱい分
- 高さ：420px
かと言って、min-height指定を無くしてしまうと、下図のようにテキスト部分がはみ出す危険があります。
ですので、画像の縦横比を保持する設定を追加しましょう。
object-fitという、親要素にどう嵌め込むかを指定できるCSSプロパティを使います。
css
/* メディアクエリ外（元の記述に追加） */
.news .col-6 > img{
min-height: 420px;
object-fit: cover; /* 今回の追加分 */
}
画像の歪みがなくなりました。
object-fitの値にcoverを指定すると、縦横比を維持したまま、はみ出した部分は隠す（トリミングする）ような形で表示してくれます。
backgroundの指定で使う「cover」と同じ仕組みです。
object-positionプロパティをセットで使うと位置指定も出来ます。
/* メディアクエリ外（元の記述に追加） */
.news .col-6 > img{
min-height: 420px;
object-fit: cover;
object-position: right; /* 今回の追加分 */
}
2-2.カラム数の変更
<article>に、col-tb-12クラスをそれぞれ追加します。
html
<article class="col-6 col-tb-12 position-relative mt-3rem">
3.注目の動物
注目の動物セクションは、レイアウトの変更はありません。
ただ、画面幅を縮めると下図(左)のように吹き出しの位置が下がってしまいます。
画像を縦方向中央に配置されるように調整します。
画像を囲っている<div class="col-5">をFlexボックス化して、align-items:center;で縦方向中央配置を作ります。
PC幅の場合は画像の方が高くなるので、縦方向の位置は関係しません。
ですので、tb幅以下のクラスは作らず、既存のクラスを使います。
html（例）
<div class="col-5 d-flex align-items-center">
<img src="images/panda.jpg" alt="パンダ" class="w-max100 b-radius30 animal-photo">
</div>
ライオンとゾウも、同じようにクラスを追加してください。
4.ズーロッパについて
下記の4つを変更します。
- 画像とテキストを縦並びにする
- 画像とテキストとの間に余白を入れる
- 写真は最大幅を決める（400px）
- 画像を横方向中央に配置する
まず、画像とテキストの縦並び。
これはcol-tb-12クラスを追加でできます。
html
<div class="row mt-3rem">
<div class="col-4 col-tb-12 d-flex align-items-center"><!-- クラス追加 -->
<img src="images/worker.jpg" class="w-max100 b-radius50" alt="飼育員">
</div>
<div class="col-8 col-tb-12"><!-- クラス追加 -->
<p>
動物園(ズーロッパ)は、世界中の野生動物を、展示し飼育し繁殖させている国内でも最大級の動物園です。
</p>
次に画像のサイズと配置。
これは直接CSSで指定してしまいましょう。
css
/* @media(max-width: 834px) {} 内に書く */
.message-text img{
width: 400px;
margin: 0 auto 2rem auto;
}
フッターはそのままで良いので、ここまででタブレット幅の調整完了です。