イベント・ニューオープンのセクションを作っていきましょう。
1.見出しと横並び設定
まず、見出しとカラム割りを用意します。
各情報はそれぞれ自己完結したコンテンツと考えられるので、article要素を使いました。
コンテンツ幅の半分、col-6クラスを加えます。
html
<!-- ============================
/ イベント・ニューオープン
/============================= -->
<section class="container news">
<h2 class="text-center">
イベント・ニューオープン
</h2>
<div class="row">
<article class="col-6"></article>
<article class="col-6"></article>
</div><!-- /.row -->
</section>
css
h2 {
font-size: 36px;
}
セクション全体の余白は後で設定します。 先に.col-6の中身を作っていきましょう。
画像とテキストを重ねた表示
.col-6の中身、画像の上にイベントなどのお知らせが表示されている部分は、いくつかの作り方ができます。
以下では２通りの方法を紹介します。
A：背景画像を設定する方法 B：positionプロパティで画像(img)とテキストを重ねる方法
簡単なのはAの方法です。
Bの方法は少し手間がかかりますが、WordPressなどのCMSでアイキャッチ画像とタイトルを出力したい場面で多く使われます。本課題/解説でもBのタイプを採用しています。
A：背景画像を設定する方法
下図のイメージでコーディングしていきます。
HTMLとCSSで、大まかな構成を作ってみます。
html
<article class="col-6">
<div class="event b-radius30">
<div class="news-text text-white">
<p>
<span class="material-icons-outlined">event</span>
9/21（木）～ 9/22（水）
</p>
<h3>ズーロッパフェス</h3>
<p>
かわいいペンギンたちのパレード、ふれあい企画もありますよ！
</p>
<p>
<a href="#" class="more">
詳細はこちら >>
</a>
</p>
</div>
</div>
</article>
css
.event{
padding: 225px 1rem 1rem;
background: url('images/penguin.jpg') ;
background-size: cover;
}
.news-text{
border-radius: 20px;
padding: 1rem;
width: 100%;
background:rgba(0, 65, 165, 0.6);
}
.more{
display: inline-block;
padding: 5px;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
}
左上の円を追加する
div.news-textをposition:retative;にして、absoluteを使って青い円の「EVENT」を重ねます。
html
<article class="col-6 b-radius30 event">
<div class="news-text text-white position-relative">
<div class="news-label position-absolute">
<p class="text-center">ENEVT</p>
</div>
<p>
<span class="material-icons-outlined">event</span>
<!-- 以下略 -->
css
.news-label{
border-radius: 50%;
height: 4rem;
width: 4rem;
top: -2rem;
left: -10px;
transform: rotate(-15deg);
background: #0042a5;
}
positionプロパティによって、指定した位置に円が重なりました。
transform: rotateを指定しているので、文字が少し斜めに表示されています。
.news-textの中身のスタイル指定は、後記『3.細部を整える』で行います。
B：画像(img)とテキストを重ねる方法
Aの方法でも画像とテキストは重ねられます。
しかし、別の情報を掲載したい場合は、背景画像を設定するために新たなクラスを作らなくてはいけません。
毎回インラインCSSでstyle="background: url()"と書くのも大変です。
そこで、Bの方法では画像をimgタグで表示させます。
position:absoluteを使って、半透明背景のBOXを丸ごと重ねるイメージです。
html
<article class="col-6 position-relative">
<img src="images/penguin.jpg" alt="ペンギンイメージ" class="b-radius30 w-max100">
<div class="news-contener position-absolute">
<div class="news-text text-white">
<p>
<span class="material-icons-outlined">event</span>
9/21（木）～ 9/22（水）
</p>
<h3>ズーロッパフェス</h3>
<p>
かわいいペンギンたちのパレード、ふれあい企画もありますよ！
</p>
<p>
<a href="#" class="more">
詳細はこちら >>
</a>
</p>
</div><!-- /.news-text -->
</div><!-- /.news-contener -->
</article>
css
.news .col-6 > img{
min-height: 420px;
}
.news-contener{
bottom: 0;
padding: 15px;
width: calc(100% - 30px);
}
.news-text{
border-radius: 20px;
padding: 1rem;
width: 100%;
background:rgba(0, 65, 165, 0.6);
}
.more{
display: inline-block;
padding: 5px;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
}
Aの方法とだいたい同じ見た目になりました。
どちらの方法も間違いではありませんが、更新があるたびに追加されていくような部分はBの方法のほうが扱いやすいでしょう。
左上の円を追加する
こちらも、左上の「ENEVT」はposition:absolute;を使って更に重ねます。
親要素のpositionプロパティがstatic以外であれば、そこを基準に絶対位置指定ができます。
news-textクラスのdivは既にposition:absolute;が適用されていまので、絶対位置で配置したい要素にposition:absolute;を加えるだけ良いです。
html
<article class="col-6 position-relative">
<img src="images/penguin.jpg" alt="ペンギンイメージ" class="b-radius30 w-max100">
<div class="news-text text-white position-absolute">
<div class="news-label position-absolute">
<p class="text-center">ENEVT</p>
</div>
<p>
<!-- 以下略 -->
.news-labelを配置するための基準位置はAもBも同じですので、CSSも変わりません。
css
.news-label{
border-radius: 50%;
height: 4rem;
width: 4rem;
top: -2rem;
left: -10px;
transform: rotate(-15deg);
background: #0042a5;
}
3.細部を整える
3-1.テキスト部分の表示を整える
半透明のBox（div.news-text）内のレイアウトを整えます。
設定が必要な部分を考えて、必要なクラスを追加します。
アイコンとhタグ部分は、.news-textで限定してそのままセレクタとして使います。
html
<p class="d-flex align-items-center justify-content-end fsize-12">
<span class="material-icons-outlined">event</span>
9/21（木）～ 9/22（水）
</p>
<h3>ズーロッパフェス</h3>
<p>
かわいいペンギンたちのパレード、ふれあい企画もありますよ！
</p>
<p class="d-flex justify-content-end">
<a href="#" class="more">
詳細はこちら >>
</a>
</p>
css
.fsize-12 {
font-size: 12px;
}
.news-text .material-icons-outlined{
padding-right: 0.5em;
}
.news-text h3{
margin:0 0 1rem 0;
padding-top: 0.5rem;
border-top: 1px solid #FFF;
}
ブラウザで確認してみると、.news-text上下の余白が広いですね。
これはpタグのmarginと.news-textのpaddingが二重になっていることが原因です。
.news-textに設定しているpaddingの値を、上下ゼロになるように変更します。
(※Aの方法の場合は、pタグのmarginをそれぞれゼロにしてください)
css
.news-text{
bottom: 0;
width: calc(100% - 4rem);
margin: 1rem;
padding: 0 1rem; /* 変更箇所 */
background:rgba(0, 65, 165, 0.6);
border-radius: 20px;
}
3-2.複製と色分けをする
作ったズーロッパフェスの右側に、「園内カフェがリニューアル」のボックスを作ります。
まずは<article> ~ </article>まで丸ごと複製してしまいましょう。
そして画像パスと、テキスト部分など必要箇所を打ち替えていきます。
html
<article class="col-6 position-relative">
<img src="images/cafe.jpg" alt="カフェイメージ" class="b-radius30 w-max100">
<div class="news-text text-white position-absolute">
<div class="news-label position-absolute">
<p class="text-center">NEW</p>
</div>
<p class="d-flex align-items-center justify-content-end fsize-12">
<span class="material-icons-outlined">event</span>
8/24（木）～
</p>
<h3>園内カフェがリニューアル</h3>
<p>
ZOOLOPPAの動物がモチーフの新メニューも登場。
</p>
<p class="d-flex justify-content-end">
<a href="#" class="more">
詳細はこちら >>
</a>
</p>
</div><!-- /.news-text -->
</article>
※Aの方法の場合は打ち替え箇所が異なります。
当ページからDLできる見本ファイルのlpkadai-a.html / lpkadai-a.css をご確認ください。
打ち替えただけだと、下図のように同じ色で表示されます。
NEWの背景色、テキスト全体の背景色を緑色に変更しましょう。
色の変更のために、articleタグに「new」クラスを追加します。
html
<article class="new col-6 position-relative">
<img src="images/cafe.jpg" alt="カフェイメージ" class="b-radius30 w-max100">
<!-- 以下略 -->
子孫セレクタ（.newクラスの要素の中にある...という書き方）で、背景色を指定。
css
/* --- NEWの時 --- */
.new .news-text{
background:rgba(0, 165, 50, 0.6);
}
.new .news-label{
background: #00a532;
}
NEWの方だけ緑色になれば完成です。
3-3.見出しとセクションの余白を整える
h2タグの文字サイズが、見本よりも小さいので、font-sizeを指定します。
また、セクション間にも余白をもたせます。
今回の課題では、どのセクションでも余白や見出しは似通っています。
同じ設定が使えそうなので、さくっと書いてみましょう。
css
h2 {
font-size: 36px;
}
main > section{
padding-top: 5rem;
padding-bottom: 10rem;
}
ブラウザで確認してみると、見出しと.col-6横並びの間が狭いです。
ここはarticleタグに余白を加えて調整しておきましょう。
そのほうが縦並びになったときも、ちょうどよく間隔を保ってくれるでしょう。
html
<!-- ============================
/ イベント・ニューオープン
/============================= -->
<section class="container">
<h2 class="text-center">
イベント・ニューオープン
</h2>
<div class="row">
<article class="col-6 position-relative mt-3rem">
<!-- 中略 -->
</article>
<article class="new col-6 position-relative mt-3rem">
<!-- 中略 -->
</article>
</div><!-- /.row -->
</section>
css
.mt-3rem{
margin-top: 3rem;
}
これでイベント・ニューオープン部分のPC幅コーディングは完成です。