HTML5タグのdetails/summaryを使ってGitHubのREADME/コメントを整理

とあるGitHubのレポジトリのREADMEを見ていたら一部を折りたたんで表示するアコーディオン表示になっていたので GitHubの仕様かと思ってたんですが、 HTML 5.1で導入されたdetails/summary要素によるものでした。

これを使ってGitHubのREADMEなんかで長くなってしまって重要でない部分を一部折りたたんだり、 Issuesとかでも上手く使うことで見やすくすることが出来ます。

details/summary
隠し部分ではMarkdownも使える
まとめ

`details`/`summary`

使い方は

<details>
  <summary>
    見出し部分。ここをクリック。
  </summary>
  <div>

ここが隠れてる部分。

  </div>
</details>

みたいに書くと

見出し部分。ここをクリック。

ここが隠れてる部分。

こんな感じになります。きちんと動作してれば下のGif画像の様にクリックで開いたり閉じたりするはずです。

detailssummary

このページではdetailsやsummaryに関してJavaScriptは当ててないのでブラウザが自動的に設定している動作になります。

なのでブラウザ依存するところがあって、上のGifはMacのGoogle Chromeのものですが、この仕様はEdge及びIEではまだ実装されていません。

Can I use… Support tables for HTML5, CSS3, etc

Firefoxも49 (2016年9月20日)からなので使える様になってのは比較的最近です。

Edgeでまだ使えないため当たり前の様に使えるものではないですが、 GitHubのコメントの様な場所で簡単なタグだけで折りたたみが実装できてしまうのは非常に便利なので使えるところでは使いたいところです。

また、上の見出し部分ですが、ChromeやFirefoxだと折りたたまれた上で先頭に三角印が現れていると思います。

これ、最初このブログで使ってみた所なぜかFirefoxだと現れず Chromeだと現れる状態でした。

これはCSSを全く当ててなければブラウザの機能としてFirefoxでもこの三角印が付くようになっています。

ここで印が消えてるのはCSSファイルが

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

と言う行を含んで居るせいでした。ここでのsummaryに関するdisplay: blockがあるとFirefoxでは三角印が消えてしまうようです。

この行ですが、自分で追加したものではなく、 SASSをcompassでコンパイルしてCSSファイルを作っていて、その最初の所で、

@include global-reset;

としてブラウザのデフォルトスタイルを調整するためのMixinを呼んだ事で最初に追加される項目です。

このファイルは定石的に呼ぶ(と思う)ので SASSを使えば入っている様なものだと思います。

summary要素のデフォルトはdisplay: list-item;でこれにしておけばFirefoxも三角印が出るので、出したい場合はSASSに

summary {
  display: list-item;
}

をglobal-resetを呼んだ後に追加して上書きしてあげれば三角印を出せます。

これは最初Firefox側のバグかな、と思ったのですが、どうやらsummary要素の本来の動作としてはblockな時は三角が出ない方が正しいようで、むしろChrome側のバグ、とのこと。

summary 要素 - HTML MDN

1283989 - display:block on <summary> removes the triangle

HTML Standard

ちなみにSafariとかでもdisplayな状態で三角印が出るので、 Firefoxだけ(?)が最先端に正しく仕様を追っている状態みたいです。

そもそもなぜglobal-resetがsummaryのdisplayを変更しているか分かりませんが(何らかのブラウザが違う動作する？) 影響するものとしてもsummaryに関することだけなのでこのブログでは戻すようなCSSを追加してあります。加えて、デフォルトのままだと見出し部分にカーソルを持っていっても通常の文章と見分けがつかないので

summary {
  display: list-item;
  &:hover {
    cursor: pointer;
  }
}

な感じのSCSSを追加して見出し上にカーソルを持っていった場合にリンクと同じ様なポインタになる様にしてあります。 CSSで追加するなら

summary {
  display: list-item;
}
summary:hover {
  cursor: pointer;
}

な感じで。

もしちゃんと使うなら、用途にもよりますが開いた時の部分にインデントがある方が開かれた部分として分かりやすいので、 summaryの下に上の例の様にdiv要素とか置いて、そのdivにクラスを与えてそのクラスをmargin-left: 10pxとか適当に左空け状態にしてあげると見やすいかと。

あと、上にあるGifはChromeのもので、これだと見出し部分をクリックした時に要素の周りに先が現れます。 Safariでも同様に現れました。一方Firefoxだと出ません。これはdisplay要素がblockでもlist-itemでも同様でした。微妙な謎仕様。