2022年03月30日 更新

GitHubのREADMEなどマークダウンで折り畳み表示を行う

どうも、クラゲジュニアです。
GitHubのREADMEなどで、頻繁には読まない長い文章などがあるとき、折りたためる要素を追加することができます。

実際の例

▶ をクリックすると以下のように開きます

もう一度 ▶ をクリックすると再び折り畳まれます。

書き方

<details>
    <summary>詳細はこちらをクリック</summary>
    AI・IoT・ロボティクスを中心とした、オンラインで学べる技術教育サービスです。いつでもどこでもウェブブラウザで文章・画像・動画を見ながらコードを実行し自主的に学べます。「実用的なもの」「新しい体験ができるもの」を成果物とし、ステップバイステップで学べるコンテンツで、挑戦したくなる演習も多数用意しています。新しい時代の「ものづくり」であり、ハードウェアだけではなく、プログラミングやデータサイエンスも１つのツールとして活用します。
</details>

details タグで囲みます。▶の横の文字列はsummaryタグで囲みます。
ちなみに、中にインラインコードやリストなどのmarkdownを書いても問題ありませんでした。

補足

この記述はGitHubやMarkdown特有ではなく、HTMLのタグです。
HTML5で追加されたタグですが、Internet Explorerを除く主要なブラウザでは実装されています。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/details

以上です。