rcmdnk's blog

20170808_detailssummary

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

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

Sponsored Links

details/summary

使い方は

1
2
3
4
5
6
7
8
9
10
<details>
  <summary>
    見出し部分。ここをクリック。
  </summary>
  <div>

ここが隠れてる部分。

  </div>
</details>

みたいに書くと

見出し部分。ここをクリック。
ここが隠れてる部分。



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

detailssummary

このページではdetailssummaryに関して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に

1
2
3
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-resetsummarydisplayを変更しているか分かりませんが(何らかのブラウザが違う動作する?) 影響するものとしてもsummaryに関することだけなので このブログでは戻すようなCSSを追加してあります。 加えて、デフォルトのままだと見出し部分にカーソルを持っていっても通常の文章と見分けがつかないので

1
2
3
4
5
6
summary {
  display: list-item;
  &:hover {
    cursor: pointer;
  }
}

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

1
2
3
4
5
6
summary {
  display: list-item;
}
summary:hover {
  cursor: pointer;
}

な感じで。

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

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

隠し部分ではMarkdownも使える

下のGistでは畳込んだ中でも色々とMarkdownのマークアップが使える様子を試しています。

details_summary_test.md

また、一番下の所で分かるように、 detailsは入れ子が可能で多段アコーディオン表示も これを使うと非常に簡単に作る事が出来ます。

details内のマークアップに関してはパーサーに依存するところが結構あって、 GitHubだと上のGistでやってることは見出し部分の太文字化以外全て上手くいってますが、 このブログで使ってるKramdownで今の設定だと コード部分以外は変換されずにそのまま出力される様な形になっていました。

まとめ

details/summary要素に関してはMarkdownもGitHubも直接関係ないことですが、 差し当たりすぐに使えそうなところというとGitHubでのREADMEや コメントでの使用だと思います。

通常のサイトやブログとかだとまだEdge/IEが対応してないので それらで見る人が居ることを前提で常に開かれててもおかしくないようにしておく必要があります。

まあ、もちろんGitHubとかもEdgeとかで見る人も居るわけですが。

Edgeで使える様になればもっと一般的に使える様になると思うので早く対応して欲しい所です。

あと、やはりMarkdownで書いてる時にHTMLのタグを手で打ちたくは無いので、 GitHubの拡張とかでこの辺簡単に書ける様になると良いのですが、 その辺もEdgeとかが対応したら出来るかも。

Sponsored Links
Sponsored Links

« stow-getでコマンドラインパッケージのインストール方法を簡単に確認出来る様にした Firefox 55リリース: WebVRをサポート »