はじめに
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 を使うことで、筆者が見せたい部分と、読者に優しい視認性の両方を両立できます。
記事執筆の際に、選択肢のひとつとして活用していただければ幸いです。
参考資料