よくある質問からフッターまでのレスポンシブ化を完了させましょう。 素材フォルダのlp-sp03.png、後半部分です。
1.よくある質問
1-1.カラム数の変更
見出しと、質問と回答の部分にそれぞれcol-sp-12クラスを追加します。
PC幅ではanswerの方も×マークに合わせて右側を空けていました。
スマホ幅だと狭いので、右側の空白を無くします。
style.css
.faqbox-answer .faqbox-toggle{
display: none;
}
2つ目以降のdiv.faqboxにmt-sp-2remクラスを追加。
各ボックスの間隔を少しずつ狭めたら、調整は完了です。
1-2.javascriptの追加（※任意）
jsファイルに以下のコードを貼り付けて頂くと、よくある質問も開閉できます。
コードについて本講座内では解説しません。
ご質問頂いてもお答えしかねますことを、予めご了承ください。
Javascriptのスキルも高めたい方は、コードを手がかりに調べてみてください。
mihon.js
// FAQ
document.addEventListener('DOMContentLoaded',function(){
let menu = document.querySelectorAll('.faqbox-question');
function toggle() {
let content = this.parentNode;
content.classList.toggle("active");
}
for (let i = 0; i < menu.length; i++) {
menu[i].addEventListener("click", toggle);
}
},false);
実習とは異なるクラス名を使っている場合は、2行目 document.querySelectorAll('.faqbox-question'); の「.faqbox-question」部分を変更してください。
【動作見本】
2.料金プラン
2-1.見出しと最低価格
料金プランセクションの上部を整えます。
まず、div.col-5にcol-sp-12クラスを追加して1カラム縦並びに変更しましょう。
- .price-topに設定しているmargin-left
- .price-top spanに設定している文字サイズ
上記２つを上書きして、調整します。
style.css
/* ---------------------- */
/* 料金プラン
/* ---------------------- */
.price-top{
margin-left: 0;
}
.price-top span {
font-size: 42px;
}
2-2.テーブル上の文字
テーブルは最初に設定したまま、横スクロールで表示させます。
ユーザーに見切れていると思われないよう、アイコンと「横にスクロールしてご確認ください」というテキストを表示させましょう。
bg-white.round-borderクラスのdivの上にpタグを挿入。
スマホ幅でのみ表示する「d-none d-sp-block」クラスを指定します。
更に配置、余白、フォントサイズのクラスを追加。
pタグの中にはgoogleのMaterial Iconsとテキストを入れます。
lp.html
<!-- 料金表 -->
<div class="price-tablewrapper position-relative">
<p class="d-none d-sp-block mt-sp-3rem mb-0 text-center fsize-14">
<span class="material-icons-outlined">swipe</span>
横にスクロールしてご確認ください
</p>
<div class="container bg-white round-border">
<table class="price-table mx-auto mt-3rem my-sp-1rem"> <!-- my-sp-1remを追加 -->
style.cssで以下2つを設定します。
- 追加したpタグの文字色をグレーにする
- bg-white.round-borderにpadding指定を追加
style.css
.price-tablewrapper p.d-sp-block{
color: #888;
}
.price-tablewrapper > .bg-white{
padding: 0 0.5rem; /* 今回追加分 */
overflow-x: scroll;
}
2-3.テーブル内のスタイル
tableタグ内、プラン名と料金の文字サイズを変更します。
style.css
.price-table-plan span{
font-size: 18px;
}
.price-table-price .pricetext{
font-size: 24px;
}
2-4.CTAボタン
画面左に配置されているCTAボタンを、横方向の中央に配置します。
左に寄ってしまっているのは、.cta-btnsに指定しているjustify-content: space-between;が原因です。
値をcenterに変更できるよう「justify-content-sp-center」クラスを作ります。
また「プラン紹介も承っております」の上を少し空けるため、divタグにmt-sp-2remクラスを追加します。
3.お問い合わせ
お問い合わせのセクションも、2カラム横並び→1カラム縦並びに変更します。
div.col-6に、col-sp-12クラスを追加してください。
黄色の背景部分が長いので、.form::beforeと.form h2の高さを調節します。
style.css
/* ---------------------- */
/* お問い合わせ
/* ---------------------- */
.form::before{
height: calc(5rem + 120px);
}
.form h2{
min-height: 120px;
}
フォーム部分は特に調整は必要ないですね。
4.フッター
フッターは下記4つを調整します。
- 縦並びに変更したブロック間に余白を加える
- li要素同士の距離を開く
- ボタンを中央に配置
- Copyrightを改行する
今まで作ってきたクラスを使います。
lp.html
全体を見直して、整えれば完成です。 もう少し頑張りましょう！
5.全体の見直しとタブレット対策
スマホ幅/PC幅での見直し
スマートフォン幅の表示を、もう一度ページ最上部から確認していきましょう。
表示領域からのはみ出し、レイアウト崩れがあれば直します。
余白や文字サイズなども、違和感があるところは修正していきましょう。
例えば「Skillhub卒業生が制作したWebサービス例」はmt-10remクラスだと、ちょっと離れすぎ。
mt-sp-5remクラスを加えて、margin-topの値を切り替えました。
画面幅のサイズを428px（iPhone 13 Pro Max）などに変更して、レイアウトがおかしくならないかも確認してみてください。
また、スマホ幅の設定が、PC幅のレイアウトに影響を与えていないか確認します。
- クラス名の-spが抜けによる崩れはないか
- 変なところでメディアクエリを閉じてしまっていないか
★小さめのモニター、タブレット幅でも確認
ここまでPC幅はコンテンツ幅1140pxを基準に作ってきました。
とは言え、PC閲覧でも、ブラウザのお気に入りバーをサイドに表示しているなど、幅1140pxよりも表示領域が狭い可能性もあります。
コンテンツ幅よりも狭い画面でも、崩れがないか確認しましょう。
合わせて、タブレット幅でも最低限のレイアウトは維持できているか確認します。
実習で行ってきたコーディングの場合、ブラウザ幅を狭めていくと横スクロールが表示されるタイミングがあるはずです。
幅880pxくらいでフッターのボタンがはみ出しますね。
それ以外に、800px前後になると下図の部分が見にくくなります。
- 代表の画像（写真）
- フッターのボタン
- メソッドのアイコン3つ横並び
この3箇所を整えておきます。
1. 代表の画像（写真）
写真が歪んでしまうのは、flexアイテムのため。
横並びの要素に合わせて、高さが引き伸ばされている形です。
画像をdivタグで囲ってワンクッション作ると、flexの影響を受けなくなり、高さを保てます。
htmlの方も同じようにdivで囲っておきます。
2.フッターのボタン
フッターボタンがはみ出すのは、分割したcol-3クラスと.btnのwidthが原因です。
といって、はみ出さないようにmax-width:100%;を指定しても見にくいですね。
バランスを取るため、「タブレット幅以下に適用する」CSSを書くためのメディアクエリを追加します。
書く場所は@media(max-width: 576px){}の上です。
style.css
新しく作った@media(max-width: 834px) { }の中に、下記4つのクラスを加えます。
style.css
@media(max-width: 834px) {
.col-tb{
flex: 1;
}
.col-tb-12{
flex: 0 0 auto;
width: 100%;
}
.mx-tb-auto{
margin-left: auto;
margin-right: auto;
}
.mt-tb-2rem{
margin-top: 2rem;
}
} /* @media */
- 会社概要などulが入っているdiv.col-3
- ボタンが入っているdiv.col-3
二箇所で、新しく作ったクラスを適用していきます。
lp.html
<div class="col-3 col-tb col-sp-12 mt-sp-2rem">
<ul>
<li><a href="#">会社概要</a></li>
<li class="my-sp-1rem"><a href="#">特定商取引に関する表示</a></li>
<li><a href="#">利用規約</a></li>
<li class="my-sp-1rem"><a href="#">プライバシーポリシー</a></li>
</ul>
</div>
<div class="col-3 col-tb-12 mt-tb-2rem">
<a href="#">
<div class="btn bg-white mx-tb-auto">
<span class="col text-center">Web資料請求</span>
<img src="images/btn-chevron.svg" alt="">
</div>
</a>
<a href="#">
<div class="btn bg-black text-white mx-tb-auto">
<span class="col text-center">お問い合わせ</span>
<img src="images/btn-chevron-white.svg" alt="">
</div>
</a>
</div>
3.メソッドのアイコン
スマホ幅用のメディアクエリ @media(max-width: 576px){}に書いていた、アイコンを横に並べている箇所のスタイル指定を@media(max-width: 834px) {}内に移動させます。
スマホ幅でFlexアイテムを縦並びに出来るよう、flex-tb-columnクラスを作ります。
style.css
アイコンと矢印( ▶ )全体を囲っているdivタグに設定されているクラスを変更します。
すごく良くはありませんが、最初よりは見やすいのではないでしょうか。
このような形で、レイアウト崩れ・はみ出しがない程度には整えてみてください。
これで実習用LPデザインのコーディングは終了です。 お疲れさまでした。
最後に
講座内では、背景色や文字色を設定するクラスを「bg-yellow」など色名をそのまま使っています。
これは説明時のわかりやすさを重視したものになります。
実際に制作する際は、無彩色以外は色名を使わないほうが無難です。
これは、コーディングの途中や、運用していく中で、カラーリングの変更があるため。
ピンク色のところを、水色にしてほしい……なんて変更があると、クラス名と色がバラバラで分かりにくくなってしまいます。お仕事やご自身のサイトを制作される場合は、「bg-info」のような、何色になっても使えるクラスを命名してみてください。