12周年記念パーティ開催! 2024/5/10(金) 19:00

詳細を折りたたむdetails要素

全2回

details要素は、HTML5で追加された、いわゆる「詳細折りたたみ要素」と呼ばれている要素です。本シリーズでは、HTMLのdetails要素の仕様、用法、見た目のカスタマイズ方法などを解説します。

後編 details要素のスタイル変更と使いどころ

details要素やsummary要素の色を変えたり、アイコンをカスタマイズしてみます。また、実際にdetails要素が使われている例を見て、どのような場合に利用できるか、考えてみましょう。

前編 details要素とsummary要素

details要素は、開閉状態を持ち「開く」状態になったときにのみ、その中身の情報が表示される要素です。「詳細折りたたみ要素」と呼ばれたりもします。まずはdetails要素そのものについての理解を深めましょう。