【Webサイト作成】パララックスサイトのテンプレートを作成　その８

Bootstrap
2019.12.31
スポンサーリンク

こんにちは朱夏です。

今回もパララックスサイトのテンプレートを作っていきます。
今回は、Bootstrapのアコーディオン機能を使ってFAQを実装してみたいと思います。

参考サイトはこちらです。

Bootstrap4移行ガイド
折り畳み～Bootstrap4移行ガイド
https://cccabinet.jpn.org/bootstrap4/components/collapse
少しのクラスとJavaScriptプラグインを使用して、プロジェクト全体のコンテンツの可視性を切り替える。

 

コード

コードはこちらです。
HTMLから。

<!-- エリア２ -->
<div class="background bg-02" id="area2">
   <div class="mx-5">

      <!-- エリア２タイトル -->
      <div class=" text-light border-bottom border-lightcard area2title">
         <h1>FAQ</h1>
         <h2>アコーディオン式のFAQ</h2>
      </div>
      <!-- エリア２タイトル END -->

      <!-- アコーディオン -->
      <div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">

         <!-- FAQ1 -->
         <div class="card">
            <div class="card-header" role="tab" id="headingOne">
               <h5 class="mb-0">
                  <a class="collapsed text-body stretched-link text-decoration-none" data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne">
                     Q1:一つ目の質問です
                  </a>
               </h5>
            </div>
            <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
               <div class="card-body">
                  A1:一つ目の質問の答えです
               </div>
            </div>
         </div>
         <!-- FAQ1 END -->

         <!-- FAQ2 -->
         <div class="card">
            <div class="card-header" role="tab" id="headingTwo">
               <h5 class="mb-0">
                  <a class="collapsed text-body stretched-link text-decoration-none" data-toggle="collapse" href="#collapseTwo" role="button" aria-expanded="false" aria-controls="collapseTwo">
                     Q2:二つ目の質問です
                  </a>
               </h5>
            </div>
            <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
               <div class="card-body">
                  A2:二つ目の質問の答えです
               </div>
            </div>
         </div>
         <!-- FAQ2 END -->

         <!-- FAQ3 -->
         <div class="card">
            <div class="card-header" role="tab" id="headingThree">
               <h5 class="mb-0">
                  <a class="collapsed text-body stretched-link text-decoration-none" data-toggle="collapse" href="#collapseThree" role="button" aria-expanded="false" aria-controls="collapseThree">
                     Q3:三つ目の質問です
                  </a>
               </h5>
            </div>
            <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
               <div class="card-body">
                  A3:三つ目の質問の答えです
               </div>
            </div>
         </div>
         <!-- FAQ3 END -->

         <!-- FAQ4 -->
         <div class="card">
            <div class="card-header" role="tab" id="headingFour">
               <h5 class="mb-0">
                  <a class="collapsed text-body stretched-link text-decoration-none" data-toggle="collapse" href="#collapseFour" role="button" aria-expanded="false" aria-controls="collapseFour">
                     Q4:四つ目の質問です
                  </a>
               </h5>
            </div>
            <div id="collapseFour" class="collapse" role="tabpanel" aria-labelledby="headingFour" data-parent="#accordion">
               <div class="card-body">
                  A4:四つ目の質問の答えです
               </div>
            </div>
         </div>
         <!-- FAQ4 END -->

         <!-- FAQ5 -->
         <div class="card">
            <div class="card-header" role="tab" id="headingFive">
               <h5 class="mb-0">
                  <a class="collapsed text-body stretched-link text-decoration-none" data-toggle="collapse" href="#collapseFive" role="button" aria-expanded="false" aria-controls="collapseFive">
                     Q5:五つ目の質問です
                  </a>
               </h5>
            </div>
            <div id="collapseFive" class="collapse" role="tabpanel" aria-labelledby="headingFive" data-parent="#accordion">
               <div class="card-body">
                  A5:五つ目の質問の答えです
               </div>
            </div>
         </div>
         <!-- FAQ5 END -->

      </div>
      <!-- アコーディオン END -->

   </div>
</div>
<!-- エリア２ END -->

 

CSSはこちらです。

.area2title {
    text-align: center;
    text-shadow: 1px 1px 1px black;
}

 

解説

それでは、解説していきます。
CSSはエリア２のタイトル部分を見やすくするために影を付けているのと、中央寄せの指定をしています。

<div class=”accordion” id=”accordion” role=”tablist” aria-multiselectable=”true”>

アコーディオンはこのclass=”accordion”などを付与しているdivタグが最上位の親要素になります。
この中に、Bootstrapのカード機能で書いたFAQを質問内容だけ残して折り畳んで、繰り返し積み重ねていけば完成です。

Bootstrap4移行ガイドで紹介されているものでは、アコーディオンの1つ目が展開された状態が初期状態になっているため、2つ目以降と書き方が違います。
1つ目の記述をコピーして増やしたりすると、初期状態が全て展開された状態になります。

 

課題
初期状態ですべて折りたたまれている状態にしたかったが、1つ目のタグの記述を2つ目以降と同様の記述にしても1つ目は折り畳まれなかった。

 

標準のアコーディオン機能に追加で、テキスト部分以外をクリックしても反応する様にしたことと、リンクテキストからアンダーバーなどの装飾を解除しました。
実装するには、<a>タグのclassに下記を追加すればOKです。

    • stretched-link(伸長リンク)
    • text-decoration-none(リンクテキストの装飾削除)

 

あとがき

今回はBootstrap4のアコーディオン機能でFAQを実装してみました。
同じ記述を繰り返しているように見えて、1つ目だけ違う記述だったというのは要注意ですね。

課題については、今後の学習でクリアしていきます。

今回はここまでです。
次回もよろしくお願いします。

 

スポンサーリンク
タイトルとURLをコピーしました