Skip to main content

セクションを折りたたんで情報を整理する

<details> タグで折りたたまれたセクションを作成することで、Markdown を合理化できます。

折りたたみセクションの作成

閲覧者が希望により展開できる、折りたたみセクションを作成して、Markdown のセクションを一時的に隠すことができます。 たとえば、すべての閲覧者には関連しない、または興味がある可能性のない技術的な詳細を issue のコメントに含める場合、それらの詳細を折りたたみセクションに配置できます。

<details> ブロック内のすべての Markdown は、閲覧者が をクリックして詳細を展開するまで折りたたまれたままです。

<details> ブロックの中では、<summary> タグを使って、閲覧者に内部の内容を知らせます。 ラベルは の右側に表示されます。

<details>

<summary>Tips for collapsed sections</summary>

### You can add a header

You can add text within a collapsed section. 

You can add an image or a code block, too.

```ruby
   puts "Hello World"
```

</details>

<summary> ラベル内の Markdown は、既定で折りたたまれます。

GitHub でレンダリングされたこのページの上記の Markdown のスクリーンショット。右向きの矢印と "折りたたまれたセクションのヒント" というヘッダーが表示されています。

閲覧者が を選ぶと、詳細が展開されます。

GitHub でレンダリングされたこのページの上記の Markdown のスクリーンショット。折りたたんだセクションにヘッダー、テキストの文章、画像、コード ブロックを含めることができることを示しています。

必要に応じて、セクションを既定で開いているように表示するには、open 属性を <details> タグに追加します:

<details open>

参考資料