「ズーロッパについて」を作ります。
1.コンテンツを挿入
全体を囲うarticleタグには、背景等を設定できるよう「message」クラスを入れます。
とはいえ、背景は高さが確保できないと設定しにくいです。
先に、大まかに画像やテキストを入れてみましょう。
1-1.掲載事項を記述する
既存のクラスを使いつつ、大まかに見出し・画像とテキストの配置を作ります。
html
<!-- ============================
/ ズーロッパについて
/============================= -->
<article class="message">
<div class="container">
<h2 class="text-center">
ズーロッパについて
</h2>
<div class="row mt-3rem">
<div class="col-4 d-flex align-items-center">
<img src="images/worker.jpg" class="w-max100" alt="飼育員">
</div>
<div class="col-8 col-sp-12">
<p>
動物園(ズーロッパ)は、世界中の野生動物を、展示し飼育し繁殖させている国内でも最大級の動物園です。
</p>
<p>
野生動物を展示飼育する目的と意義は、野生動物の生態や行動を身近に学んでもらうこと、目の前にいる野生動物が暮らすことのできる地球環境の豊かさを知ってもらうこと、命の大切さを再認識してもらうこと、そしてヒトと野生動物が共存できる世界の大切さを理解してもらうことです。また、動物を観察することで自分たちの生活-ライフスタイルを見つめ直し、新たな生き方の発見につながることにも期待しています。
</p>
<p>
難しそうに聞こえるかもしれませんが、私たちが心から望んでいるのは、ズーロッパで遊び、楽しみ、そして感動する中で、上に書いたような目的や意義を知らず知らずの内に学び身につけてもらうことです。どうぞ、ズーロッパで動物たちとの出会いを大いに楽しんで下さい。私たちも、皆さんが動物園で楽しみながら学べるよう、精一杯のお手伝いをしたいと思っています。
</p>
<p>
ズーロッパへのご来園をお待ちしています!
</p>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</article>
セクション間のmarginは main > section { } で指定しています。
今回は<article>なので適用されていませんね。
ズーロッパについて、では他のセクションよりもpadding-bottomが必要そうです。
暫定で設定してみましょう。
上paddingは7rem、下paddingは2倍の14remにしてみます。
css
.message{
padding-top: 7rem;
padding-bottom: 14rem;
}
1-2.画像の角丸
img部分（飼育員の写真）は、これまでの角丸よりも丸みが強いです。
角の丸み50pxの「b-radius50」クラスを作って、imgタグに追加します。
css
.b-radius50{
border-radius: 50px;
}
html
<img src="images/worker.jpg" class="w-max100 b-radius50" alt="飼育員">
2.背景を設定する
2-1.全体の背景
article要素の高さが出来たので、背景を設定してみましょう。
背景は、画像とグラデーションの2つを使います。
実習で行った複数背景画像の設定と同じく、カンマで区切れば設定が可能です。
css
.message{
background-color: #f0ffd7;
background: url('images/bg.png') right bottom no-repeat,
linear-gradient(
#f0ffd7 0%,
#f0ffd7 4rem,
#e1a006 75%,
#767909 95%,
#445721 100%
);
padding-top: 7rem;
padding-bottom: 14rem;
}
※モニター幅によって、背景画像の位置は変わります。
背景画像の一番上の鳥と、「ズーロッパへのご来園をお待ちしています!」の被りが大きいですね。
padding-bottomに1rem追加しておきます。
css
.message{
background-color: #f0ffd7;
background: url('images/bg.png') right bottom no-repeat,
linear-gradient(
#f0ffd7 0%,
#f0ffd7 4rem,
#e1a006 75%,
#767909 95%,
#445721 100%
);
padding-top: 7rem;
padding-bottom: 15rem; /* 変更箇所 */
}
●backgroundの順序に関して
backgroundに複数の色や画像を設定する場合、最初に記述したものが最前面に、カンマの後に並んだものは最初に指定した背景の後ろに配置されます。
今回linear-gradient()で指定しているのは不透明な色。
このため、順番が逆になると画像は表示されません。
画像を背面に、rgbaなどで透明度を付けた色を手前に設定すると、画像にグラデーションオーバレイを適用したような表示にすることもできます。
2-2.コンテンツの背景
<div class="container">直下に、見出し・画像・テキストを囲うdivを挿入します。
背景色を設定できるように「message-text」クラスを指定しています。
html
<!-- ============================
/ ズーロッパについて
/============================= -->
<article class="message">
<div class="container">
<div class="message-text b-radius30"><!-- 新規追加 -->
<h2 class="text-center">
ズーロッパについて
</h2>
<div class="row mt-3rem">
<!-- ～中略～ -->
</div><!-- /.row -->
</div><!-- /.message-text -->
</div><!-- /.container -->
</article>
CSSで背景色とpaddingを設定。
css
.message-text{
background-color: rgba(255, 255, 255, 0.7);
padding: 2rem;
}
h2のmarginで上部余白が広くなっているので、marginをゼロにします。
css
.message h2{
margin-top: 0;
}
これで、課題コーディング（PC幅）完成です。
次回からはレスポンシブな表示に向けた調整に入ります。