CSSすら不要！detailsとsummaryタグで作る簡単アコーディオン

CSSすら不要！detailsとsummaryタグで作る簡単アコーディオン長い文章や補足説明をアコーディオン（折りたたみ）にしたい時ってありますよね。そんな時に使える details と summary タグを紹介します。CSSなしでも実装できますが、CSSを加えてより素敵な表現をする方法も挑戦しましょう！ details と summary タグの基本的な使い方details タグで囲んだ部分がアコーディオンとして設定されます。その中に summary タグで最初から表示させておきたい部分を囲めば完成！ summary タグの部分をクリックすると、詳細文が表示されます。 <details> <summary>Adobe Photoshop</summary> 画像編集ソフト。写真やイラスト、3Dアートワークの作成、webサイトやモバイルアプリのデザイン、動画編集や描画などはPhotosh

[silossowski]

HTMLに「テキストを折りたたむ」というスタイル持たせるの、拡張性が落ちる（あとでタグや文書構造を変えにくくなる）し、本来そういうものはCSSに担当させるべきだと思うのだけど

[Shisama]

detailsとsummary、GitHubのコメントで長いコードやログを貼るときによく使う。<details><summary>index.js</summary> ```js /* コードやログ */ ``` </details>みたいな

[diveintounlimit]

HTML5はlink rel=prefetchとかiframe sandboxとかmeterとかカスタム要素とか機能的なの盛り盛りなので、detailsとsummaryだけについてあれこれ言っててもしゃーないと思いました（こなみ

[kathew]

IE/Edgeは非対応。SEOに良いかもしれない（スクリプトでテキストを非表示にするわけではないので）

[aoiasaba]

恐ろしい進化だお

[kai_kou]

ほほぅ

[dala]

今もうこんなのあるのか。

[mricopp]

マークダウンと同じなのか

[cartman0]

dialogタグといい便利だな、しかし、IE..

[lnimroder]

これmdの機能だとばかり思っていた

[nemusg]

expand

[shiromatakumi]

こんなタグあったのか！edge…

[otchy210]

へぇぇ、こんなの加わってたのか。知らなかった。

[minamishinji]

こんなんあるんや。

[localnavi]

「IEとEdgeは非対応」スマホにはどちらのブラウザも存在しないので無問題だ！（※「CSSすら不要」とタイトルにはあり、実際動作するが、挙動や見た目を整えるのには容赦なく使っている）

[nekoline]

またIEか！と言う意見とあるが、スマホ向けと割り切れば使える。

[kote2kote2]

クロスブラウザがやはりネックだなー

[cankyan]

IE。。

[momijitan]

便利そう

[tsuki-rs]

IE11対応してないのか・・・結局JS使う必要あるよねぇ・・・IEまじゴミ。

[c-miya]

知らなかった。そのうち使おう。

[nimi0370376]

こんなのあったんだ

[n314]

IE以外は結構前から対応されてるのか