detailsタグでサイトに開閉メニューを作る

HTML5のサイトはdetailsタグで開閉メニュー／アコーディオンを簡単に作れると分かった。バージョン5.1から新たに加わった要素らしくて発表されないまま、かつてjQueryを使って難儀に臨むしかなかった気持ちが嘘みたいに晴れ上がっている。本当にHTMLのマークアップだけで済んでしまうからサイトの表示速度が遅くなる影響も最大限に抑えられる。

details要素は、ユーザが追加情報やコントロールを得ることができるディスクロージャーウィジェットを表す

details要素｜HTML Standard 日本語訳｜WHATWG

detailsタグのデフォルトの記載と表示<details><summary>概略</summary>細目<br>細目<br>細目</details>

概略

細目
細目
細目最初から開いておく<details open><summary>概略</summary>細目<br>細目<br>細目</details>

概略

細目
細目
細目detailsタグの中にsummaryタグで概略をスイッチとして入れておいて細目の閲覧を開閉メニューで切り替えられる。最初から開いておくのも可能で、detailsタグにopen属性を追加するんだ。動作はHTMLのマークアップだけだからブラウザの読み込みに優れていて非常にスムーズだし、サイトでの使い心地は最高だろう。 HTMLのdetailsタグが使われた些細な日常のアーカイブとラベルの開閉メニューの表示

HTMLのdetailsタグが使われた些細な日常のアーカイブとラベルの開閉メニューの表示

気付くと些細な日常のContempo／Bloggerの2017年のテーマにも取り入れられていたんだ。サイドバーのアーカイブやラベルのリストなどがdetailsタグで記載されて開閉メニューになっている。動作が非常にスムーズなので、昨年からブログのテンプレートに新しく採用してから何なんだと驚いていたけど、ついに謎が解けたと笑う。ブラウザが対応してないとdetailsタグを使っても駄目だけど、殆どのブラウザは大丈夫で、一部では未対応だから除外するしかない。detailsタグのCSSのデザイン最も気がかりなのはスイッチの左端の三角のマーカーを消せるかどうかだ。新しいデザインを付けるとしたらデフォルトのデフォルトが邪魔になり兼ねないと真っ先に懸念されてしまう。現時点でブラウザ毎に対応が分かれる状況みたいなので、CSSを記載するのは幾らか煩雑なんだ。デフォルトのマーカーを消すsummary {list-style:none;}またはsummary {list-style-type:none;}CSSのlist-styleかlist-style-typeが効かない古いブラウザは以下の二つを使う。FirefoxなどのGecko系ブラウザの場合summary {display:block;}ChromeやSafariなどのWebkit系ブラウザの場合summary::-webkit-details-marker {display:none;}両方とも使っておくと訪問者によってサイトのデザインが崩れて閲覧される可能性は低い。前者の場合にはsummaryタグに{display:list-item;}を追加するとリストのliタグと同じように扱ってデザインを付けられる（スタイル設定例）らしい。何もしなければ後者の場合と同じで、デフォルトのマーカーを消す以外はCSSでどう扱うかはブラウザ毎に変わらない。開閉状態でデザインを区別するdetailsタグは普通にCSSでデザインを付けると開いた状態／表示と閉じた状態／非表示の両方に作用するけど、さらに区別して記載する方法もある。開いた場合の指定先details[open] > summary閉じた場合の指定先details > summaryCSSで特殊な書き方だから開閉状態でデザインを区別したいかぎりはdetailsのために新しく覚えておく必要がある。CSSのどんな属性が使われるかBloggerの2017年の公式テーマのソースコードを参考に挙げてみる。

display:block／横並びの表示

transition:height .3s cubic-bezier(0.4,0.0,0.2,1)／動作を緩める

outline:none／スイッチの縁取りを消す

padding:0／内側の余白を消す

background-color:transparent／背景色なし

overflow:hidden／はみ出しの切り捨て

text-overflow:ellipsis／文末の省略記号

white-space:nowrap／改行なし

detailsタグに特徴的なのはデフォルトでsummaryタグの概略のスイッチを押した後に橙の細い縁取りが付くので、消したい場合にはoutlineのnoneを使えば良い。または枠線のborder属性と同じように太さと色とスタイルの三つの値（outline）でデザインを付けることもできる。もう一つは開閉する要素だから固有の動作を制御するのにtransitionが使える。属性値のheightは縦に動作するためだからdetailsタグには必須で、.3s（0.3秒）は動作の所要時間で、cubic-bezierは動作中の流れだ。cubic-bezier／三次ベジェ関数で入力するのは任意だけど、記載しなくても構わない。初期値はease（最初と最後を滑らかにする）で、さもなければスタイル（transition-timing-function）から選べるようにもなっている。他ではちゃんと表示するのに不要な属性も入っているようだけれども調べてみるとtext-overflowのellipsisを使う際にoverflowのhiddenとwhite-spaceのnowrapが必要（text-overflow）らしい。二つとさらにdisplay:block（inline以外の値）と指定先か、または指定先を収めた親ボックスのdivタグなどに幅指定（width属性など）を含めた四つの条件が揃わないと文末の省略記号として三点リーダー（…）が出るようにはならないせいだった。些細な日常ではブログのカスタマイズで各ページの下段のランキング／検索エンジンのリンク集に使った。detailsタグはシンプルにコンテンツを纏めるのに役立つし、HTMLで簡単に作れる開閉メニューで画面の小さなスマホ／タブレットのモバイル向けにコンパクトなデザインに仕上げられるのが気に入る。