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

Bootstrap
スポンサーリンク

こんにちは朱夏です。

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

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

 

コード

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

 

CSSはこちらです。

 

解説

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


<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をコピーしました