実習範囲12～15：スマホ幅表示の調整

実習の範囲

コーディングしたLPを、スマホ幅でも見られるようにレスポンシブ化してください。

仕上がりの見本は素材ファイル内 lp-sp01.png ～ lp-sp03.png です。
（ファイルが縦長になりすぎるため分割しています。）

スマートフォン幅でのナビゲーション、よくある質問の開閉にはJavascriptを使います。
下記の『使用するjavascriptについて』のコードを使用してください。

Javascriptに関して本講座で解説は行いません。
自作Scriptが動作しない等はサポート外となりますことを予めご了承ください。

レスポンシブ設定の条件

コーディング要件ではレスポンシブ（PC、スマホ対応）となっていますが、タブレット幅の表示では崩れても問題ないという意味ではありません。

どんなブラウザ幅で見ても、レイアウトは維持できるようにしましょう。
最低限、大きなレイアウト崩れ・要素のはみ出しによる隙間はなくしてください。

【悪い例】

使用するjavascriptについて

解説ではナビゲーション、よくある質問の２つは、下記のjavascriptを使って表示を切り替えています。
Javascriptコードの追加方法は、それぞれのセクションの解説でご紹介します。
（※コーディングの仕方によって、そのままだ使えないこともあります）

js

// headernav
document.getElementById("navbtn").onclick = function(){
  document.querySelector('header').classList.toggle('open');
}

// 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);

【ヘッダーナビゲーション】

navbtnというidを持つ要素をクリックすると、headerタグにopenクラスを加える（既にopenクラスがある場合は無くす）

⇒ .open nav{} のような形で、メニューが開いているときのスタイルを指定する。

▼動作見本

【よくある質問】

faqbox-questionというclassを持つ要素をクリックすると、クリックした要素の親要素にactiveクラスを加える（既にactiveクラスがある場合は無くす）

⇒ .active .faqbox{} のような形で、メニューが開いているときのスタイルを指定する。

▼動作見本

オリジナルのコーディングを試されている方は自作したり、スニペット集などで探したコードを使用していただいても構いません。

コーディングのヒント

2カラム、3カラム横並びで配置しているパーツの多くは、「スマホ幅の時はcol-12幅」にするクラスを作って1カラム縦並びに変えると見本のようになります。

料金料のテーブルはoverflowプロパティを使って、横スクロール表示にすればOKです。
フォントサイズなどの微調整程度で済むはずです。