下図の範囲をコーディングしていきます。
卒業生の声
1.背景画像と見出しの設定
最初に「卒業生の声」全体にかかる背景と、上部の見出しを設定します。
背景画像の設定用に「testimonials」クラスを新しく追加しましょう。
lp.html
<!-- ============================
/ 卒業生の声
/============================= -->
<section class="testimonials">
<div class="container pt-5rem">
<h2 class="text-white text-center mt-0">
卒業生の声
</h2>
</div><!-- /.container -->
</section>
style.css
.testimonials{
background-image: url("images/testimonials-bg@2x.jpg");
background-position: right bottom;
background-size: cover;
padding-bottom: 8rem;
}
ブラウザで確認してみましょう。
学習フロー部分の背景色との間に、隙間が出来ています。
検証ツールで見てみると、olタグにつけられているブラウザのデフォルトCSSが邪魔をしていることがわかります。
前回書いた.flow{ }内に、下marginを無くす指定を追記してください。
style.css
.flow{
list-style: none;
margin-bottom: 0; /* 今回の追加箇所 */
padding-left: 0;
}
2.半透明のフレームと顔写真を配置
卒業生の顔写真とコメントの背景になっている、半透明の部分を作っていきます。
大まかな構成は、下記のイメージです。
- 画像部分と文字部分に分ける
- 画像部分はCSSで作った半透明の円と画像を重ねる
- 文字部分は角丸+背景色を半透明で指定する
htmlとcssで、簡単に書いてみます。
<article> ~ </article>までが上図の範囲内です。
lp.html
<!-- ============================
/ 卒業生の声
/============================= -->
<section class="testimonials">
<div class="container pt-5rem">
<h2 class="text-white text-center mt-0">
卒業生の声
</h2>
<div class="row">
<article class="col-6">
<div class="testimonial-photo position-relative">
<div class="testimonial-photo-circle"></div>
<img src="images/student1@2x-8.png" alt="" class="testimonial-img position-absolute">
</div>
<div class="testimonial-text round-border">
</div>
</article>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
style.css
.testimonial-photo-circle{
width: 276px;
height: 276px;
background: rgba(255, 255, 255, 60%);
border-radius: 50%;
}
.testimonial-img{
top: 13px;
left: 13px;
width: 250px;
height: 250px;
}
.testimonial-text{
padding: 2.5rem 2rem;
background: rgba(255, 255, 255, 60%);
}
このまま画像部分（.testimonial-photo）を中央配置にして、.testimonial-textをネガティブmarginで上に持ち上げればデザインのように繋がりそうです。
ですが、１つ問題があります。
半透明の要素を重ねると、不透明度が上がって色が濃くなります。
検証ツールで実験すると、分かりやすいです。
重なった部分だけ見え方が変わってしまって変ですね。
上図のようにならないようにするには、円の下部を隠す必要があります。
Illustratorで“クリッピングマスク”を適用するイメージです。
上のアニメーションでの灰色の四角形、“クリッピングマスク”の役割を持つdivを加えましょう。
下図、ピンク色の.testimonial-photo-mask部分です。
写真はマスクしないよう、testimonial-photo-circleクラスの要素のみを囲います。
htmlの方にも追加してみましょう。
lp.html
<article class="col-6">
<div class="testimonial-photo position-relative">
<div class="testimonial-photo-mask"><!-- ここを追加 -->
<div class="testimonial-photo-circle"></div>
</div><!-- /.testimonial-photo-mask -->
<img src="images/student1@2x-8.png" alt="" class="testimonial-img position-absolute">
</div>
<div class="testimonial-text round-border">
</div>
</article>
CSSでは高さと、overflow: hidden; を指定します。
これにより.testimonial-textとの重なりを回避します。
style.css
.testimonial-photo-mask{
height: 230px;
overflow: hidden; /* 半透明の被り防止 */
}
重ならず、一体化したような見た目になりました。
画像部分を中央に持ってくるために、.testimonial-photoにwidthを指定します。
mx-autoクラスを追加すると、ちょうど真ん中に配置されます。
style.css
.testimonial-photo{
width: 276px;
}
lp.html
<article class="col-6">
<div class="testimonial-photo mx-auto position-relative">
<div class="testimonial-photo-mask">
<div class="testimonial-photo-circle"></div>
</div>
<img src="images/student1@2x-8.png" alt="" class="testimonial-img position-absolute">
</div>
<div class="testimonial-text round-border">
</div>
</article>
完成！
3.見出し（タイトル）
div.testimonial-text内の見出し（タイトル）部分。
二重線の作り方は何通りかありますが、今回はdivを重ねて作ります。
lp.html
<div class="testimonial-text round-border">
<div class="testimonial-ttl position-relative">
<img src="images/quotation.svg" class="quotation position-absolute" alt="">
<h3 class="my-0">
サービスを作る技術を教えていただきました
</h3>
</div>
</div>
style.css
.testimonial-ttl{
margin-top: 1rem;
padding: 3px 0;
border-top: 3px solid #000000;
border-bottom: 3px solid #000000;
}
.testimonial-ttl h3{
padding: 1rem 2rem;
line-height: 1.4;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.testimonial-ttl .quotation{
top: -25px;
left: 0;
width: 50px;
height: 50px;
}
4.本文部分
最後に、卒業生からのコメント文章（本文）を追加します。
ここはシンプルにpタグで囲うだけで良いです。
lp.html
<article class="col-6">
<div class="testimonial-photo mx-auto position-relative">
<div class="testimonial-photo-mask">
<div class="testimonial-photo-circle"></div>
</div>
<img src="images/student1@2x-8.png" alt="" class="testimonial-img position-absolute">
</div>
<div class="testimonial-text round-border">
<div class="testimonial-ttl position-relative">
<img src="images/quotation.svg" class="quotation position-absolute" alt="">
<h3 class="my-0">
サービスを作る技術を教えていただきました
</h3>
</div>
<p>
プロジェクトサイトを作成してきましたが、とても参考になりました。わからない部分や難しい部分はコードレビューをしていただき乗り越えることができました。このWeb起業サポートプランを受講して本当に良かったと思っています。
</p>
<p>
私は元々コンサルティングをしていたのですが、お客さんにこのプロジェクトツールを導入していただき、毎月の新たな収益となっています。 これからの私の目標はこのツール/サービスだけでやっていくことです。もっとサービスを良くして本格リリースしたいと思っています。
</p>
</div>
</article>
5.複製して、右側も作る
<article class="col-6"> ～ </article>までをコピー＆ペーストして、右側の女性の方も作ります。
変更箇所は、画像のパスと、テキスト部分です。
これで卒業生の声セクション完成です。
articleタグについて
article要素は 完全な、または自己完結型の構成を表す
と定義されています。また、HTML Standardでは例として「フォーラムの投稿、雑誌や新聞の記事、ブログエントリ、ユーザーが送信したコメント、インタラクティブなウィジェットやガジェット、その他の独立したコンテンツアイテム」を挙げています。
参考元：HTML Standard
articleタグがよく使われるのは、ブログやニュースの記事部分をマークアップする時。また、その記事についたコメントをarticleで囲むこともあります。今回のLPの場合、各セクションはWeb起業プランを説明するパーツです。お客様の声は「受講してどうだったのか」という内容で、それぞれ自己完結していると考えられるためarticleを使いました。
このようなクライアント／コーダーによって捉え方が異なる、グレーな部分も出てきます。今回の.col-6部分は、divタグやsectionタグで囲んでも間違いではありません。
2つ目のCTAを設置
完成した卒業生の声セクションの下に、CTAを設置します。
ここは以前作った1つ目のCTAと全く同じですので、まるごとコピーして貼り付けてしまいましょう。
sectionタグに.mt-10remがあると、下図のように.testimonialで設定した背景画像との間に隙間ができてしまいます。
隙間がなくなるようにmt-10remクラスを削除しましょう。
↓ mt-10remクラスを削除すると、ピタッとくっつきます。
※mt-10remクラスを抜いても隙間が消えない場合は、それ以外のどこかの要素にmarginが入っています。検証ツールを使って調整してください。