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

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


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



detailsタグのデフォルトの記載と表示


<details><summary>概略</summary>細目<br>細目<br>細目</details>

概略細目 細目 細目

最初から開いておく


<details open><summary>概略</summary>細目<br>細目<br>細目</details>

概略細目 細目 細目

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


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

気付くと些細な日常のContempo/Bloggerの2017年のテーマにも取り入れられていたんだ。サイドバーのアーカイブやラベルのリストなどがdetailsタグで記載されて開閉メニューになっている。動作が非常にスムーズなので、昨年からブログのテンプレートに新しく採用してから何なんだと驚いていたけど、ついに謎が解けたと笑う。


ブラウザが対応してないとdetailsタグを使っても駄目だけど、殆どのブラウザは大丈夫で、一部では未対応だから除外するしかない。


detailsタグのcssのデザイン


最も気がかりなのはスイッチの左端の三角のマーカーを消せるかどうかだ。新しいデザインを付けるとしたらデフォルトのデフォルトが邪魔になり兼ねないと真っ先に懸念されてしまう。現時点でブラウザ毎に対応が分かれる状況みたいなので、cssを記載するのは幾らか煩雑なんだ。


デフォルトのマーカーを消す


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 > summary

cssで特殊な書き方だから開閉状態でデザインを区別したいかぎりは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で簡単に作れる開閉メニューで画面の小さなスマホ/タブレットのモバイル向けにコンパクトなデザインに仕上げられるのが気に入る。

コメント

些細な日常の人気の投稿

MOTOROLAのMoto G5 Plusを使い出してのスマホレビュー

Imgurで画像URLと埋め込みコードを取得する方法

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策