0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Qiitaの折りたたみを「開いたまま」表示する:<details open>

Last updated at Posted at 2025-12-10

はじめに

Qiitaでは、コード全文や補足説明を <details> タグで折りたたむことができます。
ただ、折りたたむことで 内容が存在すること自体に気づかれない ことがあります。

「コードは長いけれど、初見では開いた状態にしておきたい」
という用途向けに、最初から展開して表示する方法を紹介します。

結論:open をつけるだけ

普通の折りたたみ(初期状態では閉じている)

比較のために、まず通常の折りたたみ例を示します。

<details><summary>普通の折りたたみ</summary>

```python
print("Hello Qiita!")
```

</details>

表示例

普通の折りたたみ
print("Hello Qiita!")

開いた状態で表示する(初期状態から展開)

本記事の目的である 最初から開いたまま表示する場合 を示します。

<details open><summary>最初から開いた状態で表示する</summary>

```python
print("Hello Qiita!")
```

</details>

表示例

最初から開いた状態で表示する
print("Hello Qiita!")

どんな場面で使うのか

折りたたみは便利ですが、必要な情報まで隠れてしまうという問題があります。
例えば、次のような場面です。

  • 初学者向けの記事だが、本文に載せると読みづらくなる情報を含む場合
     例:初期設定、環境、ライブラリ読み込み、データ定義など

  • 本文だけでは理解しづらいが、常に表示しておくほどではない場合
     例:長いコード全文、図表、ログ、比較結果など

また、初学者は折りたたみの存在そのものに気づかないこともあります。
このような場合、open を使うことで、必要な人には届き、不要な人には隠す選択肢を与えることができます。

おわりに

折りたたみは読み手の負担を減らせますが、見せたい内容が埋もれてしまうこともあります。
open を使うことで、筆者が見せたい部分と、読者に優しい視認性の両方を両立できます。
記事執筆の際に、選択肢のひとつとして活用していただければ幸いです。

参考資料

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?