::before, ::after
HTML記述例
<!-- .main-content --> <main class="main-content"> <section class="msgSec"> <h2>Message</h2> <p>この度、カピぞうとカピ子は<br> ウェディングパーティーを開催することとなりました。</p> <p>お忙しいとは思いますが、ご参加いただけたら嬉しいです。<br> ご出欠のお知らせは、ページ下のフォームよりお願い申し上げます。</p> <p class="illust"><img src="img/message_img.png" srcset="img/message_img.png 1x,img/message_img@2x.png 2x" alt="カピぞうとカピ子"></p> </section><!-- /.msgSec --> <section class="dateSec"> <h2>Save the Date</h2> <div class="layoutWrap"> <p><img src="img/date_img.jpg" srcset="img/date_img.jpg 1x,img/date_img@2x.jpg 2x" alt=""></p> <div class="detailWrap"> <p class="dateDetailSec"> 3022.8.8 <span class="word1">Thu</span><br> <span class="word2">Start</span> <span class="word3">18:30-</span> </p> <section class="accessSec"> <h3>Access</h3> <p>レンガ街ストリート1-2-3<br> Ristorante Capita にて<br> 03-XXXX-XXXX</p> </section><!-- /.accessSec --> </div><!-- /.detailWrap --> </div><!-- /.layoutWrap --> </section><!-- /.dateSec --> <section class="form-section"> </section><!-- /.form-section --> </main> <!-- /.main-content -->
擬似要素を利用して付加コンテンツを追加
- p {width: fit-content;}(position: relative; の基準幅を決める)
- p::before、p::after の使い方を理解する
/* ------------------------------------------ main ------------------------------------------- */ /* ------------ msgSec ------------ */ .msgSec { padding-top: 80px; background-color: #fbfaf7; text-align: center; } .msgSec p { width: fit-content; margin: 0 auto 40px; line-height: 1.75; } .msgSec p.illust { margin: 80px auto 0; position: relative; } .msgSec p.illust::before { content: url(../img/deco_left.png); position: absolute; left: -60px; bottom: -30px; } .msgSec p.illust::after { content: url(../img/deco_right.png); position: absolute; right: -60px; bottom: -30px; }
/* ------------ dateSec ------------ */ .dateSec { margin: 0 auto 480px; padding: 80px 0 120px; background-color: #fff; } .layoutWrap { display: flex; width: 1240px; margin: 0 auto; } .layoutWrap > p { flex-basis: 735px; } .layoutWrap > .detailWrap { flex-basis: 465px; padding-top: 100px; } .dateSec .dateDetailSec { font-size: 72px; font-family: 'Sawarabi Mincho',serif; margin: 0 0 180px -100px; background-color: #fff; padding: 40px 64px; line-height: 1.2; } .word1 {font-size: 50px;} .word2 {font-size: 40px;} .word3 {font-size: 60px;} .accessSec { margin-left: 48px; } .accessSec h3 { color: #cfafa3; font-size: 55px; letter-spacing: .05em; margin-bottom: 8px; } .accessSec p { line-height: 1.6; }
擬似要素を利用して背景画像を設定
- CSS「dateSec」部に追加
/* ------------ dateSec ------------ */ .dateSec::after { content: ""; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/bg.jpg) no-repeat center; background-size: cover; z-index: -1; }