Webサイト作成を通して学ぶAstro
概要
MPA (複数の HTML ファイルを軸として構成する Web アプリケーション) 開発用フレームワークとして人気がある Astro 。その勉強のため、Bootstrap の公式サンプルを題材にしてみました。
CSS
CSSだけでメニューなどのopen/closeを制御する
#my-menu-close:not(:target) {
display:none;
}
#my-menu-close:target {
display:inline;
}
#my-menu-close:target + #my-menu-list {
display:inline;
}
#my-menu-close:target + #my-menu-open {
display:none;
}
#my-menu-close:not(:target) ~ #my-menu-list {
display:none;
}
ちょっと目からうろこだったのでご紹介しようと思います。
セレクタが若干複雑ですが、Javascriptよりは簡単に作ることができると思います。