はい、HTML、CSS、JavaScriptを使ってアコーディオン方式のQ&Aセクションを作成するコード例です。
この例では、質問部分をクリックすると、対応する回答部分が表示・非表示されるようにします。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q&A アコーディオン</title>
<style>
/* スタイル */
.accordion-item {
border: 1px solid #ccc;
margin-bottom: 10px;
}
.accordion-question {
background-color: #f1f1f1;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
font-size: 1rem;
font-weight: bold;
}
.accordion-question:hover {
background-color: #ccc;
}
.accordion-question.active {
background-color: #ccc;
}
.accordion-answer {
padding: 0 18px;
background-color: white;
max-height: 0; /* 初期状態では高さを0にして非表示 */
overflow: hidden;
transition: max-height 0.2s ease-out; /* 開閉時のアニメーション */
}
.accordion-answer p {
padding: 10px 0;
}
</style>
</head>
<body>
<h1>よくある質問</h1>
<div class="accordion-container">
<div class="accordion-item">
<button class="accordion-question">質問 1：これは最初の質問です。</button>
<div class="accordion-answer">
<p>回答 1：ここに最初の回答が入ります。アコーディオンが開くとこのテキストが表示されます。</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-question">質問 2：2番目の質問は何ですか？</button>
<div class="accordion-answer">
<p>回答 2：これは2番目の回答です。コンテンツは自由に追加できます。</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-question">質問 3：最後の質問です。</button>
<div class="accordion-answer">
<p>回答 3：3番目の回答です。長い文章でも大丈夫です。</p>
</div>
</div>
</div>
<script>
// JavaScript
const questions = document.querySelectorAll('.accordion-question');
questions.forEach(question => {
question.addEventListener('click', function() {
// クリックされた質問に 'active' クラスをトグル
this.classList.toggle('active');
// 次の要素（回答部分）を取得
const answer = this.nextElementSibling;
// 回答部分の表示・非表示を切り替え
if (answer.style.maxHeight) {
answer.style.maxHeight = null; // 非表示にする
} else {
answer.style.maxHeight = answer.scrollHeight + 'px'; // コンテンツの高さに合わせて表示
}
});
});
</script>
</body>
</html>
コードの説明:
-
HTML (
<div class="accordion-container">):- アコーディオン全体を囲むコンテナです。
- 各Q&Aの項目は
<div class="accordion-item">で囲みます。 - 質問部分は
<button class="accordion-question">にします。ボタン要素にすることで、キーボード操作でのフォーカスやクリックイベントが扱いやすくなります。 - 回答部分は
<div class="accordion-answer">にします。この要素の中身が表示・非表示されます。
-
CSS (
<style>):.accordion-item: 各Q&A項目の基本的なスタイルを設定します。.accordion-question: 質問部分（ボタン）のスタイルを設定します。カーソルをポインターにしたり、ホバー時の色を変えたりしています。.accordion-question.active: 質問が開いている状態（JavaScriptでactiveクラスが付与された時）のスタイルです。.accordion-answer: 回答部分のスタイルを設定します。max-height: 0;: これがポイントで、初期状態では高さを0にしてコンテンツを見えなくしています。overflow: hidden;: 高さが0の時に中身がはみ出さないようにします。transition: max-height 0.2s ease-out;:max-heightの変化にアニメーションをつけ、スムーズに開閉するようにします。
-
JavaScript (
<script>):document.querySelectorAll('.accordion-question'): ページ内の全てのaccordion-questionクラスを持つ要素（質問ボタン）を取得します。questions.forEach(...): 取得した各質問ボタンに対してループ処理を行います。question.addEventListener('click', function() { ... }): 各質問ボタンにクリックイベントリスナーを追加します。ボタンがクリックされると中の関数が実行されます。this.classList.toggle('active');: クリックされた要素（thisはその質問ボタン）にactiveクラスを付けたり外したりします。CSSで開閉時のスタイルを制御するために使います。const answer = this.nextElementSibling;: クリックされた質問ボタンのすぐ次の要素（つまり回答部分のaccordion-answer）を取得します。if (answer.style.maxHeight) { ... } else { ... }: 回答部分のmax-heightスタイルを確認し、表示状態を切り替えます。answer.style.maxHeight = null;: もしmax-heightが設定されている（つまり開いている）場合は、nullにして非表示に戻します。（max-height: 0;相当の効果になりますが、CSSのtransitionが効きやすいためnullを使っています）answer.style.maxHeight = answer.scrollHeight + 'px';: もしmax-heightが設定されていない（つまり閉じている）場合は、その要素のスクロール可能な高さ (scrollHeight) を取得し、それをmax-heightに設定して表示します。これにより、コンテンツの量に合わせて高さを調整できます。
このコードをコピーしてHTMLファイルとして保存し、ブラウザで開くとアコーディオン式のQ&Aが表示されるはずです。スタイルやデザインはCSSを編集することで自由に変更できます。
