アコーディオンメニューの学び〜見た目編〜

前回の続きになります。
もしよければこちらの矢印編もご覧になってください。
参考になることがあると思います。

今回は作成するメニューの形を整えていきたいと思っております。
行うことリスト

• 見た目を整えるために、構造を考える

• HTMLを書いていく

• cssで見た目を整える(1.デフォルトをリセット⇨ 2.タイトルの見た目を整える⇨ 3.「＋」をつけていく⇨ 4.メニューを追加するメニューの見た目を整え、非表示にする)

イメージとしてはこんな形にしていきますね！

構造を考えていく必要がありそうですね！

構造としてはこんな感じにしていきます。

画像が小さく見えづらいのは申し訳ありません。

---

とりあえずHTMLを書いていきます。

矢印の部分は前回のものを使っているので、そのまま反映されていますね。
あとは他の部分をcssで整えていきましょう💨

---

css

最初に手をつけることとして、リセットcssなどを利用して、marginやpaddingなどなど、デフォルトで設定しているものを一旦リセットすることが多いと思いますが、
今回は必要な部分だけ書いていきますね。

必要な部分をリセットしていく

こんな感じでそれぞれ何も設定していない状態に👍

cssで設定するとこんな感じです。

これで下準備はできたので
次は見た目を全体的に整えていきます。

---

タイトルの見た目を整える

まずは大きな見た目を整えます。
liの大きさなどなど決めています。

上のcssを書くとこんな感じ。
少しずつ形になってきました。

---

「＋」ボタンを作っていく

次はタイトルの右側、開閉ボタンになる「＋」を設定していきます。

ここでは「＋」の左にある縦線と
「＋」ボタンを設定しています。
これを設定すると↓

開閉ボタンも出来て形が出来てきました。

---

メニューの中身を作っていく

ここまで大まかな形は出来てきました。
ただ、まだ完成していません。
あとは、開閉するメニューを付け足していかなければいけないので
作成してきます。

画像が大きいですが、全体を見れた方がわかりやすいと感じたので
大きめの画像で表示してます。
こんな感じで開閉するメニューをulタグで追加していきます。

追加するとこのような感じになります。
メニューが表示されてしまってますね。

ここまで来れば、今日の内容はもう一息です。

---

メニューを整えて、非表示にする

このようにcssを書くと↓

このような形になります。
画像にもありますが、矢印の作り方は矢印編を参考にしてください。

あとは最後に
.accordion ul に「display: none;」を指定して非表示にします。
上記の画像だとコメントアウトになってますが、コメントアウトを解除すると非表示になる形ですね。

このように、メニューが非表示になります。

長々と書いてきましたが、これでメニューの見た目を整えることについては終了です。

間違っているところもあるかもしれませんが、その際はぜひ教えていただけると嬉しいです。

---

🌟次回予告🌟

JavaScriptを使って
「＋」をクリックしたらメニューの開閉ができる機能をつけていきます！！
お楽しみに😊