ファーストビューから1つめのCTAまでを調整していきます。
素材フォルダのlp-sp01.pngの範囲です。
1.ファーストビュー
上図が作りたいレイアウト。
現在の表示（下図）は、画面幅に対してすべての要素が大きすぎる状態です。
スマートフォン表示用のファーストビュー画像がありますので、変更しましょう。
また、フォントサイズや画像などのサイズも調整します。
style.css
.fv {
background-image: url(images/fv-sp@2x-80.jpg);
background-position: right bottom;
height: 400px;
font-size: 14px;
}
.fv h1 {
font-size: 26px;
padding-top: 1em;
}
.fv-award img {
max-width: 80px;
margin-right: 15px;
}
ブラウザで確認してみましょう。
修正が必要な部分が、あと２箇所あります。
スマホ幅でのみ改行は、前回作った「d-sp-block」クラスを使えばできます。 空のspanタグを使います。
lp.html
<p class="fsize-10 mt-0">
※1 マクロミルの調査<span class="d-sp-block"></span>2021/9/1 ~ 2021/10/31 による
</p>
.btnの大きさはwidthを上書きすれば良さそうです。
が、幅を小さくすると左側に寄っています。
スマホ幅のみ、ボックスを中央に配置するクラスを作っておきましょう。
ここもクラス名には-spを入れて「スマホ幅の時は」を示します。
2.課題セクション
ファーストビュー下の「Web起業でアイディアを～」からWeb起業の課題までを調整します。
2-1.見出しを変更
h2,h3の文字サイズが、スマートフォンの幅に対して大きすぎますね。
それぞれ変更しましょう。
style.css
/* ---------------------- */
/* text & color
/* ---------------------- */
h2{
font-size: 26px;
}
h3{
font-size: 21px;
}
デザインを見ると、自動改行ではなくキレの良いところで改行したいようです。
ファーストビューと同じく<span class="d-sp-block"></span>を挟んで改行させます。
html（例）
<h2 class="text-center">
Web起業でアイディアを<span class="d-sp-block"></span>“事業”にする
</h2>
2-2.カラムの変更
ファーストビュー下の文章、課題の例3つすべてに「col-sp-12」クラスを追加します。
html（例）
<p class="col-10 col-sp-12 mx-auto">
実店舗やオフィスを持たず、Webを使ったサービスで起業することを我々はWeb起業と呼んでいます。<br>
お家にいながら企業ができるので、最小限のリソースでも起業が可能。低コスト・低リスクでスタートを切ることができます。
</p>
2-3.余白を追加
3カラム横並び→縦並びに変更した“課題”の部分。
余白が足りずに、ピンク色の吹き出しと文字が重なってしまっています。
適度な間隔を保つために、スマートフォン幅用のmarginクラスを作ります。
style.css
.mt-sp-3rem{
margin-top: 3rem;
}
2番目と3番目の“課題”を囲うdivにmt-sp-3remクラスを追加。
2-4.背景色白のボックスにmarginを加える
白の角丸ボックスの左右にmarginを加えて、黄色の背景色が少し見えるようにします。
style.css
.bg-white.round-border{
margin-left: 10px;
margin-right: 10px;
}
3.結果セクション
3-1.黄色背景部分
- pタグにcol-sp-12クラスを追加
- 黄色の三角形を短くする
上記2箇所を変更します。
lp.html
style.css
/* ---------------------- */
/* problems & solution
/* ---------------------- */
.solution-title{
margin-bottom: calc(75px + 5rem);
}
.solution-title::after{
border-width: 75px 50vw 0 50vw;
bottom: -75px;
}
3-2.画像とテキスト横並び箇所
col-4とcol-8クラスのあとに、それぞれcol-sp-12クラスを追加します。
lp.html
<div class="row">
<div class="col-4 col-sp-12">
<img src="images/solutions1@2x-8.png" alt="01-Web制作技術" class="w-max100">
</div>
<div class="col-8 col-sp-12">
<!-- ~~略~~ -->
</div>
</div><!-- /.row -->
01～03まですべて縦並びにすると、2番めのマネタイズ～の箇所だけ順番が逆になります。 orderプロパティを使って、順番を入れ替えましょう。
style.css
.order-sp-2nd{
order: 2;
}
lp.html
<div class="row mt-5rem">
<div class="col-8 col-sp-12 order-sp-2nd">
<h3 class="mt-0">
<span class="marker-pink">マネタイズ（お金を稼ぐ方法）までをカバーします！</span>
</h3>
<!-- ~~略~~ -->
</div>
<div class="col-4 col-sp-12">
<img src="images/solutions2@2x-8.png" alt="02-集客・マーケ" class="w-max100">
</div>
</div><!-- /.row -->
並び順は整いました。 画像とh3見出しの間が狭いので、mt-0を上書きするクラスを作ります。
style.css
.mt-sp-2rem{
margin-top: 2rem;
}
h3タグにそれぞれmt-sp-2remクラスを追加します。
lp.html
<h3 class="mt-0 mt-sp-2rem">
<span class="marker-pink">楽しみながら、Web技術を習得していただきます</span>
</h3>
3-3.Webサービス例
- div.col-4にcol-sp-12クラスを追加して縦に並べる
- 2つ目と3つ目のdivにはmt-sp-2remクラスも追加
4.CTAセクション
4-1.文字サイズの調整
全体的に文字が大きいので、整えていきます。
htmlの方では、改行を二箇所加えます。
文字サイズを変更するためのクラスも作りましょう。
lp.html
style.css
.fsize-sp-12{
font-size: 12px;
}
/* ---------------------- */
/* CTA
/* ---------------------- */
.cta-baloon{
font-size: 18px;
}
.cta-toptext{
font-size: 18px;
margin: 1em 0;
}
4-2.余白とボタンの調整
mt-10remクラスだと、間隔が開きすぎて見えます。
半分matgin-topが付けられるmt-sp-5remクラスを作ります。
lp.html
<section class="cta mt-10rem mt-sp-5rem bg-yellow position-relative">
style.css
.mt-sp-5rem{
margin-top: 5rem;
}
CTAボタンは、横方向中央に配置します。
揃えられるように flex-columnクラスを指定、揃え位置を指定する「align-items-sp-center」クラスを新しく作ります。
lp.html
<div class="cta-btns flex-sp-column align-items-sp-center">
新しく作った「align-items-sp-center」クラスのスタイル指定を書きます。
また、2つのボタンがくっつかないように.cta-btns .bg-white下に余白を加えます。
style.css
.align-items-sp-center{
align-items: center;
}
.cta-btns .bg-white{
margin-bottom: 1rem;
}
これで1つ目のCTAまでの調整完了です。