Dawn 14.0.0 でアコーディオンの三角が表示されない

日本語 ディスカッション 技術的なQ＆A
,

Topic summary

Dawn 14.0.0テーマで<details>と<summary>を使ったアコーディオンを作成した際、ページエディタでは三角マーカーが表示されるが、プレビューでは消えてしまう問題が報告されました。

原因:
Dawn 14.0.0のbase.css（629行目付近）にあるsummary { list-style: none; }の設定により、三角マーカーが非表示になっていました。

解決方法:
以下のいずれかの方法で対応可能です：

  • <details>に専用のクラス（例：accordion_box）を設定し、base.cssにsummary.accordion_box { list-style: revert !important; }を追加
  • テンプレートで使用する場合は、summaryのlist-style: none;を削除（ただし他のsummary要素にも影響するため注意が必要）

質問者は解決策により三角マーカーの表示に成功しました。

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Dawn 14.0.0.0でdetailsとsummaryを使用したアコーディオンを作成しています。

ページエディタでは三角が表示されていますが、プレビューで見ると三角が消えてしまいます。

テスト環境はWindows 11とChromeです。

以下のようにCSSで表示する設定にしてもダメでした。

[HTML]

アコーディオン

[base.css]

.summary-1 {
display: list-item;
}

どのようにすれば三角を表示できるかわかりますでしょうか。

凝ったアコーディオンではなく、単純なデフォルト状態の三角が表示できればそれで十分です。

2

@mpex 様

Dawn 14.0.0のテーマですと、base.cssの629行目あたりにある下記コードの「list-style: none;」で三角を非表示にしています。

/* base-details-summary */
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

ただ、上記のsummaryのlist-style: none;を消してしまうと、テンプレートで使用している、

他のsummaryにも影響してしまいますので、下記の様にすると良いかと思われます。

detailsにclassを設定

base.cssに下記を追記

.accordion_box summary {
  list-style: revert !important;
}

ご参考まで。

（キュー小坂）

3

三角が表示できました！

ありがとうございます。