説明リストを使ってアコーディオンUIをマークアップしていきます。
- JavaScriptを使ったアコーディオンメニュー
- リストタグ
- スタイリングの準備
JavaScriptを使ったアコーディオンメニュー
・前回までで簡易的にアコーディオンメニューを作っていきました。
・今回からJavaScriptを使ってもう少し複雑なそしてよく使われる形のアコーディオンメニューを作っていきたいと思います。
・まずはその初段階としてHTMLのマークアップから初めていきます。
リストタグ
・まずアコーディオンメニューはリストを作って行くタグが必要なのでdlタグを使っていきましょう。
・その中に質問と回答の欄が必要なので質問をdtタグを回答をddタグを使っていきます。
・質問と回答は複数あることを想定しているのでdtタグとddタグを増やし複数個作っておきます。
・あとは後でスタイリングがしやすいように質問と回答のペアはdivタグで囲って置くと便利です。
・こんな感じです。
<dl>
<div>
<dt>質問</dt>
<dd>回答。回答。回答。回答。回答。回答。回答。回答。回答。回答。回答。回答。</dd>
</div>
<div>
<dt>質問</dt>
<dd>回答。回答。回答。回答。回答。回答。回答。回答。回答。回答。回答。回答。</dd>
</div>
<div>
<dt>質問</dt>
<dd>回答。回答。回答。回答。回答。回答。回答。回答。回答。回答。回答。回答。</dd>
</div>
</dl>
・ただ注意点としてこれはただマークアップをしただけなのでdetailsタグとは違いクリックしても内容が展開できないので注意しましょう。
スタイリングの準備
・次はスタイリングをしていきます。CSSのファイルを準備しておきましょう
・headにCSSファイルのリンクを貼っていると思いますが復習で<link rel=”stylesheet” href=”css/styles.css”>と書いておきます。
・VS Codeですとこのhref=”css/styles.css”の部分をcommand + クリックをすると新しいファイルを作ってくれます。
・指示に従ってファイルの作成もしくはCreateFileを押すとCSSファイルを作ることができます。
・次回はスタイリングをしていくので作っておきましょう。
