こんにちは、DAFUです。
今回はHTML5で使えるタグのうち、Detailsというタグの説明です。
このタグを使うと以上のように、パカパカ開くテキストボックスを簡単に実装でき、いい感じのFAQとかできます。
サンプルコード
<details> <summary>見出し</summary> <p>解説とか説明とか</p> </details>
これで先述したサンプルのようなものになります。
しかし、このままではブサイクなので、CSSを使って少し調節してやります。
CSSサンプル
details{
padding: 10px 15px;
border: solid 1px #333;
border-radius: 5px;
}
このようにCSSをあてるとそれなりに見れるものになります。
ちなみにこれは上記のものと使っているCSSは同じです。
まとめ
いかがでしたでしょうか。JSを使わなくてもアコーディオンメニューが作れるので便利だと思います。
ではまた。ﾉｼ