MENU
  1. ホーム
  2. HTML
  3. HTMLのdetailsタグ！三角アイコンの消し方・変え方とアコーディオン

HTMLのdetailsタグ！三角アイコンの消し方・変え方とアコーディオン

HTML
FAQアコーディオンと、製品名、価格、説明、カートに追加ボタンなどが配置された製品詳細ページのUIデザインテンプレート
いつまで無駄なデザインに時間を費やしますか？ 自作コード × SWELL で
理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

HTMLの<details>と<summary>タグを使用すれば、JavaScriptを一切書かずに開閉式のアコーディオン（折りたたみメニュー）を実装できます。

本記事では、基本の構造、CSSを用いたアイコンのカスタマイズ、滑らかなアニメーション実装、実務で役立つFAQや詳細ページのテンプレートを解説します。

折り畳み式のアコーディオンメニューのデザインコードが欲しい人は「【html&css】コピペだけ！開閉式のアコーディオンメニューデザイン8選」を一読ください。

【CSS】コピペだけ！開閉式のアコーディオンメニューデザイン8選
目次
もう無駄なレイアウトに凝るのやめたら？ 最速の土台 × 独自CSS で
SWELLをゴリゴリにカスタマイズ

レスポンシブ対応や基本レイアウトは最高峰テーマに任せませんか？浮いた時間で、流麗なアニメーションや標準設定を上書きする「あなただけの高度なビジュアル表現」をとことん突き詰めましょう。

「SWELL」であなたのデザインの限界を超える
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

details・summaryタグとは：基本の書き方

Webサイトの「よくある質問（FAQ）」や「長文の補足説明」など、クリックすると中身が開くUI（アコーディオン）は、JavaScriptを使って複雑なコードを書くのが当たり前でした。

しかし、HTML5から登場した「detailsタグ」を使えば、HTMLタグを記述するだけで簡単に折りたたみ式のアコーディオンメニューを作れます。

ここでは、実務でも使用されるdetailsタグの使い方、detailsタグとsummaryタグの構造、見落としがちな必須属性を解説します。

details・summaryタグとは：基本の書き方
  • アコーディオン（折りたたみ）の仕組み
  • 最初から開いた状態にする

アコーディオン（折りたたみ）の仕組み

<details>タグは、それ単体ではなく、中に<summary>タグを入れて使用します。

アコーディオンを作る際は、「外枠の<details>」「見出し（クリックできる部分）の<summary>」「中身のコンテンツ（pタグ等）」の3つをセットで記述します。

📂 detailsとsummaryの基本構造

⭕️ HTMLだけで開閉できるアコーディオン

Q. HTMLだけでアコーディオンは作れますか？

A. はい！detailsタグとsummaryタグを使えば、JavaScriptを書かずに簡単に実装できます。

<!– 💡 外枠を details で囲む –>
<details>

  <!– 💡 クリックして常に表示させておく「見出し」 –>
  <summary>Q. HTMLだけでアコーディオンは作れますか？</summary>

  <!– 💡 開いた時に表示される「中身」 –>
  <p>A. はい！detailsタグとsummaryタグを使えば…</p>

</details>
HTMLコード表示
<div class="hdet-sec1-wrapper">
  <div class="hdet-sec1-demo-area">
    <div class="hdet-sec1-box">
      <div class="hdet-sec1-label">📂 detailsとsummaryの基本構造</div>
      
      <div class="hdet-sec1-visual">
        <p style="font-size:12px; color:#198754; font-weight:bold; margin:0 0 5px 0;">⭕️ HTMLだけで開閉できるアコーディオン</p>
        
        <div class="hdet-sec1-mock-form">
          <details class="hdet-sec1-details">
            <summary class="hdet-sec1-summary">Q. HTMLだけでアコーディオンは作れますか？</summary>
            <div class="hdet-sec1-content">
              <p style="margin:0; font-size:13px;">A. はい！detailsタグとsummaryタグを使えば、JavaScriptを書かずに簡単に実装できます。</p>
            </div>
          </details>
        </div>
      </div>

      <div class="hdet-sec1-code">
        <!-- 💡 外枠を details で囲む --><br>
        <span class="hdet-sec1-hl-blue"><details></span><br>
        <br>
          <!-- 💡 クリックして常に表示させておく「見出し」 --><br>
          <span class="hdet-sec1-hl-green"><summary></span>Q. HTMLだけでアコーディオンは作れますか？<span class="hdet-sec1-hl-green"></summary></span><br>
        <br>
          <!-- 💡 開いた時に表示される「中身」 --><br>
          <p>A. はい！detailsタグとsummaryタグを使えば...</p><br>
        <br>
        <span class="hdet-sec1-hl-blue"></details></span>
      </div>
    </div>
  </div>
</div>
CSSコード表示
.hdet-sec1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hdet-sec1-demo-area {
  display: flex;
  justify-content: center;
}

.hdet-sec1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}

.hdet-sec1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hdet-sec1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.hdet-sec1-mock-form {
  background-color: #fff;
  border-radius: 4px;
}

/* 見た目を整えるCSS */
.hdet-sec1-details {
  border: 1px solid #ced4da;
  border-radius: 4px;
  overflow: hidden;
}

.hdet-sec1-summary {
  padding: 15px;
  background-color: #e9ecef;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  list-style: none; /* Safari特有の三角を消す準備 */
}

.hdet-sec1-summary::-webkit-details-marker {
  display: none; /* Safariのデフォルト三角を消す */
}

.hdet-sec1-content {
  padding: 15px;
  background-color: #fff;
  border-top: 1px solid #ced4da;
}

.hdet-sec1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}

.hdet-sec1-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hdet-sec1-hl-blue {
  color: #61afef;
  font-weight: bold;
}

最初から開いた状態にする

<details>タグは、デフォルトでは「閉じた状態」で画面に表示されます。

しかし、重要な注意事項やFAQの中でも読ませたい項目など、ページを開いた瞬間から「中身が見えている状態」にしておきたい要望はよくあります。

最初から開いた状態にするには、CSSをいじるのではなく、<details>タグに対してopen属性を付与するのがHTML5の実装方法です。

📖 open属性で最初から開いた状態にする

⭕️ ページを開いた瞬間から中身が見えています

通常の項目（閉じています）

中身のテキストです。

⚠️ 重要な注意事項（最初から開いています）

ここは重要な部分なので、open属性をつけて最初から読ませるようにします。

<!– ❌ 危険：CSSで無理やり開くと閉じられなくなる –>
<style> details p { display: block !important; } </style>

<!– ⭕️ 完璧：detailsタグに open 属性をつけるだけ –>
<details open>
  <summary>⚠️ 重要な注意事項</summary>
  <p>ここは重要な部分なので…</p>
</details>
HTMLコード表示
<div class="hdet-sec2-wrapper">
  <div class="hdet-sec2-demo-area">
    <div class="hdet-sec2-box">
      <div class="hdet-sec2-label">📖 open属性で最初から開いた状態にする</div>
      
      <div class="hdet-sec2-visual">
        <p style="font-size:12px; color:#198754; font-weight:bold; margin:0 0 5px 0;">⭕️ ページを開いた瞬間から中身が見えています</p>
        
        <div class="hdet-sec2-mock-form" style="display:flex; flex-direction:column; gap:10px;">
          
          <details class="hdet-sec2-details">
            <summary class="hdet-sec2-summary">通常の項目（閉じています）</summary>
            <div class="hdet-sec2-content"><p style="margin:0; font-size:12px;">中身のテキストです。</p></div>
          </details>

          <details class="hdet-sec2-details" open>
            <summary class="hdet-sec2-summary" style="background-color:#ffeeba;">⚠️ 重要な注意事項（最初から開いています）</summary>
            <div class="hdet-sec2-content" style="background-color:#fff3cd;">
              <p style="margin:0; font-size:12px; color:#856404;">ここは重要な部分なので、open属性をつけて最初から読ませるようにします。</p>
            </div>
          </details>

        </div>
      </div>

      <div class="hdet-sec2-code">
        <!-- ❌ 危険：CSSで無理やり開くと閉じられなくなる --><br>
        <style> <span class="hdet-sec2-hl-red">details p { display: block !important; }</span> </style><br><br>

        <!-- ⭕️ 完璧：detailsタグに open 属性をつけるだけ --><br>
        <details <span class="hopt-sec2-hl-green" style="font-weight:bold; color:#98c379; font-size:15px; border-bottom:2px solid #98c379;">open</span>><br>
          <summary>⚠️ 重要な注意事項</summary><br>
          <p>ここは重要な部分なので...</p><br>
        </details>
      </div>
    </div>
  </div>
</div>
CSSコード表示
.hdet-sec2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hdet-sec2-demo-area {
  display: flex;
  justify-content: center;
}

.hdet-sec2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}

.hdet-sec2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hdet-sec2-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.hdet-sec2-mock-form {
  background-color: transparent;
  border-radius: 4px;
}

.hdet-sec2-details {
  border: 1px solid #ced4da;
  border-radius: 4px;
  overflow: hidden;
  background-color: #fff;
}

.hdet-sec2-summary {
  padding: 12px 15px;
  background-color: #e9ecef;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
}

.hdet-sec2-content {
  padding: 15px;
  border-top: 1px solid #ced4da;
}

.hdet-sec2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}

.hdet-sec2-hl-red {
  color: #e06c75;
  font-weight: bold;
}

CSSでdetailsをおしゃれにカスタマイズ

HTML標準の折りたたみ機能は便利ですが、デフォルトの見た目のままでは味気なく、商用サイトや洗練されたブログには馴染みません。

そこで必須となるのが、CSSを用いた本格的な装飾です。

アコーディオンの顔となる見出し部分を自サイトに合わせて作り込むことで、ユーザーのクリック率は向上します。

ここでは、実務のWebデザインで直面する「デフォルトの矢印アイコンの制御」について解説します。

CSSでdetailsをおしゃれにカスタマイズ
  • デフォルトの矢印（三角）を消す方法
  • 独自のアイコンに変更するテクニック

デフォルトの矢印（三角）を消す方法

ブラウザが勝手に表示してしまうデフォルトの黒い三角形を消す方法です。

矢印を消すには、最新の::marker疑似要素を非表示にする設定、Safari特有の::-webkit-details-markerを非表示にする設定の2つをセットで記述しなければなりません。

🚫 デフォルトの矢印（三角）を消す

⭕️ すべてのブラウザで三角が消えた状態

クリックしても三角は出ません

デフォルトのアイコンが完全に消去されています。

/* 💡 1. 標準的なブラウザ（Chrome/Firefox/Edge等）向け */
summary {
  list-style: none;
}
summary::marker {
  display: none;
}

/* 💡 2. ★超重要：Safari（iPhone/Mac）向けのおまじない */
summary::-webkit-details-marker {
  display: none;
}
HTMLコード表示
<div class="hdet-css1-wrapper">
  <div class="hdet-css1-demo-area">
    <div class="hdet-css1-box">
      <div class="hdet-css1-label">🚫 デフォルトの矢印（三角）を消す</div>
      
      <div class="hdet-css1-visual">
        <p style="font-size:12px; color:#198754; font-weight:bold; margin:0 0 5px 0;">⭕️ すべてのブラウザで三角が消えた状態</p>
        
        <details class="hdet-css1-details">
          <summary class="hdet-css1-summary">クリックしても三角は出ません</summary>
          <div class="hdet-css1-content">
            <p style="margin:0; font-size:12px;">デフォルトのアイコンが完全に消去されています。</p>
          </div>
        </details>
      </div>

      <div class="hdet-css1-code">
        /* 💡 1. 標準的なブラウザ（Chrome/Firefox/Edge等）向け */<br>
        <span class="hdet-css1-hl-blue">summary</span> {<br>
          <span class="hdet-css1-hl-green">list-style: none;</span><br>
        }<br>
        <span class="hdet-css1-hl-blue">summary::marker</span> {<br>
          <span class="hdet-css1-hl-green">display: none;</span><br>
        }<br><br>

        /* 💡 2. ★超重要：Safari（iPhone/Mac）向けのおまじない */<br>
        <span class="hdet-css1-hl-blue">summary::-webkit-details-marker</span> {<br>
          <span class="hdet-css1-hl-red">display: none;</span><br>
        }
      </div>
    </div>
  </div>
</div>
CSSコード表示
.hdet-css1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hdet-css1-demo-area {
  display: flex;
  justify-content: center;
}

.hdet-css1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}

.hdet-css1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hdet-css1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* 三角を消すCSS本体 */
.hdet-css1-details {
  border: 1px solid #ced4da;
  border-radius: 4px;
  background: #fff;
}

.hdet-css1-summary {
  padding: 15px;
  background: #e9ecef;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  /* 1. 標準向け */
  list-style: none;
}

/* 2. マーカー消去 */
.hdet-css1-summary::marker {
  display: none;
}

/* 3. Safari向け */
.hdet-css1-summary::-webkit-details-marker {
  display: none;
}

.hdet-css1-content {
  padding: 15px;
  border-top: 1px solid #ced4da;
}

.hdet-css1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}

.hdet-css1-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hdet-css1-hl-blue {
  color: #61afef;
  font-weight: bold;
}

.hdet-css1-hl-red {
  color: #e06c75;
  font-weight: bold;
}

独自のアイコンに変更するテクニック

デフォルトの三角を消した後は、自分好みのアイコンに変更します。

よくあるのが、閉じている時は「＋」、開いている時は「−」になるようなデザインです。

独自のアイコンはHTMLには書かず、CSSの擬似要素（::beforeや::after）を使って表示させます。

そして、開いた時のアイコンの切り替えにはdetails[open]という「開いている状態のdetails」だけをCSSに適用させます。

これにより、JavaScript不要でアイコンがパッと切り替わる実装になります。

➕ 独自のアイコン（＋/−）に変更する

⭕️ 開閉に合わせて右側のアイコンが変化します

アイコンが自動で切り替わります

details[open]セレクタを活用することで、JSを使わずにCSSだけで「−」に切り替わっています。

/* 💡 1. 閉じている時のアイコン（＋）を設定 */
summary::after {
  content: “＋”;
  position: absolute;
  right: 15px;
}

/* 💡 2. 開いている時（[open]）のアイコン（−）を設定 */
details[open] summary::after {
  content: “−”;
  color: #0d6efd;
}
HTMLコード表示
<div class="hdet-css2-wrapper">
  <div class="hdet-css2-demo-area">
    <div class="hdet-css2-box">
      <div class="hdet-css2-label">➕ 独自のアイコン（＋/−）に変更する</div>
      
      <div class="hdet-css2-visual">
        <p style="font-size:12px; color:#198754; font-weight:bold; margin:0 0 5px 0;">⭕️ 開閉に合わせて右側のアイコンが変化します</p>
        
        <details class="hdet-css2-details">
          <summary class="hdet-css2-summary">アイコンが自動で切り替わります</summary>
          <div class="hdet-css2-content">
            <p style="margin:0; font-size:12px;">details[open]セレクタを活用することで、JSを使わずにCSSだけで「−」に切り替わっています。</p>
          </div>
        </details>
      </div>

      <div class="hdet-css2-code">
        /* 💡 1. 閉じている時のアイコン（＋）を設定 */<br>
        <span class="hdet-css2-hl-blue">summary::after</span> {<br>
          content: <span class="hdet-css2-hl-green">"＋"</span>;<br>
          position: absolute;<br>
          right: 15px;<br>
        }<br><br>

        /* 💡 2. 開いている時（[open]）のアイコン（−）を設定 */<br>
        <span class="hdet-css2-hl-blue">details<span class="hdet-css2-hl-red">[open]</span> summary::after</span> {<br>
          content: <span class="hdet-css2-hl-green">"−"</span>;<br>
          color: #0d6efd;<br>
        }
      </div>
    </div>
  </div>
</div>
CSSコード表示
.hdet-css2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hdet-css2-demo-area {
  display: flex;
  justify-content: center;
}

.hdet-css2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}

.hdet-css2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hdet-css2-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* カスタムアイコンのCSS */
.hdet-css2-details {
  border: 1px solid #ced4da;
  border-radius: 4px;
  background: #fff;
}

.hdet-css2-summary {
  padding: 15px 40px 15px 15px; /* 右側にアイコン用の余白を確保 */
  background: #e9ecef;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  position: relative; /* アイコンの絶対配置の基準 */
  list-style: none;
}

.hdet-css2-summary::marker, 
.hdet-css2-summary::-webkit-details-marker {
  display: none;
}

/* 閉まっている時のアイコン */
.hdet-css2-summary::after {
  content: "＋";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: bold;
  color: #6c757d;
  transition: all 0.3s ease; /* ふわっと変わるアニメーション（おまけ） */
}

/* 開いている時のアイコン */
.hdet-css2-details[open] .hdet-css2-summary::after {
  content: "−";
  color: #0d6efd;
}

.hdet-css2-content {
  padding: 15px;
  border-top: 1px solid #ced4da;
}

.hdet-css2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}

.hdet-css2-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hdet-css2-hl-blue {
  color: #61afef;
  font-weight: bold;
}

.hdet-css2-hl-red {
  color: #e06c75;
  font-weight: bold;
}

::before・::afterの疑似クラスの使い方を詳しく知りたい人は「【CSS】::before・::after擬似要素の使い方：画像・アイコン・ホバーエフェクト」を一読ください。

【CSS】::before・::after擬似要素の使い方：画像・アイコン・ホバーエフェクト

開閉時にフワッと動かす！アニメーションの付け方

<details>タグは便利ですが、クリックした瞬間にパカッと一瞬で開閉するため、「もっとフワッと滑らかに動かしたい」という要望が実務であります。

しかし、標準の動きに対してアニメーションをつけるのは、HTMLとCSSの仕様上、厄介な課題として知られています。

ここでは、transitionを駆使して、ユーザーに心地よい操作感を与えるアニメーション実装手法と「高さ」の問題を解説します。

開閉時にフワッと動かす！アニメーションの付け方
  • transitionを使った滑らかな開閉の実装
  • 高さを自動取得するテクニック（Gridレイアウト活用）

transitionを使った滑らかな開閉の実装

基本となるのは、開いた瞬間に中身のテキストが「フワッ」と浮き出るように表示されるフェードイン効果、クリックする見出し（<summary>）のアイコンが回転するアニメーションです。

そのため、「透明度（opacity）」と「アイコンの回転（transform）」のアニメーションから取り入れましょう。

これらはCSSのtransitionが機能するため、バグを生むことなくリッチなUIを実現できます。

✨ 透明度とアイコンのアニメーション

⭕️ クリックすると矢印が回り、中身がフワッと出ます

アニメーション付きのアコーディオン

透明度（opacity）を変化させることで、パカッと開く違和感を軽減しています。

/* 💡 1. アイコン（矢印）の回転アニメーション */
.summary::after {
  transition: transform 0.3s ease; /* ★変化を滑らかに */
}
details[open] .summary::after {
  transform: translateY(-50%) rotate(180deg); /* ★180度回す */
}

/* 💡 2. 中身のフェードイン（透明度）アニメーション */
details[open] .content {
  animation: fadeIn 0.4s ease forwards; /* ★開いた時に発火 */
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px); /* 少し上から下へ */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
HTMLコード表示
<div class="hdet-anim1-wrapper">
  <div class="hdet-anim1-demo-area">
    <div class="hdet-anim1-box">
      <div class="hdet-anim1-label">✨ 透明度とアイコンのアニメーション</div>
      
      <div class="hdet-anim1-visual">
        <p style="font-size:12px; color:#198754; font-weight:bold; margin:0 0 5px 0;">⭕️ クリックすると矢印が回り、中身がフワッと出ます</p>
        
        <details class="hdet-anim1-details">
          <summary class="hdet-anim1-summary">アニメーション付きのアコーディオン</summary>
          <div class="hdet-anim1-content">
            <p style="margin:0; font-size:12px;">透明度（opacity）を変化させることで、パカッと開く違和感を軽減しています。</p>
          </div>
        </details>
      </div>

      <div class="hdet-anim1-code">
        /* 💡 1. アイコン（矢印）の回転アニメーション */<br>
        <span class="hdet-anim1-hl-blue">.summary::after</span> {<br>
          <span class="hdet-anim1-hl-green">transition: transform 0.3s ease;</span> /* ★変化を滑らかに */<br>
        }<br>
        <span class="hdet-anim1-hl-blue">details[open] .summary::after</span> {<br>
          <span class="hdet-anim1-hl-green">transform: translateY(-50%) rotate(180deg);</span> /* ★180度回す */<br>
        }<br><br>

        /* 💡 2. 中身のフェードイン（透明度）アニメーション */<br>
        <span class="hdet-anim1-hl-blue">details[open] .content</span> {<br>
          <span class="hdet-anim1-hl-green">animation: fadeIn 0.4s ease forwards;</span> /* ★開いた時に発火 */<br>
        }<br>
        <span class="hdet-anim1-hl-blue">@keyframes fadeIn</span> {<br>
          0% {<br>
            <span class="hdet-anim1-hl-red">opacity: 0;</span><br>
            <span class="hdet-anim1-hl-red">transform: translateY(-10px);</span> /* 少し上から下へ */<br>
          }<br>
          100% {<br>
            <span class="hdet-anim1-hl-green">opacity: 1;</span><br>
            <span class="hdet-anim1-hl-green">transform: translateY(0);</span><br>
          }<br>
        }
      </div>
    </div>
  </div>
</div>
CSSコード表示
.hdet-anim1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hdet-anim1-demo-area {
  display: flex;
  justify-content: center;
}

.hdet-anim1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}

.hdet-anim1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hdet-anim1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.hdet-anim1-details {
  border: 1px solid #ced4da;
  border-radius: 4px;
  background-color: #fff;
}

.hdet-anim1-summary {
  padding: 15px 40px 15px 15px;
  background-color: #e9ecef;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  position: relative;
  list-style: none;
}

.hdet-anim1-summary::marker {
  display: none;
}

.hdet-anim1-summary::-webkit-details-marker {
  display: none;
}

/* 矢印アイコンの設定とアニメーション */
.hdet-anim1-summary::after {
  content: "▼";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #6c757d;
  transition: transform 0.3s ease; /* アニメーションの要 */
}

/* 開いた時に180度回転 */
.hdet-anim1-details[open] .hdet-anim1-summary::after {
  transform: translateY(-50%) rotate(180deg);
  color: #0d6efd;
}

.hdet-anim1-content {
  padding: 15px;
  border-top: 1px solid #ced4da;
}

/* フェードインアニメーション */
.hdet-anim1-details[open] .hdet-anim1-content {
  animation: hdet-fade-in 0.4s ease forwards;
}

@keyframes hdet-fade-in {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hdet-anim1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}

.hdet-anim1-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hdet-anim1-hl-blue {
  color: #61afef;
  font-weight: bold;
}

.hdet-anim1-hl-red {
  color: #e06c75;
  font-weight: bold;
}

動きを制御するtransitionの使い方を詳しく知りたい人は「【CSS】transitionの使い方：animationやtransformとの違い」を一読ください。

【CSS】transitionの書き方！transformとの違いやコピペ用コード集

高さを自動取得する（Gridレイアウト活用）

透明度のアニメーションができたら、次は「高さ（ビヨーンと伸びる動き）」のアニメーションです。

height: autoはアニメーションできないため、「max-height: 1000pxなどの巨大な数値を設定してごまかす」という力技が使われてきました。

しかし、現代のCSSではGridレイアウト（grid-template-rows） を活用することで、中身のコンテンツ量に合わせて高さを計算しながらアニメーションさせることができます。

HTML+CSSのみで<details>を実装する場合、「開く時は滑らかに伸びるが、閉じる時は一瞬」になるのが現在のブラウザの限界だと割り切る必要があります。

（※閉じる時も滑らかにしたい場合は、JavaScriptを組み合わせてopen属性の削除タイミングを遅らせる処理が必須になります。）

📐 Gridレイアウトを使った高さの自動アニメーション

⭕️ 開く時、文字量に合わせてヌルッと高さが伸びます

Gridを使った高さアニメーション

中身が少ない場合でも、多い場合でも、自動的に高さを計算して「0fr」から「1fr」へとアニメーションします。

※ただしCSSの仕様上、閉じる時は一瞬で消えます。

/* 💡 1. アニメーションさせるための枠（ラッパー）を作る */
.grid-wrapper {
  display: grid;
  grid-template-rows: 0fr; /* ★最初は高さゼロ */
  transition: grid-template-rows 0.4s ease;
}

/* 💡 2. 開いた時に 1fr（必要な高さ）に伸ばす */
details[open] .grid-wrapper {
  grid-template-rows: 1fr; /* ★自動計算して伸びる */
}

/* 💡 3. ★重要：中身がはみ出さないように隠す設定 */
.grid-inner {
  overflow: hidden;
}
HTMLコード表示
<div class="hdet-anim2-wrapper">
  <div class="hdet-anim2-demo-area">
    <div class="hdet-anim2-box">
      <div class="hdet-anim2-label">📐 Gridレイアウトを使った高さの自動アニメーション</div>
      
      <div class="hdet-anim2-visual">
        <p style="font-size:12px; color:#0d6efd; font-weight:bold; margin:0 0 5px 0;">⭕️ 開く時、文字量に合わせてヌルッと高さが伸びます</p>
        
        <details class="hdet-anim2-details">
          <summary class="hdet-anim2-summary">Gridを使った高さアニメーション</summary>
          <div class="hdet-anim2-grid-wrapper">
            <div class="hdet-anim2-grid-inner">
              <p style="margin:0; font-size:12px;">中身が少ない場合でも、多い場合でも、自動的に高さを計算して「0fr」から「1fr」へとアニメーションします。</p>
              <p style="margin-top:10px; font-size:12px; color:#dc3545; font-weight:bold;">※ただしCSSの仕様上、閉じる時は一瞬で消えます。</p>
            </div>
          </div>
        </details>
      </div>

      <div class="hdet-anim2-code">
        /* 💡 1. アニメーションさせるための枠（ラッパー）を作る */<br>
        <span class="hdet-anim2-hl-blue">.grid-wrapper</span> {<br>
          <span class="hdet-anim2-hl-green">display: grid;</span><br>
          <span class="hdet-anim2-hl-red">grid-template-rows: 0fr;</span> /* ★最初は高さゼロ */<br>
          <span class="hdet-anim2-hl-green">transition: grid-template-rows 0.4s ease;</span><br>
        }<br><br>

        /* 💡 2. 開いた時に 1fr（必要な高さ）に伸ばす */<br>
        <span class="hdet-anim2-hl-blue">details[open] .grid-wrapper</span> {<br>
          <span class="hdet-anim2-hl-green">grid-template-rows: 1fr;</span> /* ★自動計算して伸びる */<br>
        }<br><br>

        /* 💡 3. ★重要：中身がはみ出さないように隠す設定 */<br>
        <span class="hdet-anim2-hl-blue">.grid-inner</span> {<br>
          <span class="hdet-anim2-hl-green">overflow: hidden;</span><br>
        }
      </div>
    </div>
  </div>
</div>
CSSコード表示
.hdet-anim2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hdet-anim2-demo-area {
  display: flex;
  justify-content: center;
}

.hdet-anim2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}

.hdet-anim2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hdet-anim2-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.hdet-anim2-details {
  border: 1px solid #ced4da;
  border-radius: 4px;
  background-color: #fff;
}

.hdet-anim2-summary {
  padding: 15px;
  background-color: #e9ecef;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}

.hdet-anim2-summary::marker {
  display: none;
}

.hdet-anim2-summary::-webkit-details-marker {
  display: none;
}

/* Gridレイアウトによる高さアニメーション */
.hdet-anim2-grid-wrapper {
  display: grid;
  grid-template-rows: 0fr; /* 初期状態は高さ0 */
  transition: grid-template-rows 0.4s ease; /* 滑らかに変化 */
}

/* 開いた時に高さを自動計算して展開 */
.hdet-anim2-details[open] .hdet-anim2-grid-wrapper {
  grid-template-rows: 1fr;
}

/* 中身のラッパー（overflow:hiddenが必須） */
.hdet-anim2-grid-inner {
  overflow: hidden;
  padding: 0 15px; /* 上下のpaddingはアニメーションを壊すため左右のみ */
}

/* 見た目のための内側の余白 */
.hdet-anim2-grid-inner > p:first-child {
  margin-top: 15px !important;
}
.hdet-anim2-grid-inner > p:last-child {
  margin-bottom: 15px !important;
}

.hdet-anim2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hdet-anim2-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hdet-anim2-hl-blue {
  color: #61afef;
  font-weight: bold;
}

.hdet-anim2-hl-red {
  color: #e06c75;
  font-weight: bold;
}

レイアウトにおけるGridの使い方を詳しく知りたい人は「【CSS】Gridの使い方：Flexboxとの違いやレスポンシブ」を一読ください。

【CSS】Gridの使い方：Flexboxとの違いやレスポンシブ

FAQやテーブルでのdetailsタグ活用法

実際のWebサイト制作である「よくある質問（FAQ）」や「料金表（テーブル）」など、複雑なレイアウトの中での実践的な組み込み方もあります。

ここでは、「排他的なアコーディオン（1つ開くと他が閉じる）」のHTML実装法、レイアウト崩れを起こす「テーブル（table）への組み込み」のルールを解説します。

FAQやテーブルでのdetailsタグ活用法
  • 1つだけ開くアコーディオンの実装
  • テーブルの行やリストにおける入れ子構造

1つだけ開くアコーディオンの実装

FAQページなどで、「ある質問を開いたら、前に開いていた別の質問は自動的に閉じてほしい」という要望は定番です。

これを実装することで、画面が縦に伸びすぎるのを防ぎ、ユーザーが迷子になりにくくなります。

HTMLの標準機能としてname属性を活用してください。

複数の<details>タグに対して、ラジオボタンのように同じnameの値を設定するだけで、ブラウザが自動的にグループ化を認識し、1つしか開けないアコーディオンを制御します。

🔗 1つ開くと他が閉じるFAQアコーディオン

⭕️ Q1を開いた後にQ2を開くと、Q1が自動で閉じます

Q1. 返品は可能ですか？

A. 未使用に限り、到着後7日以内であれば可能です。

Q2. 送料はかかりますか？

A. 全国一律500円です。5,000円以上で無料になります。

Q3. 支払い方法は何がありますか？

A. クレジットカード、銀行振込、代金引換がご利用いただけます。

<!– ❌ 過去の手法：JSで制御（もう不要です） –>

<!– ⭕️ 現代の正解：同じ name 属性をつけるだけ –>
<details name=”faqGroup”>
  <summary>Q1. 質問</summary>
  <p>A. 回答</p>
</details>

<details name=”faqGroup”>
  <summary>Q2. 質問</summary>
  <p>A. 回答</p>
</details>
HTMLコード表示
<div class="hdet-prac1-wrapper">
  <div class="hdet-prac1-demo-area">
    <div class="hdet-prac1-box">
      <div class="hdet-prac1-label">🔗 1つ開くと他が閉じるFAQアコーディオン</div>
      
      <div class="hdet-prac1-visual">
        <p style="font-size:12px; color:#198754; font-weight:bold; margin:0 0 5px 0;">⭕️ Q1を開いた後にQ2を開くと、Q1が自動で閉じます</p>
        
        <div class="hdet-prac1-mock-faq">
          <details class="hdet-prac1-details" name="demo-faq">
            <summary class="hdet-prac1-summary">Q1. 返品は可能ですか？</summary>
            <div class="hdet-prac1-content"><p>A. 未使用に限り、到着後7日以内であれば可能です。</p></div>
          </details>

          <details class="hdet-prac1-details" name="demo-faq">
            <summary class="hdet-prac1-summary">Q2. 送料はかかりますか？</summary>
            <div class="hdet-prac1-content"><p>A. 全国一律500円です。5,000円以上で無料になります。</p></div>
          </details>

          <details class="hdet-prac1-details" name="demo-faq">
            <summary class="hdet-prac1-summary">Q3. 支払い方法は何がありますか？</summary>
            <div class="hdet-prac1-content"><p>A. クレジットカード、銀行振込、代金引換がご利用いただけます。</p></div>
          </details>
        </div>
      </div>

      <div class="hdet-prac1-code">
        <!-- ❌ 過去の手法：JSで制御（もう不要です） --><br><br>

        <!-- ⭕️ 現代の正解：同じ name 属性をつけるだけ --><br>
        <details <span class="hdet-prac1-hl-green">name="faqGroup"</span>><br>
          <summary>Q1. 質問</summary><br>
          <p>A. 回答</p><br>
        </details><br><br>

        <details <span class="hdet-prac1-hl-green">name="faqGroup"</span>><br>
          <summary>Q2. 質問</summary><br>
          <p>A. 回答</p><br>
        </details>
      </div>
    </div>
  </div>
</div>
CSSコード表示
.hdet-prac1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hdet-prac1-demo-area {
  display: flex;
  justify-content: center;
}

.hdet-prac1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}

.hdet-prac1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hdet-prac1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.hdet-prac1-mock-faq {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hdet-prac1-details {
  border: 1px solid #ced4da;
  border-radius: 4px;
  background: #fff;
}

.hdet-prac1-summary {
  padding: 12px 15px;
  background: #e9ecef;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}

.hdet-prac1-summary::marker {
  display: none;
}

.hdet-prac1-summary::-webkit-details-marker {
  display: none;
}

.hdet-prac1-content {
  padding: 15px;
  border-top: 1px solid #ced4da;
}

.hdet-prac1-content p {
  margin: 0;
  font-size: 13px;
  color: #555;
}

.hdet-prac1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}

.hdet-prac1-hl-green {
  color: #98c379;
  font-weight: bold;
}

テーブルの行やリストにおける入れ子構造

<details>タグは、単独で置くだけでなく、リストの<li>の中に入れたり、<details>の中にさらに別の<details>を入れる入れ子構造にしたりすることも可能です。

しかし、注意が必要なのが、料金表や比較表などのテーブルに組み込む場合です。

  • テーブルで使う場合
    <details>は<td>または<th>の「中」に配置してください。
    行（<tr>）全体をパカッと開くアコーディオンにすることは、<details>タグだけでは不可能です。
    表の中で使うなら「セルの中の補足説明を開閉する」という用途に留めましょう。
  • 入れ子（ネスト）にする場合
    親の<details>の中に入れた子の<details>は、階層がわかるように左側にmargin-leftでインデント（余白）をつけて視覚的に区別しないとユーザーが混乱します。
📊 テーブル・リスト・入れ子への組み込み

⭕️ 表崩れを起こさない正しいテーブル内の配置

プラン名 料金
プレミアム ¥10,000 / 月
内訳を見る
基本料:8,000円
OP料:2,000円

⭕️ 入れ子（ネスト）構造はインデントをつける

親カテゴリ（クリック）

親の説明文です。

子カテゴリ（入れ子）

子の説明文です。

<!– ❌ 致命的な間違い：表が崩壊します –>
<table>
  <details> <!– tr以外を置いてはいけない –>
    <tr><td>…</td></tr>
  </details>
</table>

<!– ⭕️ 大正解：必ず td や th の中に配置する –>
<table>
  <tr>
    <td>
      料金: 10,000円
      <details>
        <summary>内訳を見る</summary>
        <p>基本料金…</p>
      </details>
    </td>
  </tr>
</table>
HTMLコード表示
<div class="hdet-prac2-wrapper">
  <div class="hdet-prac2-demo-area">
    <div class="hdet-prac2-box">
      <div class="hdet-prac2-label">📊 テーブル・リスト・入れ子への組み込み</div>
      
      <div class="hdet-prac2-visual">
        <p style="font-size:12px; color:#0d6efd; font-weight:bold; margin:0 0 5px 0;">⭕️ 表崩れを起こさない正しいテーブル内の配置</p>
        
        <table class="hdet-prac2-table">
          <tr>
            <th>プラン名</th>
            <th>料金</th>
          </tr>
          <tr>
            <td>プレミアム</td>
            <td>
              ¥10,000 / 月
              <details class="hdet-prac2-table-details">
                <summary>内訳を見る</summary>
                <div class="hdet-prac2-table-content">基本料:8,000円<br>OP料:2,000円</div>
              </details>
            </td>
          </tr>
        </table>

        <p style="font-size:12px; color:#0d6efd; font-weight:bold; margin:20px 0 5px 0;">⭕️ 入れ子（ネスト）構造はインデントをつける</p>
        <details class="hdet-prac2-details">
          <summary class="hdet-prac2-summary">親カテゴリ（クリック）</summary>
          <div class="hdet-prac2-content">
            <p style="font-size:12px; margin-top:0;">親の説明文です。</p>
            <details class="hdet-prac2-details" style="margin-left:20px;">
              <summary class="hdet-prac2-summary">子カテゴリ（入れ子）</summary>
              <div class="hdet-prac2-content"><p style="font-size:12px; margin:0;">子の説明文です。</p></div>
            </details>
          </div>
        </details>
      </div>

      <div class="hdet-prac2-code">
        <!-- ❌ 致命的な間違い：表が崩壊します --><br>
        <table><br>
          <span class="hdet-prac2-hl-red"><details></span> <!-- tr以外を置いてはいけない --><br>
            <tr><td>...</td></tr><br>
          <span class="hdet-prac2-hl-red"></details></span><br>
        </table><br><br>

        <!-- ⭕️ 大正解：必ず td や th の中に配置する --><br>
        <table><br>
          <tr><br>
            <td><br>
              <span class="hdet-prac2-hl-blue">料金: 10,000円</span><br>
              <span class="hdet-prac2-hl-green"><details></span><br>
                <summary>内訳を見る</summary><br>
                <p>基本料金...</p><br>
              <span class="hdet-prac2-hl-green"></details></span><br>
            </td><br>
          </tr><br>
        </table>
      </div>
    </div>
  </div>
</div>
CSSコード表示
.hdet-prac2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hdet-prac2-demo-area {
  display: flex;
  justify-content: center;
}

.hdet-prac2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}

.hdet-prac2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hdet-prac2-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* テーブル用のCSS */
.hdet-prac2-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}

.hdet-prac2-table th,
.hdet-prac2-table td {
  border: 1px solid #ced4da;
  padding: 10px;
  text-align: left;
}

.hdet-prac2-table th {
  background: #e9ecef;
}

.hdet-prac2-table-details {
  margin-top: 5px;
  border: 1px dashed #adb5bd;
  border-radius: 4px;
}

.hdet-prac2-table-details summary {
  padding: 5px 10px;
  background: #f8f9fa;
  cursor: pointer;
  font-size: 11px;
}

.hdet-prac2-table-content {
  padding: 8px 10px;
  border-top: 1px dashed #adb5bd;
  font-size: 11px;
  color: #666;
}

/* 入れ子用の通常details */
.hdet-prac2-details {
  border: 1px solid #ced4da;
  border-radius: 4px;
  background: #fff;
}

.hdet-prac2-summary {
  padding: 10px 15px;
  background: #e9ecef;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
}

.hdet-prac2-content {
  padding: 15px;
  border-top: 1px solid #ced4da;
}

.hdet-prac2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hdet-prac2-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hdet-prac2-hl-blue {
  color: #61afef;
  font-weight: bold;
}

.hdet-prac2-hl-red {
  color: #e06c75;
  font-weight: bold;
}

テーブルの作り方を詳しく知りたい人は「【HTML】tableタグ（テーブル）の使い方：枠線・セル結合・レスポンシブ」を一読ください。

HTMLのtable（テーブル）タグの使い方！複雑なセル結合とレスポンシブ

Details Page（詳細ページ）のHTML/CSSテンプレート

Web制作で「ディテールズ（details）」という言葉が出た場合、タグのことではなく「詳細ページ（Details Page）」そのものを指すことが多々あります。

一覧画面（リスト）から遷移した先のすべての情報が載っているページのことです。

ここでは、実務で使える詳細ページの構成、コピペで使えるひな形をご紹介します。

HTML/CSSテンプレート
  • FAQアコーディオンのコピペ用テンプレート
  • 商品詳細やユーザー情報ページのひな形

FAQアコーディオンのコピペ用テンプレート

実務で要望の多い「FAQアコーディオン」のテンプレートです。

アコーディオンの中にテキストを入れる際は、親となる<div>を用意し、その中の<p>タグのmarginをゼロにリセットし、親の<div>側のpaddingで空間を調整してください。

これで開閉がスムーズになります。

💡 FAQアコーディオン
Q. サービスのアカウント登録は無料ですか？

A. はい、基本機能はすべて無料でご登録・ご利用いただけます。一部の高度な機能のみ有料プランでのご提供となります。

Q. パスワードを忘れてしまいました。

A. ログイン画面の「パスワードをお忘れの方」リンクより、登録時のメールアドレスをご入力ください。再設定の案内をお送りします。

HTMLコード表示
<div class="hdet-page1-wrapper">
  <div class="hdet-page1-demo-area">
    <div class="hdet-page1-box">
      <div class="hdet-page1-label">💡 FAQアコーディオン</div>
      
      <div class="hdet-page1-visual">
        <div class="hdet-page1-faq-container">
          <details class="hdet-page1-details" name="faq-template">
            <summary class="hdet-page1-summary">Q. サービスのアカウント登録は無料ですか？</summary>
            <div class="hdet-page1-content">
              <p>A. はい、基本機能はすべて無料でご登録・ご利用いただけます。一部の高度な機能のみ有料プランでのご提供となります。</p>
            </div>
          </details>

          <details class="hdet-page1-details" name="faq-template">
            <summary class="hdet-page1-summary">Q. パスワードを忘れてしまいました。</summary>
            <div class="hdet-page1-content">
              <p>A. ログイン画面の「パスワードをお忘れの方」リンクより、登録時のメールアドレスをご入力ください。再設定の案内をお送りします。</p>
            </div>
          </details>
        </div>
      </div>

    </div>
  </div>
</div>
CSSコード表示
.hdet-page1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hdet-page1-demo-area {
  display: flex;
  justify-content: center;
}

.hdet-page1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 600px;
  border-radius: 4px;
}

.hdet-page1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hdet-page1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.hdet-page1-faq-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hdet-page1-details {
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.hdet-page1-summary {
  padding: 15px 40px 15px 20px;
  background-color: #fff;
  font-weight: bold;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  position: relative;
  list-style: none;
  transition: background-color 0.2s ease;
}

.hdet-page1-summary:hover {
  background-color: #f8f9fa;
}

.hdet-page1-summary::marker {
  display: none;
}

.hdet-page1-summary::-webkit-details-marker {
  display: none;
}

/* ==========================================
   ✨ アイコンの図形化とアニメーション
========================================== */
/* 横線・縦線に共通のベース設定 */
.hdet-page1-summary::before,
.hdet-page1-summary::after {
  content: "";
  position: absolute;
  top: 50%;
  background-color: #0d6efd;
  /* 回転、透明度、色の変化をすべて滑らかにする */
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

/* 横線（マイナスとして残る線） */
.hdet-page1-summary::before {
  right: 15px;
  width: 14px;
  height: 2px;
  transform: translateY(-50%);
}

/* 縦線（プラスを形作るための線） */
.hdet-page1-summary::after {
  right: 21px; /* 15px + (14pxの半分) - (2pxの半分) = 21pxで完全な中央 */
  width: 2px;
  height: 14px;
  transform: translateY(-50%);
}

/* 開いた時のアイコン変化（変形モーフィング） */
.hdet-page1-details[open] .hdet-page1-summary::before {
  background-color: #dc3545;
  /* Y軸の中央揃えを維持したまま180度回転 */
  transform: translateY(-50%) rotate(180deg);
}

.hdet-page1-details[open] .hdet-page1-summary::after {
  background-color: #dc3545;
  /* 90度倒しながら透明にして消す */
  transform: translateY(-50%) rotate(90deg);
  opacity: 0;
}

/* ==========================================
   ✨ コンテンツの開閉アニメーション
========================================== */
.hdet-page1-content {
  padding: 20px 20px 20px 20px;
  background-color: #fff;
}

/* 開いた時（open属性がついた時）にのみアニメーションを適用する */
.hdet-page1-details[open] .hdet-page1-content {
  animation: hdet-fade-down 0.4s ease-out forwards;
}

.hdet-page1-content p {
  margin: 0;
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}

@keyframes hdet-fade-down {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

折り畳み式のアコーディオンメニューのデザインコードが欲しい人は「【html&css】コピペだけ！開閉式のアコーディオンメニューデザイン8選」を一読ください。

【CSS】コピペだけ！開閉式のアコーディオンメニューデザイン8選

商品詳細やユーザー情報ページのひな形

ECサイトの商品詳細ページや社内システム等の従業員・ユーザープロフィール画面は、画像とテキスト情報が整理されている必要があります。

詳細ページのレイアウトは、Flexbox（display: flex;） またはGrid（display: grid;） を使用して構築してください。

PC画面では横並びにし、スマホ画面（メディアクエリを使用）では縦並びに切り替えるのがよいです。

以下のテンプレートでは、商品とユーザーのどちらにも応用できる汎用的なカード型レイアウトを採用し、補足情報として<details>タグも組み込んでいます。

📋 Product / User 詳細ページテンプレート
No Image
Premium
ワイヤレスヘッドホン Pro

ID: EMP-00982 / Category: Audio

¥24,800

ノイズキャンセリング機能を搭載した高音質ワイヤレスヘッドホン。最大30時間の連続再生が可能です。

技術仕様・スペックを見る
  • 重量：250g
  • Bluetooth：バージョン5.2
  • 充電端子：USB Type-C
HTMLコード表示
<div class="hdet-page2-wrapper">
  <div class="hdet-page2-demo-area">
    <div class="hdet-page2-box">
      <div class="hdet-page2-label">📋 Product / User 詳細ページテンプレート</div>
      
      <div class="hdet-page2-visual">
        <div class="hdet-page2-card">
          <div class="hdet-page2-image-area">
            <div class="hdet-page2-image-placeholder">
              <span>No Image</span>
            </div>
          </div>
          
          <div class="hdet-page2-info-area">
            <span class="hdet-page2-badge">Premium</span>
            <div class="hdet-page2-title">ワイヤレスヘッドホン Pro</div>
            <p class="hdet-page2-subtitle">ID: EMP-00982 / Category: Audio</p>
            
            <div class="hdet-page2-price">¥24,800</div>
            
            <p class="hdet-page2-description">
              ノイズキャンセリング機能を搭載した高音質ワイヤレスヘッドホン。最大30時間の連続再生が可能です。
            </p>
            
            <details class="hdet-page2-tech-details">
              <summary class="hdet-page2-tech-summary">技術仕様・スペックを見る</summary>
              <div class="hdet-page2-tech-content">
                <ul class="hdet-page2-list">
                  <li>重量：250g</li>
                  <li>Bluetooth：バージョン5.2</li>
                  <li>充電端子：USB Type-C</li>
                </ul>
              </div>
            </details>
            
            <button class="hdet-page2-btn">カートに追加</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
CSSコード表示
.hdet-page2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hdet-page2-demo-area {
  display: flex;
  justify-content: center;
}

.hdet-page2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 600px;
  border-radius: 4px;
}

.hdet-page2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hdet-page2-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

/* 詳細カードのレイアウト（Flexbox） */
.hdet-page2-card {
  display: flex;
  gap: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 画像エリア */
.hdet-page2-image-area {
  flex: 1;
  min-width: 150px;
}

.hdet-page2-image-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #e9ecef;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  font-weight: bold;
  font-size: 14px;
}

/* 情報エリア */
.hdet-page2-info-area {
  flex: 2;
  display: flex;
  flex-direction: column;
}

.hdet-page2-badge {
  align-self: flex-start;
  background-color: #198754;
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 12px;
  margin-bottom: 8px;
  font-weight: bold;
}

.hdet-page2-title {
  margin: 0 0 5px 0;
  font-size: 18px;
  color: #333;
}

.hdet-page2-subtitle {
  margin: 0 0 15px 0;
  font-size: 11px;
  color: #6c757d;
}

.hdet-page2-price {
  font-size: 22px;
  font-weight: bold;
  color: #dc3545;
  margin-bottom: 10px;
}

.hdet-page2-description {
  margin: 0 0 15px 0;
  font-size: 12px;
  color: #555;
  line-height: 1.5;
}

/* 仕様詳細のアコーディオン */
.hdet-page2-tech-details {
  margin-bottom: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.hdet-page2-tech-summary {
  padding: 8px 12px;
  background-color: #f8f9fa;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  color: #0d6efd;
}

.hdet-page2-tech-content {
  padding: 10px;
  border-top: 1px solid #ced4da;
  background-color: #fff;
}

.hdet-page2-list {
  margin: 0;
  padding-left: 20px;
  font-size: 11px;
  color: #555;
}

.hdet-page2-list li {
  margin-bottom: 4px;
}

.hdet-page2-btn {
  background-color: #0d6efd;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-top: auto;
}

.hdet-page2-btn:hover {
  background-color: #0b5ed7;
}

/* スマホ対応（縦並びへの切り替え） */
@media (max-width: 500px) {
  .hdet-page2-card {
    flex-direction: column;
  }
}

Flexbox・Gridの使い方を詳しく知りたい人は以下から一読ください。

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • 基本構造
    外枠を<details>で囲み、常時表示する見出しを<summary>タグで記述する。
  • 初期展開
    <details>タグにopen属性を付与することで、初期状態から開いたままにできる。
  • デフォルト矢印の消去
    <summary>に対してlist-style: none;、::marker、Safari用の::-webkit-details-markerをすべて非表示（display: none;）にする。
  • 独自アイコン
    summary::before/afterの疑似要素とdetails[open]セレクタを組み合わせることで、CSSのみでアイコンの切り替えを実装する。
  • アニメーション
    直接的なheightの遷移は不可能。
    opacityやGridレイアウトのgrid-template-rowsを活用することで滑らかな開閉を実現する。
  • 排他制御（1つのみ開く）
    複数の<details>に対して共通のname属性を付与するだけで、JavaScript不要で連動開閉が可能になる。
  • テーブル内の配置
    表崩れを防ぐため、<tr>の直接の親や子にするのではなく、<td>または<th>（セル）の中に配置する。

よくある質問（FAQ）

HTMLの<details>タグとは何ですか？

<details>タグは、クリックすると中身が開閉する「折りたたみメニュー（アコーディオン）」をJavaScript不要で作れるHTML5の標準タグです。

「よくある質問（FAQ）」の回答部分や補足説明など、最初は隠しておき、ユーザーが読みたい時だけ表示させたいコンテンツを作る際に使用されます。

<summary>タグ（見出し）とセットで使います。

<details>タグの左側に出る黒い矢印（三角アイコン）を消すにはどうすればいいですか？

CSSを使って簡単に消せます。

<summary>要素に対してlist-style: none;を指定し、summary::markerをdisplay: none;に設定します。

ただし、これだけではiPhoneやMacのSafariで矢印が残るため、Safari用の設定としてsummary::-webkit-details-marker { display: none; }もセットで記述してください。

最初からアコーディオンを開いた状態にしておくことはできますか？

はい、可能です。

HTMLの<details>タグにopen属性を追加するだけで、ページを読み込んだ初期状態から中身が開いたままになります（記述例：<details open>）。

注意点として、CSSのdisplay: block;などで無理やり中身を表示させようとすると、クリックしても閉じられなくなるバグが発生するため、open属性を使用してください。

開閉する時に「フワッと」動くようなアニメーションを付けることはできますか？

<details>の標準機能では一瞬で開閉するため、滑らかにするにはCSSの工夫が必要です。

開いた時に付与される[open]属性をCSSセレクタとして利用し、中身の要素に対してopacityの変化やanimationを適用することで、フェードイン効果をつけれます。

高さを滑らかに伸ばす場合は、Gridレイアウト（grid-template-rows）とtransitionを組み合わせる手法が主流です。

複数の<details>タグがある時、1つを開いたら他が自動で閉じるようにするには？

最新のHTML仕様では、JavaScriptを書かなくても実装可能です。

連動させたい複数の<details>タグ全てに対し、同じ値のname属性（例：<details name="faqGroup">）を指定してください。

これにより、ブラウザがそれらを「同じグループ」として認識し、ラジオボタンのように「同時に1つしか開けない」アコーディオンとして機能します。

あなたの「コーディング力」が最強の武器になる 自作コード × SWELL で理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています
HTML

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次