お問い合わせ部分を作ります。
お問い合わせセクションを作る
1.骨組みと背景色を設定
お問い合わせの部分は、大きく見ると.col-6を２つ横に並べた作り。
まずは全体の骨組みを作ってしまいましょう。
上部のみに入っている背景色は、ここまでと同じく擬似要素を使って作成します。
lp.html
<!-- ============================
/ お問い合わせ
/============================= -->
<section class="form mt-5rem position-relative">
<div class="container">
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
</section>
style.css
/* ----------------------
* お問い合わせ
* ---------------------- */
.form::before {
position: absolute;
z-index: -1;
content: "";
top: -5rem; /* .formのmargin分 */
width: 100%;
height: calc(5rem + 200px);
background-color: #FFE20D;
}
ブラウザで、切れ目なく黄色背景が伸びていることを確認してください。
2.見出しと背景の位置を合わせる
左側に配置されるdiv.col-6に中身を入れていきましょう。
見出し、テキスト、リストを書いていきます。
lp.html
<div class="col-6">
<h2 class="mt-0">
どんなことでも<br>お気軽にご相談ください
</h2>
<p>
ご不明な点があれば何でもお気軽にお尋ねください。<br>
お電話やZoomなどによる無料カンセリングも可能です。
</p>
<ul>
<li>すぐに返信（平均30分以内、営業時間内）</li>
<li>不明な部分はなんでもお答えします</li>
<li>お問い合わせは、もちろん公開されません</li>
<li>Zoomカウンセリング受付中</li>
<li>お電話やチャットもOK</li>
</ul>
</div><!-- /.col-6 -->
このままの状態だと、背景との位置が合いません。
疑似要素（::before）で作った黄色いブロックの高さは calc(5rem + 200px) です。
そのうちの5remはmargin分なので、実際にテキスト等と重なる部分の高さは200px。
h2に`min-heightを指定することで、h2以外の文字が黄色に重ならないようにします。
style.css
.form h2{
min-height: 200px;
}
3.CSSからGoogleアイコンを表示する
リスト箇所は、リストマークの代わりにGoogle Material Iconsを表示させます。
こうした箇所はlist-style: none;にしたうえで設定することが多いです。
疑似要素を使って、liタグの頭にアイコンが表示されるようにしてみましょう。
合わせて余白も調整していきます。
style.css
.form ul{
margin: 1.5rem 0;
padding-left: 0;
}
.form li{
list-style: none;
margin-bottom: 0.25em;
}
.form li::before{
font-family: "Material Icons Outlined";
font-size: 18px;
content:"task_alt";
padding-right: 1em;
}
contentの値はhttps://fonts.google.com/iconsでアイコンをクリックすると表示されるパネルの、アイコン名もしくは文字コード（Code Point）を貼り付けて使います。
※文字コードを使う場合は、最初に \ が必要です。
content:"\e2e6";
どちらの書き方でも、アイコンが表示されていればOKです。
フォーム部分を作成する
右側に配置されるdiv.col-6の中に、フォームを作っていきましょう。
1.必要な要素をhtmlに記述
入力できるようにだけ作れば良いので、シンプルに書いていきます。
項目ごとに<div class="form-item">で囲っています。
lp.html
<div class="col-6">
<form class="bg-white round-border">
<div class="form-item">
<label for="name" class="fw-bold">
お名前
</label>
<input type="text" id="name" name="name">
</div>
<div class="form-item">
<label for="email" class="fw-bold">
Eメールアドレス
</label>
<input type="email" id="email" name="mail">
</div>
<div class="form-item">
<label for="detail" class="fw-bold">
お問い合わせ内容
</label>
<textarea id="detail" name="detail"></textarea>
</div>
<div class="form-item">
<button type="submit" class="btn bg-yellow fw-bold mx-auto">送信する</button>
</div>
</form>
</div><!-- /.col-6 -->
style.css
.form-item{
width: 100%;
max-width: 430px;
margin: 1.5em auto;
}
とりあえずブラウザで確認してみます。
inputとtextareaが狭く、まだ見にくいですね。
2.見た目を整える
スタイルシートの方表示を整えていきましょう。
CSSinputとtextareaタグそれぞれに「form-input」クラスを加えます。
lp.html
form-inputクラスを使って、スタイル指定をします。
style.css
.form-input{
display: block;
width: 100%;
font-size: 16px;
margin-top: 0.75em;
padding: 0.5em 0.8em;
border: 1px solid #999999;
border-radius: 8px;
}
textarea.form-input{
height: 10em;
}
だいぶデザインに近づきました。
form全体の余白と、ボタンの表示を整えましょう。
.form form{
margin-top: 0.5rem;
padding: 1rem;
}
.form-item .btn{
display: block;
width: 100%;
max-width: 200px;
height: 56px;
font-size: 1rem;
border: none;
box-shadow: 2px 2px 1px rgb(0, 0, 0, 0.6);
}
