LPの最下部、フッターを作成します。
そのあとに、全体のコーディングとブラウザ表示を見直ししましょう。
フッター部分を作る
1.フッターのカラム分け
このフッターはページ全体のフッターです。
</main>タグのあとに、footerタグを挿入して作成していきましょう。
lp.html
</main>
<!-- ============================
/ footer
/============================= -->
<footer class="mt-5rem pt-5rem text-white">
</footer>
</body>
背景色を設定しておきます。
style.css
footer{
background-color: #4D4D4D;
}
画面幅が小さくなった設定は後で行うとして、まずは見たままカラム分けします。
コピーライトも.col-12として作ってしまいましょう。
lp.html
<footer class="mt-5rem pt-5rem text-white">
<div class="container">
<div class="row">
<div class="col-1"></div>
<div class="col-4"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-1"></div>
<p class="col-12 mt-3rem text-center fsize-12">
Copyright ©日本初のWeb起業スクール SkillHubアントレ All Rights Reserved.
</p>
</div>
</div>
</footer>
ブラウザで確認すると、Copyrightの下がギリギリです。
footerのpadding-bottomを加えておきます。
style.css
footer{
background-color: #4D4D4D;
padding-bottom: 2rem;
}
2.各カラムの中身を入れる
3つのcol-*の中に、会社情報やリンクを入れていきます。
①左のブロック
まずは1つ目、左側の会社情報ブロック。
画像とテキストを横並びにするために.d-flexを使います。
lp.html
<div class="row">
<div class="col-1"></div>
<!-- ここから -->
<div class="col-4 d-flex align-items-center">
<img src="images/footer-skillhub@2x.png" alt="SkillHubアントレ">
<div>
<h2 class="mt-0">SkillHubアントレ</h2>
<p class="my-0">東京都目黒区上目黒1-23-45</p>
<p class="my-0">support@skillhub.jp</p>
</div>
</div>
<!-- ここまで（以下略） -->
画像とhタグの文字が大きすぎて、横並びになりません。
div.col-4のところに「footer-info」クラスを追加して、CSSで調整します。
lp.html
<div class="col-4 footer-info d-flex align-items-center">
style.css
.footer-info img{
width: 62px;
max-width: 100%;
height: auto;
margin-right: 1rem;
}
.footer-info h2{
font-size: 16px;
font-weight: normal;
}
②中央ブロック
続いて、真ん中のdiv.col-3。
ここはシンプルにulタグで書きます。
リンク先のページは未定なので、空リンクを設定しておきましょう。
lp.html
<div class="col-3">
<ul>
<li><a href="#">会社概要</a></li>
<li><a href="#">特定商取引に関する表示</a></li>
<li><a href="#">利用規約</a></li>
<li><a href="#">プライバシーポリシー</a></li>
</ul>
</div>
ブラウザで確認すると、ulにリストマークとpaddingが付いています。
どちらも要らないので、style.cssで打ち消します。
li要素間に少し余白も加えましょう。
style.css
footer ul{
list-style-type: none;
padding-left: 0;
}
footer li{
margin-bottom: 0.25em;
}
③右のブロック
右のブロックはCTAでも使った「Web資料請求」「お問い合わせ」です。
<div class="btn ...>部分をCTA部分からコピー＆ペーストしてみましょう。
lp.html
<div class="col-3">
<div class="btn bg-white">
<span class="col text-center">Web資料請求</span>
<img src="images/btn-chevron.svg" alt="">
</div>
<div class="btn bg-black text-white">
<span class="col text-center">お問い合わせ</span>
<img src="images/btn-chevron-white.svg" alt="">
</div>
</div>
フッターほぼ全体に文字色白を指定しているため「Web資料請求」の文字が消えてしまっています。縦方向の余白もないので、調整しましょう。
style.css
footer .btn.bg-white{
color: #000000;
margin-bottom: 1rem;
}
全体を見直し、調整
ここまででPC表示用のLPコーディングが完成しました。
ページ最上部から、ブラウザ表示を見直していきましょう。
ページの見た目だけではなく、コードの方も確認していきます。
- インデントが整っているか
- 人に見せたくないメモ(コメントアウト)は削除したか
- CSSプロパティ,値の単位などに打ち間違いはないか
- imgタグにalt属性が入っているか
mihonコーディングの修正
ボタンのリンク
実習で作ってきたコーディングでは、ボタン（.btn）部分にリンクを設定していませんでした。
ファーストビューやCTA部分など、aタグをつけた形に変更していきます。
↓
CTAはdivをaに置換してしまうと崩れるので、aタグで囲います。
よくある質問のパネル部分
よくある質問セクションの、QとAがセットになっているパネル。
ここは最終的に、クリック/タップすることでで開閉できるようになる予定です。
ですが、PCで見た場合、パネルにマウスカーソルが重なってもカーソルが変わりません。
ユーザーには、クリックできるか分かりにくいかもしれません。
CSSでcursorプロパティを使って指定すると、対象の要素内にマウスポインターがあるときのカーソル表示を変更することが出来ます。
開く・閉じるのアクションもしやすいよう、.faqbox-question全体に指定しておきます。
style.css
.faqbox-question{
cursor: pointer;
}
※cursorの値（種類）はMDN Web Docsで一覧が確認できます。
これで基本（PC幅）コーディングは完了です。
次回からはレスポンシブ化、スマートフォン表示に対応できるよう調整します。