details,summary要素に対応し、投稿内で指定箇所を折りたためるようになりました

こんにちは。 yoichiroです。

今日はQiita,Qiita Teamにてdetails,summary要素に対応したことをご報告いたします。

details,summary要素とは？

HTML5.1の勧告案にて、ユーザが明示的に操作をすることで追加の詳細情報を閲覧することができるようになるdetails要素が追加されました。また同時に、その追加情報の要約を記載するために、summary要素も追加されています。これらの要素を使用すると、ウェブブラウザは要約の文章に加えて、開閉するためのUIを表示します。そしてユーザがそのUIを使って開いた際に、details要素が持つ内容が初めて表示される、という挙動となります。

今までQiita,Qiita Teamでは、Markdown Text内でdetailsおよびsummary要素を記述しても表示されませんでした。今回対応したことにより、Qiita,Qiita Teamの投稿内でdetailsおよびsummary要素を使って、効果的に追加情報を記載することが可能になりました。

使い方

追加情報としたい内容を、detailsタグで囲みます。そして、要約として表示したい文章をsummaryタグで記載します。

例えば、以下のようなMarkdownテキストを書いたとします。

### Qiitaとは

Qiita(キータ)は、プログラマのための技術情報共有サービスです。

<details><summary>どんどん共有しましょう</summary>プログラミングに
関することをどんどん投稿して、知識を記録、共有しましょう。Qiitaに投稿す
ると、自分のコードやノウハウを見やすい形で残すことができます。技術情報
はテキストファイルへのメモではなく、タグを付けた文章、シンタックスハイラ
イトされたコードで保存することで初めて再利用可能な知識になる、そうQiita
では考えています。</details>

これはQiita,Qiita Teamでは以下のように表示されます。

開閉UIを開くと、追加情報を表示することができます。

ぜひご活用ください。

IncrementsではQiitaを一緒に成長させていってくれる仲間を募集しています。興味があるという人は ⇛ http://increments.co.jp/jobs/engineers

制限事項

現状では、Chrome,Safari,Opera以外のウェブブラウザではdetails,summary要素が機能しないことがありますので、ご注意ください。

【追記 2016/10/05】 Firefoxについても、Version 49からdetails,summary要素が使えるようになりました。