コンテンツを折りたためる「アコーディオンパネル」の作り方をお伝えします。
アコーディオンパネルとは、見出しをクリックすることで、コンテンツが開いたり閉じたりするパネルのことです。
このアコーディオンパネルは、「よくある質問」の箇所でよく使われます。
「よくある質問」の見出しをクリックすることで、質問の答えが表示されるという形ですね。
コピペのみでできる簡単な実現方法をお伝えするので、良かったら活用してください。
■ このようなアコーディオンパネルが完成します！
下記の見出し（よくある質問）をクリックすると、質問に対する答えの文章が表示されます。
ここでは、このようなアコーディオンパネルを作る方法をお伝えします。
- Q. ホームページも作ってもらえますか？
はい、ホームページを作ることもできます。小さなお金で最も大きなリターンを得られるように、一番良い形でホームページを作ってご提供することができます。
- Q. 契約期間などはありますか？
契約期間などはまったくありません。 よくあるコンサルティングサービスのような「1年契約で200万円を先払いです！」などでは一切ないので、ご安心くださいね。
- Q. 小さなお願いも受けていただけますか？
はい、「ホームページのこの箇所がうまく表示されなくて困っている」や「ホームページの この箇所をこうしたい」などでも大丈夫です。
■ コンテンツを折りたためる「アコーディオンパネル」の作り方の手順
手順１：CSSファイル（style.css）に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。
|
上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。
（一番下に、上記のソースを追加するのが、分かりやすいと思います）
手順２：アコーディオンパネルを表示したい箇所に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、HTMLファイルに貼り付けてください。
|
アコーディオンパネルを表示したい箇所に、上記のソースを入れます。
なお、見出しの文章は自由に変更することができますし、答えの文章も自由に変更することができます。
手順３：見出しをクリックして、隠れているコンテンツが表示されることを確認する。
ホームページの表示を確認して、下記のような「アコーディオンパネル」が表示されていることを確認してください。
また、見出しをクリックして、隠れているコンテンツが表示されることも確認できれば、作業は完了です。
- Q. ホームページも作ってもらえますか？
はい、ホームページを作ることもできます。小さなお金で最も大きなリターンを得られるように、一番良い形でホームページを作ってご提供することができます。
- Q. 契約期間などはありますか？
契約期間などはまったくありません。 よくあるコンサルティングサービスのような「1年契約で200万円を先払いです！」などでは一切ないので、ご安心くださいね。
- Q. 小さなお願いも受けていただけますか？
はい、「ホームページのこの箇所がうまく表示されなくて困っている」や「ホームページの この箇所をこうしたい」などでも大丈夫です。
■ 【カスタマイズ方法】アコーディオンパネルの項目を増やす方法
アコーディオンパネルの項目を増やすには、HTMLファイルに入れた記述の中に、下記のソースを追加するだけです。
<dl class="faq-section">
<dt class="question">Q. 小さなお願いも受けていただけますか？<span class="open-btn" aria-label="開く"></span></dt>
<div class="answer">
はい、「ホームページのこの箇所がうまく表示されなくて困っている」や「ホームページの この箇所をこうしたい」などでも大丈夫です。
</div>
</dl>
|
こうすることで、アコーディオンパネルの項目を増やすことができます。
なお、すでにある箇所をコピーして貼り付ける（項目を増やす）と、分かりやすいと思いますよ。
■ 【カスタマイズ方法】アコーディオンパネルの色を変更する方法
アコーディオンパネルの色は、CSSファイル（style.css）に入れた記述を修正することで、色を変えることができます。
たとえば、「faq-section」の中にある「background: #ffffff;」の箇所を、「background: #33ff33;」などに変更することで、見出しの色を変えることができますよ。
また、「answer」の中にある「background: #f3f3f3;」の箇所を、「background: #b2ffb2;」などに変更することで、アコーディオンパネルを開いたときの背景の色を変更できます。
■ やり方が分からない場合は？
もし、やり方が分からなかったり、うまく行かなかった場合は、下記ページからお問い合わせください。
「こういうことを実現したい！」や「こんなことで困っている…」などを含めて、当サイトの運営者が、直接サポートさせていただきますね。
【よく読まれている関連記事】
