details/summaryタグ 折りたたみコンテンツ

catnose catnose · に最終更新

HTMLの<details>ディテールズタグと<summary>サマリータグを合わせて使えば、簡単にアコーディオンや折りたたみメニューを作ることができます。JavaScriptを使う必要はありません。

😺アコーディオンとは：折りたたまれたコンテンツのこと。クリックやタップにより、折りたたまれていた部分が開きます。

detailsとsummaryタグを使ったアコーディオンのイメージ

️<details>と<summary>は、HTML5から登場しました。ほとんどの主要ブラウザで使用できますが、IEには対応していません。

目次
このページの目次

detailsとsummaryタグの使い方

<details>と<summary>を以下のように合わせて使うことで折りたたみコンテンツ（アコーディオン）を作成できます。

<details>
  <summary>HTMLって何の略？</summary>
  <p>「Hyper Text Markup Language」の略です。</p>
</details>

↑クリックすると開きます

<details>
アコーディオン全体を囲みます。
<summary>
アコーディオンのタイトル（常に見えているテキスト）を入れます。具体的には、要約やキャプションなどが入ると思います。
<p>
詳細（クリックで開閉する、折りたたまれたコンテンツ）を入れます。段落（<p>）だけでなく、リスト（<ul>・<ol>）などの他の要素を使ってもOKです。

詳細には、複数の要素を配置できる

<details>
  <summary>HTMLとは</summary>
  <p>HTMLはマークアップ言語の1つです。</p>
  <p>次のような特徴を持ちます。</p>
  <ul>
    <li>Webページを表現する</li>
    <li>WHATWGにより仕様策定</li>
  </ul>
</details>

👆<summary>はアコーディオンのタイトルとなり、1つだけ配置します。
<details>内のそれ以外の部分は、詳細（開閉する部分）となり、複数の要素を置くことができます。このサンプルのように、複数の段落やリストなどを入れてもOKです。

はじめからアコーディオンを開いておく

<details open>
  <summary>open属性ありの場合</summary>
  <div>詳細テキスト</div>
</details>

👆<details>タグにopen属性を指定すると、はじめからアコーディオンを開いておくことができます。<details open>という形ですね。

JavaScriptで開閉を操作

👩‍💻
中級者向け

JavaScriptによるopen属性の操作により、開閉をコントロールできます。open属性を取り除くと、アコーディオンは閉じます。逆にopen属性を追加すると開きます。

開閉時にイベントを発火

アコーディオンの開閉をトリガーにイベントを発火させることもできます。

const detailsElem = document.getElementById("hoge");
detailsElem.addEventListener("toggle", function(event) {
  if (detailsElem.open) {
    /* 開いたときの処理 */
  } else {
    /* 閉じたときの処理 */
  }
});

👆開閉はtoggleイベントで拾い、開閉状態はdetails要素.openで調べることができます。

CSSでアコーディオンをカスタマイズ

<details>
  <summary>タイトル</summary>
  <p>詳細コンテンツ</p>
</details>

👆<details>と<summary>で作ったアコーディオンは、デフォルトではこのように表示されます。タイトル（<summary>）に付いてる三角形の矢印は自動で表示されます。

矢印を消す

<summary>の矢印（▶）を消す方法は、ブラウザにより異なります。以下のCSSを指定すれば、各ブラウザで矢印を消すことができます。

/* Chrome、Safari以外 */
summary {
  display: block;
}

/* Chrome、Safari */
summary::-webkit-details-marker {
  display: none;
}

👆webkitブラウザ（Chrome、Safari）ではsummary::-webkit-details-markerにより矢印が表示されているため、こちらを非表示にします。それ以外のブラウザでは、<summary>がdisplay: list-itemとなることで矢印が表示されているため、display: blockで上書きすれば消すことができます。

矢印をカスタマイズする

矢印をカスタマイズしたいときは、デフォルトの矢印を消したうえで、疑似要素などを使ってアイコンや画像を表示させます。

疑似要素でアイコンを表示

summary {
  position: relative;
  display: block; /* 矢印を消す */
  padding-left: 20px; /* アイコン分の余白 */
  cursor: pointer;
}
summary::-webkit-details-marker {
  display: none; /* 矢印を消す */
}
/* 疑似要素でアイコンを表示 */
summary:before,
summary:after {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
summary:before {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background-color: #1da1ff;
}
summary:after {
  left: 6px;
  width: 5px;
  height: 5px;
  border: 4px solid transparent;
  border-left: 5px solid #fff;
  box-sizing: border-box;
  transition: .1s;
}
/* オープン時 */
details[open] summary:after {
  transform: rotate(90deg); /* 90度回転 */
  left: 4px;
  top: 5px;
}

👆<summary>に対して疑似要素（:beforeと:after）を設定し、アイコンを表現しています。疑似要素により、Font AwesomeなどのWebアイコンフォントを表示させることもできます。

疑似要素で画像を表示

CSS
summary {
  display: block; /* デフォルトの矢印を消す */
}
summary::-webkit-details-marker {
  display: none; /* デフォルトの矢印を消す */
}
summary:before {
  content: url("/example.png"); /* 画像URLを指定 */
}

👆矢印の代わりに画像を使いたい場合には、疑似要素のcontentに画像URLを指定すれば良いかと思います。

ホバー時のスタイルを変える

デフォルトのスタイルでは、アコーディオンの上にマウスオーバーしたとき（ホバー時）の反応が直感的ではありません。

summaryのホバー時のスタイル

たとえば、ホバー時にはカーソルをポインター（指マーク）にして、背景色を変えると、よりアコーディオンであることが伝わりやすくなるでしょう。

具体的には以下のようなCSSを指定します。

summary {
  cursor: pointer;
  transition: 0.2s; /* 変化を滑らかに */
}
/* ホバー時のスタイル */
summary:hover {
  cursor: pointer; /* カーソルを指マークに */
  background-color: #EFEFEF;
}

オープン時（開いている時）のスタイルを変える

details[open]というセレクタにより、アコーディオンが開いているときのスタイルだけを変えることができます。

details[open] summary {
  color: gray;
}

👆details[open] suumaryというセレクタにより「オープン時の<summary>のスタイル」を変えています。アコーディオンを開いているときだけ、タイトルの文字色が灰色になります。

アニメーションでふわっと表示する

アニメーションをつけた例

CSSのanimationプロパティを使って、アコーディオンを開いたときに、ふわっと表示することもできます。

/* オープン時にアニメーションを設定 */
details[open] .details-content {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0; /* 透明 */
    transform: translateY(-10px); /* 上から表示 */
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

👆HTMLでは、折りたたまれるコンテンツ全体を<div class="details-content">の中に入れています。CSSでは、.details-contentに対して、アニメーションを設定しています。

✍️opacityの値を0から1にすると「透明→不透明」となり、ふわっと感が出ます。またtransformプロパティを使って、少し上から降りてくるようなエフェクトをかけています。

アウトラインを消す（非推奨）

<summary>には、クリック時に青い線（アウトライン）が表示されることがあります。

アウトラインは以下のようにsummary { outline: none; }で消すことができますが、アクセシビリティの観点から消すことはおすすめしません。

😿たとえば、マウスを使わずにキーボードで操作しているユーザーが、アコーディオンを見つけられないかもしれません。

summary {
  cursor: pointer;
  outline: none;
}

アコーディオンを装飾するサンプルCSS

ここまでの内容をふまえて、<details>と<summary>によるアコーディオンを装飾するサンプルCSSを紹介します。

summary {
  position: relative;
  display: block; /* 矢印を消す */
  padding: 10px 10px 10px 30px; /* アイコンの余白を開ける */
  cursor: pointer; /* カーソルをポインターに */
  font-weight: bold;
  background-color: #e2f0f7;
  transition: 0.2s;
}
summary:hover {
  background-color: #ccebfb;
}
summary::-webkit-details-marker {
  display: none;　/* 矢印を消す */
}

/* 疑似要素でアイコンを表示 */
summary:before,
summary:after {
  content: "";
  margin: auto 0 auto 10px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
summary:before {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background-color: #1da1ff;
}
summary:after {
  left: 6px;
  width: 5px;
  height: 5px;
  border: 4px solid transparent;
  border-left: 5px solid #fff;
  box-sizing: border-box;
  transition: .1s;
}

/* オープン時のスタイル */
details[open] summary {
  background-color: #ccebfb;
}
details[open] summary:after {
  transform: rotate(90deg); /* アイコンを回転 */
  left: 4px; /* 位置を調整 */
  top: 5px; /* 位置を調整 */
}

/* アニメーション */
details[open] .details-content {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

<details>と<summary>を使えば、この他にも「ドロップダウンメニュー」や「ハンバーガーメニュー」などを作ることができます。HTMLとCSSだけで、簡単にアコーディオンや折りたたみメニューを設置できるのは嬉しいですね。

ブラウザ対応状況

🖥デスクトップ

  • Chromeのアイコン
    Chrome
    12〜
  • Safariのアイコン
    Safari
    6〜
  • Firefoxのアイコン
    Firefox
    49〜
  • Edgeのアイコン
    Edge
    79〜
  • IEのアイコン
    IE
    未対応

📱モバイル

  • Android Chromeのアイコン
    Android Chrome
    108〜
  • iOS Safariのアイコン
    iOS Safari
    6〜

caniuse.comで詳しく見る

HTMLの記事をもっと見る