【HTML/CSS】プルダウンメニューの作成方法について
プルダウンメニューの作成方法についてはすでに多くのサイトで紹介されているのは、今回は私が作成した時に苦労したポイントだけお話したいと思います。
サイトのコードをコピペしてそれを改良しながら自分の実現したいことを目指した
これは失敗でした。やりたいことと紹介されているコードは似ているようで全然違うことも多いと思います。
pxとemとremが混在したりとかします。
下手にコピペするよりもコードの意味を理解してから、自分で考えてコーディングした方が早いと考えます。
実現したいことを一度にやろうとしてしまった
混乱しました。
今回でいうと固定されたメニューから、プルダウンで子→孫→ひ孫まで階層があるのですが、一気にひ孫までやろうとしてしまいました。
やり方としてはまずメニューからプルダウンで子を表示させるところまで作って、その次に孫というように段階的にやればよかったと考えています。
ダミーデータをシンプルに
実現したいことを一度にやってしまったこととも重複するのですが、ひ孫までのデータを作ってCSSの作業をしていたので、表示データが重なっておかしなことになってしまいました。
マークアップするときのデータはなるべくシンプルにするべきです。
動かすことを重視してしまった
コピペしてから初めてしまったのは心の底で「よく分からなくても、動けばいいや」という心理が働いたんだと思います。
「理解」しないと短期的にも長期的にも効率が悪いということを実感しました。
今回はうまくいかなったのでこうやって反省できていますが、これがうまくいってしまうと。。。
細かい部分でつまづいた
- paddingすることでaタグのリンクが押せなくなってしまった
- 横並びする方法でflex、inline-blockの知識が混在してしまった
- ulとliの見た目をデザインするとき、ulで定義すべきか、liで定義すべきか
などなど
参考サイト
【CSS】CSSだけで作るドロップダウンメニュー（多階層） – WEBDESIGNDAY
CSSのみでプルダウン形式のメニューを実装する | Designmemo（デザインメモ）-初心者向けWebデザインTips-
