CSSによるドロップダウンメニュー

reotogashi 147views 更新:2015年3月17日

本日の作業で技術的な進歩があまりなかったので個人的な勉強で学んだことをシェアする。
ドロップダウンメニューはCSSでもJQueryでも作ることができるが、今回はCSSで作ってみた。

CSSを書いてみると結構難しいのが分かる。 ブロック要素かインライン要素か分かっていないと思うようなスタイルを当てることができないし、親要素子要素など結構論理立ててスタイルを当てないと修正もえらく大変になるなと感じた。

これからプログラミングを勉強する人などはフロントエンド開発の第一歩としてやってみてはいかがだろうか。ちなみにホームページを自作したのはこれが初めてだが、(一応)完成させ公開したことでもっと良いホームページにしたい衝動に駆られJQueryを導入したり、今後もレスポンシブ対応などもやっていく予定で良いモチベーションになっている。

ソースはGithubにあげてあるのでホームページを自作してみたい人などは参考程度に。(一応HTML5は意識してマークアップした)またデモ(というか出来上がり)を見たい人は公開しているホームページをご覧いただきたい。 CSSでドロップダウンメニュー 完成版

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません