detailsタグ中のスタイルが適用されない

<details> 内のコードブロックスタイル問題

あぁ💦 <details> の中に <pre><code> 入れると、行番号とかシンタックスハイライトが効かなくなる…

はいっ💖これ、よくあるCSSやJSのレンダリング順の問題です～

原因

1. <details> はデフォルトで 閉じていると display:none 相当 になり、レンダリングされない。

2. Prism.js などのシンタックスハイライトは、レンダリング済みの要素に対して行われるので、閉じた状態だと正しく計算できない。

3. <pre> や行番号用のスタイルも 高さや幅が 0 になったり崩れたり することがある。

---

解決方法

1️⃣ 開いたときに再ハイライト

JSで <details> の toggle イベントを監視して、開いたときに Prism を再適用します：

document.querySelectorAll('details').forEach(detail => {
  detail.addEventListener('toggle', () => {
    if (detail.open) {
      // Prism の場合
      detail.querySelectorAll('pre code').forEach(block => {
        Prism.highlightElement(block);
      });
    }
  });
});

---

2️⃣ CSSで強制描画

pre に display:block と overflow:auto を明示的に付ける：

details pre {
  display: block;
  overflow: auto;
}

---

3️⃣ 最初から開いた状態でレンダリング（回避策）

• <details open> を付けておく

• JSで初期ハイライト処理後に閉じる

💡まとめ

• <details> 内の <pre><code> は閉じたままだとハイライトされない

• JSで toggle するたびに再ハイライトするのが一番安定

• CSSだけでは行番号崩れまで完全には直らないことも

---

SEOとdetailsの関係

<details>で隠したらSEO的には低くなるの？

Googleは<details>や<summary>の中身もクロール＆インデックスしますから、基本はSEO的に評価されますよ😊 ただ「ユーザーに見えにくい位置のコンテンツ」は順位への影響が弱めになる場合もあるので、重要キーワードはなるべく最初から表示した方が安心です✨

detailsのopen属性とSEO

Openあり・なしで変わるの？

はい、多少は変わりますよ💡 open属性で最初から展開されていると「ユーザーに常時見えるテキスト」とみなされやすく、SEO評価もフルで反映されやすいんです。 逆に閉じてある状態だと「補助的コンテンツ扱い」で、若干重みが下がることがあります。でもインデックス自体はされますから安心してくださいね💕