スマートフォン幅で表示したときにも無理なく見られるよう、CSSを追加します。
1.初期設定
1-1.メディアクエリを書く
スマホ幅（576px以下）のみスタイルを適用出来るようにします。
css
/* ===================================
/ ===================================
/ 幅576px 以下（スマホ向け）の設定
/ ===================================
/ =================================== */
@media(max-width: 576px) {
} /* @media */
1-2.見出しのフォントサイズを変更
画面幅を狭くしてページをざっと見てみると、見出しの文字がとても大きく見えます。
幅の狭いスマートフォンでもスッキリ見えるよう、フォントサイズを変更しましょう。
css
/* @media(max-width: 576px) {} 内に書く */
h1 {
font-size: 24px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 18px;
}
見出しの文字サイズ変更だけでも、かなりイメージが変わります。
2.ヘッダー
ヘッダーの配置を、下図のように変更します。
最初に、flexアイテムを縦に並べるためのクラスを作ります。
css
/* @media(max-width: 576px) {} 内に書く */
.flex-sp-column{
flex-direction: column;
}
作成したflex-sp-columnクラスを使って、横に並べている div.header-logo と nav を上下に並べます。
html
<header class="text-white bg-dgreen">
<div class="container">
<div class="row align-items-center flex-sp-column"> <!-- クラス追加 -->
<div class="header-logo d-flex align-items-center">
<img src="images/logo.png" width="25" height="25" alt="ZOOLOPPA">
<p>ZOOLOPPA</p>
</div>
<nav class="col">
<ul class="d-flex justify-content-end">
<li><a href="#">イベント</a></li>
<li><a href="#">動物紹介</a></li>
<li><a href="#">ブログ</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</div>
</div>
</header>
自動で折り返されてしまっている、liタグ部分を調整。
li要素を親要素の50％幅、テキストが左右中央寄せになるようにします。
横並びのときに指定していたmargin-leftはゼロにし、margin-topを加えます。
css
/* @media(max-width: 576px) {} 内に書く */
header nav li {
margin:0.5rem 0 0;
width: 50%;
text-align: center;
}
3.ファーストビューとイベント
3-1.ファーストビュー
ファーストビューの配置は、特に変更する箇所がありません。
下記２つの微調整だけ行います。
- 背景画像の位置を、なるべくゴリラの顔が見切れないよう調整
- フォーム部分のpaddingを減らす
css
/* @media(max-width: 576px) {} 内に書く */
.fv {
background-position: 25% bottom;
}
.fv-form {
padding: 0.5rem 1rem;
}
3-2.イベント・ニューオープン
イベント・ニューオープンのセクションも大きな配置変更はありません。
画像の高さを短くして、少しコンパクトにするくらいで良さそうです。
css
/* @media(max-width: 576px) {} 内に書く */
.news .col-6 > img {
min-height: 360px;
}
4.注目の動物
注目の動物では、動物の画像と説明文を縦並びにします。
4-1.カラム変更
スマホ幅のときには12カラム分（親要素の100％幅）にするクラスを作ります。
css
/* @media(max-width: 576px) {} 内に書く */
.col-sp-12{
flex: 0 0 auto;
width: 100%;
}
新しく作ったcol-sp-12クラスを、div.col-5 と div.col-7 にそれぞれ追加します。
html
<article class="row mt-3rem">
<div class="col-5 col-sp-12 d-flex align-items-center"><!-- クラス追加 -->
<img src="images/panda.jpg" alt="パンダ" class="w-max100 b-radius30 animal-photo">
</div>
<div class="col-7 col-sp-12 text-white"><!-- クラス追加 -->
<div class="animal-balloon bg-dgreen position-relative">
<h3 class="text-center">パンダ</h3>
<p>
ジャイアントパンダは、哺乳綱食肉目クマ科ジャイアントパンダ属に分類される食肉類。白と黒にはっきりと分かれた体毛が際立った特徴である。
</p>
</div>
</div>
</article>
ライオン、ゾウのほうでも、同じようにcol-sp-12クラスを追加して下さい。
4-2.テキスト部分を整理する
動物の説明文まわりを整えます。
下記２点を変更して、レイアウトを整理しましょう。
- 画像よりも上に、テキスト部分を表示させる
- ::afterで作っている三角形をなくす
css
/* @media(max-width: 576px) {} 内に書く */
.animals .col-5 {
order: 1;
}
.animal-balloon::after {
content: none;
}
4-3.画像と吹き出しに縁をつける
画像に対して、右下方向に向けてbox-shadowでフチを作っています。
スマホ幅は全体に縁取りがなされています。
シンプルにbox-shadowをなくして、borderで縁取りを作り直します。
css
/* @media(max-width: 576px) {} 内に書く */
.animal-photo,
.animal-balloon {
border: 6px solid #445721;
}
.animal-photo{
box-shadow: none;
}
box-shadowで表現する場合
box-shadowの書き方を変えて、縁取りのように見せることもできます。
その場合、使用するのはbox-shadowの4番めの値、影の拡大縮小（spread）です。
css
/* @media(max-width: 576px) {} 内に書く */
.animal-photo,
.animal-balloon {
box-shadow: 0px 0px 0px 6px #445721;
}
枠線のような表示になりました。
ただし、この方法を使うと、box-shadowが拡大され、本来の要素の大きさ（今回の場合はdiv.animal-photo）よりも大きくなります。
box-shadowでは「inset」を指定することで、影の位置を内側に変更できます。
しかし、img要素はinsetを使っても内側に影は付きません。
以下のようにdivで囲って、疑似要素を使って適用させるなど手間がかかります。
このため、今回は使用しませんでした。
【box-shadow（inset）使用例】
※下記コードはサポート外となります。
html
<div class="col-5 col-sp-12 d-flex align-items-center">
<div class="animal-photo-container position-relative b-radius30">
<img src="images/panda.jpg" alt="パンダ" class="w-max100 b-radius30 animal-photo">
</div>
</div>
css
/* @media(max-width: 576px) {} 内に書く */
.animal-photo-container::before,
.animal-balloon {
box-shadow: 0px 0px 0px 6px #445721 inset;
}
.animal-photo-container::before{
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 30px;
}
.animal-photo{
box-shadow: none;
}
これでスマートフォン幅用の調整も完成です。
お疲れ様でした。