アコーディオンメニューを作る

2021-09-22

アコーディオンメニューのファイルを作っていきます。

・まずは全体のイメージから掴んでいきたいと思います。

・アコーディオンメニューとは主にWEBサイトなどでQ&Aのようなものを作りたい場合、質問だけを表示させておいてその質問をクリックすることによって回答がふわっと現れるようなUIのことを言います。

・これを作っておくことによって長くなりがちなよくある質問を小さくして最後までWEBサイトを閲覧しやすくなるります。またごちゃごちゃ文字ばかりを書いてしまうとユーザーは読んでくれないので閲覧しに来た人が帰りにくいというメリットがあります。

・では早速アコーディオンメニューを作っていきましょう。

・今回もブラウザはChrome,エディタはVS Codeを使っていきます。

・わからない場合はこちらの記事を見てみてください。

Chromeブラウザを導入しよう

VS Codeエディタを用意しよう

・VS Codeの設定をしていきます。VS Codeを開いたらまずopen folderをクリックしフォルダを作っていきます。

・今回は新規作成なので左下の「新規のフォルダ」をクリックします。フォルダの名前を決めていくので今回はaccorfionとしていきましょう。

・これでフォルダができたので次にその中にファイルを作っていきます。今回はHTMLとCSS、JavaScriptを使っていくのでまずはHTMLファイルを作っていきます。

・ファイルを新規で作るアイコンをクリックし名前をindex.htmlとしていくとHTMLファルを作ることができます。

・このファイルの中にHTMLを書いていくことになります。

・文書宣言で<!DOCTYPE html>と書いていき、html要素を配置していくので<html lang="ja"></html>を書き、その中にhead要素とbody要素を配置していきます。

・head要素の中には文字コードの設定とタイトル、CSSファイルのリンクを張っておきましょう。

・body要素の中には色々いれたいのですがとりあえず見出しだけ書いておきます。

・今回はh1タグでQ&AとわかるようにFAQと書いておきます。

・長くなりそうなので今回はここまでにしておきます。

・index.htmlファイルをChromeにドラック＆ドロップするとここまで書いた内容をブラウザで確認することができます。今回はFAQと出てくるはずです。