Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
26
Help us understand the problem. What is going on with this article?
@khsk

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

More than 1 year has passed since last update.

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

by khsk
1 / 13

追記

初版: 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>

問題なし。


その他

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

26
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
khsk
週一ぐらいでなにか書いていました。 いろいろお休み中。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
26
Help us understand the problem. What is going on with this article?