Edited at

Qiitaのdetails,summary要素とMarkdownの相性調査

More than 1 year has passed since last update.


追記

初版: 2016年10月21日

追記: 2018年10月17日

現在でも閲覧されることがあるようなので、古い記事ですが使い方について追記します。

下記本文では

<details>には空行を含めてはいけないためMarkdownが利用できない」

としていますが、現在ではMarkdwonが利用出来る方法があり、紹介もされ広まっています。

冗長に書き直すよりQiitaのチートシートの引用が明確なので、そちらを参照してください。

Markdown記法 チートシート#Details - 折りたたみ - Qiita


折りたたんだ部分で Markdown を使いたい場合は、折りたたまれる部分全体を <div> で囲ってください。(\` は実際は \ を含みません。また <div> とコードブロックの間には空白行が一つ以上必要です。)

<details><summary>サンプルコード</summary><div>

\```rb
puts 'Hello, World'
\```

</div></details>

サンプルコード

puts 'Hello, World'





新機能の使い方調査

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

で何を折りたためるか調査。



まとめ



  • <details>には空行を含めてはいけない


    • それに伴い空行必須なor変換結果で空行ができるMarkdownが利用出来ない

      (コードブロック、引用、リスト、チェックボックスそしてテーブル)



  • スライドモードではサマリーしか確認できない

    記事内のスライドはこの事の確認のためだけです

あくまで文章を記述しましょう。



紹介サンプルのスライド動作



どんどん共有しましょう

プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。


記述

<details open>

<summary>どんどん共有しましょう</summary>
プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
</details>

スライド内では開けませんし、閉じた状態で表示されます。

open属性によりデフォルトは変わるそうですが、Firefox 49では属性の影響はない模様。



コード形式



どんどん共有しましょう

プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。


記述

<details>

<summary>`どんどん共有しましょう`</summary>

```
プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
```

</details>

コードブロックを有効にすると、details扱いにならない。



コード形式2



どんどん共有しましょう



プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。


記述

<details>

<summary>`どんどん共有しましょう`</summary>
```
プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
```
</details>

コードブロックを引っ付ければ、details扱いになるが、コードブロックの要件を満たさなくなる。



コード形式3



どんどん共有しましょう


プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。


記述

<details>

<summary>`どんどん共有しましょう`</summary>
<pre>
プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
<pre>
</details>

マークダウンは改行必須なものの、直接タグを打てば大丈夫です。

ただ、ハイライトは難しいでしょう。



引用



どんどん共有しましょう


プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。



記述

<details>

<summary>どんどん共有しましょう</summary>
>プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
</details>

こちらは<blockquote>の前に空の<p>要素が生成されるせいか、含まれません。

<blockquote>で囲むだけなので、手打ちでも良いでしょう。



どんどん共有しましょう

プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。



<details>

<summary>`どんどん共有しましょう`</summary>
<blockquote>プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。</blockquote>
</details>



見出し



どんどん共有しましょう


プログラミングに関することをどんどん投稿して、


知識を記録、共有しましょう。


記述

<details>

<summary>どんどん共有しましょう</summary>
# プログラミングに関することをどんどん投稿して、
## 知識を記録、共有しましょう。
</details>

<details>の外に飛び出します。しかし使うシーンもないでしょう。



装飾



どんどん共有しましょう

プログラミングに関することをどんどん投稿して、

知識を記録、共有しましょう。

プログラミングに関することをどんどん投稿して、

知識を記録、共有しましょう。


記述

<details>

<summary>どんどん共有しましょう</summary>
*プログラミングに関することをどんどん投稿して、*
**知識を記録、共有しましょう。**
_プログラミングに関することをどんどん投稿して、_
~~知識を記録、共有しましょう。~~
</details>

問題なし。



リンク



どんどん共有しましょう

プログラミングに関することをどんどん投稿して、

computer_hub_loop_setsuzoku.png


記述

<details>

<summary>どんどん共有しましょう</summary>
[プログラミングに関することをどんどん投稿して、](http://qiita.com)
![computer_hub_loop_setsuzoku.png](https://qiita-image-store.s3.amazonaws.com/0/62354/aa3ad0ce-21c3-6168-95ad-d0a9d80f8a9e.png)
</details>

問題なし。



その他

リストやチェックボックス、テーブルも改行が必要なので不可です。