これは、詳細スタイリング変更実験のフィードバック トピックです。
BBCode を使用した details タグの例:
abc
テスト 123 123
123
HTML を使用した details タグの例:
「いいね！」 11
HTMLの<details>を使用すると、コンテンツがサマリーに流れ込んでしまうようです。
これは開いた詳細です
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.これはHTMLの詳細です
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.ああ、なるほど。自動改行されず、手動で追加もしていませんでした。
<details open>
<summary>
これは開いた詳細です
</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
</details>
概要
このテキストは非表示になります
「いいね！」 5
はい、その通りです。ご自身で追加された際にはpタグが含まれていませんでしたが、詳細挿入ツールを使用すると、それが追加されます。
ご自身で追加されたもの:
<details dir="ltr" open="">
<summary>
This is a HTML details
</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
</details>
挿入ツールによるもの:
<details dir="ltr" open="">
<summary>Summary</summary>
<p>This text will be hidden</p>
</details>
挿入ツールによって追加されたpタグは、テキストを新しい行に表示し続けます。
「いいね！」 1
既存のスタイルに<p>タグを追加する必要はありません。この新しいものはより<p>で「イケてる」と思います。 
「いいね！」 2
初期フィードバック:\n\n1. 新しい [details] 要素を初めて見たとき、見落としてしまいました。単に「新しいから」かもしれませんが、[details] として認識されませんでした。\n2. 以前のデザインやデフォルトのブラウザ実装から逸脱しています。シェブロンが前ではなく後ろにあり、閉じている状態が以前（およびデフォルト）で開いている状態を意味していた方向を指しています。\n closed: 
\n open: 
\n3. ボタン/サマリー要素がより多くのスペースを取るようになりました（以前は半インライン要素でした）。\n
）。\n \n5. モバイルでは、操作後にボタンの背景がハイライトされたままになります。\n \n6. 背景オプションよりも境界線に投票したでしょう。コンテンツを非表示にすることが、コントラストに影響を与えることなく、まさにそれを行うことを好みます（主に埋め込み画像や絵文字の場合に関連します）。\n \n\n更新:\n\n7. クリック可能領域が縮小されました。\n \n vs\n
「いいね！」 7
それが意図したところでもあります。より良くするためには、特にブラウザのデフォルトから逸脱するなど、以前の方法から変更を加える必要があります。現在、複数の返信がある投稿の下部にある「返信」ボタンのパターンに従っています。
よく観察されています！
これもよく指摘されています。確認します 
黒/濃い色の絵文字を黒/濃い背景に使用することが、ここで解決できる問題なのかどうか分かりません…
これも少し混乱します。以前はテキスト以外のどこかをクリックしていましたか？ここにクリックするのが一般的でしたか？
「いいね！」 3
はい。特にモバイルでは、これをかなり頻繁に使用していました。 
小さいエリアはタップしにくいです。画面上の親指の位置だと思います。
「いいね！」 5
はい！それはプラットフォームのデフォルトの期待の1つです。チェックボックス/ラジオボタンとその<label>のように、<details>は特定の見た目と動作をします。例えば、私もGHで同じことをしています。
1 Reply
それを他のものに似せることが実際に良いことなのかどうかは分かりません 
「いいね！」 1
こんにちは！質問が完全に正しくない場合はご容赦ください 
ユーザーグループに応じて非表示コンテンツを表示する機能を追加することは可能でしょうか？たとえば、ユーザーが登録されていないか、このグループまたはあのグループのメンバーでない場合、詳細を表示できず、アクセス権を取得するための指示（たとえば、登録）が表示されるモーダルウィンドウが表示されますか？
トピック全体またはカテゴリ全体を非表示にするテーマコンポーネント/プラグインの存在は知っています。単に、ユーザーにプライマリ情報のみを読む機会を与えたい場合があります。
「いいね！」 1
通常、カテゴリは特定のグループまたはユーザーに制限されており、そのカテゴリ内の投稿の詳細ではありません。そのため、そのように利用されていません。
とはいえ、プラグインで実現できると思いますが、このトピックではその議論には理想的ではありません。
「いいね！」 1
細かい点ですが、引用の背景色と少し違って見えます。これは「惜しいけれど完全ではない」という感じで、間違いのように見える可能性があります。一致させるか、明らかに違うようにすべきだと思います。
その他の意見…
これは手動の引用です
これは部分的な引用で、展開できます。
このスタイルを少し流用できるでしょうか？パディング、背景、展開は同じで…引用らしく見えないようにするには、少なくとも境界線をなくす必要があります。
まったく別のスタイルはどうでしょうか？
「いいね！」 7
こんにちは 
ちょっと独り言です… ヘッダーはデフォルトで表示する必要があるのでしょうか？ほとんどの場合、デフォルトの Summary を使用しており、おそらくほとんどのユーザーはそれがユニークであることを知らないでしょう。そして、details 内のテキストが省略記号で切り詰められ、折りたたまれている場合は ...もっと表示、展開されている場合は すべて表示 が表示される方がより自然になるのではないでしょうか。たとえば、最初に切り詰められたコンテンツが行がヘッダーに自動的になるでしょう。これはデフォルトのビューにできますが、ユーザーは必要に応じてヘッダーを別途追加できますか？
「いいね！」 4
公平を期すために言うと、実装はラベルをクリックするとラジオボタンが設定されるようになっており、ラベルの後ろにある空の行全体をクリックしても機能するとは限りません。
「いいね！」 2
- シェブロンがテキストと揃っていません（少し高すぎます）
vs
（それに、シェブロンアイコンも同じではありませんか？
） - コンポーザーメニューは、詳細機能を示すために三角形を使用しています
- 2に追加
アイコンをテキストの後に配置すると、特に投稿を素早くスキャンする際に、認識が難しくなります
- 2にも追加
アイコンが指している方向について：トグルとして機能する場合、アクション/将来の状態ではなく現在の状態を示すために反転させるのが理にかなっているのではないでしょうか（これは「返信」ボタンにも当てはまります） - tabでナビゲートしたときにフォーカス状態がありません
- ホバー状態は、閉じている場合にのみ表示されます
「いいね！」 5
もしかしたら… @awesomerobot さん、どう思いますか？
軽微なバグ – 詳細を開くと、さらに投稿を読み込むまで（そしてもう少し）上にスクロールします。戻ると、詳細コンテンツが表示されません（編集：または閉じられますが、ここでは閉じられるとは思いません）。
「いいね！」 3
ボタンのように扱うことは可能でしょう…既存のHTMLのdetailsタグに似たもの（プラスでシェブロンも）です。
展開
ここに切り取られたコンテンツがあります… ここに切り取られたコンテンツがあります… ここに切り取られたコンテンツがあります… ここに切り取られたコンテンツがあります… ここに切り取られたコンテンツがあります… ここに切り取られたコンテンツがあります… ここに切り取られたコンテンツがあります…また…
要約コンテンツとして段落を使用するとどうなりますか？これは任意の長さになり、改行が奇妙になる可能性があります。これは制限されるべきですか？非常に非常に長い要約テキストの使用例はありますか？次の行のシェブロン：
ここに詳細があります
「いいね！」 3