HTML/CSSだけで動くアコーディオンの作り方【HTML/CSS・サンプルコード付き】

HTML/CSSだけで動くアコーディオンの作り方

HTML/CSSだけで動くアコーディオンの作り方を紹介します。このサンプルでは、HTMLのdetails要素とsummary要素を使用し、見出しをクリックすると対応する内容を開閉できるアコーディオンを実装します。JavaScriptや外部ライブラリを使用しないため、シンプルな構成で導入できます。

各項目はそれぞれ独立して開閉でき、複数の内容を同時に表示できます。FAQ、お問い合わせページ、商品説明、利用案内、管理画面の補足説明など、情報量の多いページを整理して表示したい場面に適しています。ブラウザに備わっている開閉機能を利用するため、少ないコードで基本的なアコーディオンを作成できます。

HTMLでは見出しと本文、項目数を変更でき、CSSでは背景色、文字色、枠線、余白、角丸、開閉アイコンなどを調整できます。画面幅に合わせて横幅が縮小される構成のため、スマートフォン・タブレット・PCでも利用しやすく、初心者でもカスタマイズしやすいサンプルです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

HTML/CSSだけで動くアコーディオン

見出しをクリックすると、JavaScriptを使わずに内容を開閉できます。

アコーディオンとは？

見出しをクリックして、対応する内容の表示・非表示を切り替えられるUIです。

どんな場面で使う？

FAQ、お問い合わせページ、商品説明、利用案内など、情報を整理して表示したい場面で利用できます。

JavaScriptは必要？

このサンプルはdetails要素とsummary要素を使用するため、HTMLとCSSだけで動作します。

各見出しをクリックすると、対応する内容の開閉動作を確認できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン表示対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>HTML/CSSだけで動くアコーディオン</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- アコーディオン全体 -->
  <div class="html-css-accordion_wrap">

    <!-- タイトル -->
    <h1 class="html-css-accordion_title">
      HTML/CSSだけで動くアコーディオン
    </h1>

    <!-- 説明文 -->
    <p class="html-css-accordion_text">
      見出しをクリックすると、JavaScriptを使わずに内容を開閉できます。
    </p>

    <!-- アコーディオン項目 -->
    <details class="html-css-accordion_item">

      <summary class="html-css-accordion_summary">
        アコーディオンとは？
      </summary>

      <div class="html-css-accordion_content">
        見出しをクリックして内容を表示・非表示にできるUIです。
      </div>

    </details>

    <!-- アコーディオン項目 -->
    <details class="html-css-accordion_item">

      <summary class="html-css-accordion_summary">
        どんな場面で使う？
      </summary>

      <div class="html-css-accordion_content">
        FAQ、お問い合わせページ、商品説明などで利用できます。
      </div>

    </details>

    <!-- アコーディオン項目 -->
    <details class="html-css-accordion_item">

      <summary class="html-css-accordion_summary">
        JavaScriptは必要？
      </summary>

      <div class="html-css-accordion_content">
        このサンプルはHTMLとCSSだけで動作します。
      </div>

    </details>

  </div>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* 外側の余白 */
  padding:40px 20px; /* 内側の余白 */
  background:#ffffff; /* 背景色 */
  font-family:sans-serif; /* フォント */
}

/* アコーディオン全体 */
.html-css-accordion_wrap{
  width:100%; /* 横幅 */
  max-width:700px; /* 最大横幅：変更すると全体サイズが変わる */
  margin:40px auto; /* 中央配置 */
  padding:32px; /* 内側余白 */
  border:1px solid #e5e7eb; /* 枠線 */
  border-radius:18px; /* 角丸 */
  background:#f8fafc; /* 背景色 */
  box-sizing:border-box; /* paddingを幅に含める */
}

/* タイトル */
.html-css-accordion_title{
  margin:0 0 12px; /* 下余白 */
  text-align:center; /* 中央揃え */
  font-size:22px; /* 文字サイズ */
  font-weight:700; /* 太字 */
}

/* 説明文 */
.html-css-accordion_text{
  margin:0 0 24px; /* 下余白 */
  text-align:center; /* 中央揃え */
  color:#4b5563; /* 文字色 */
  line-height:1.8; /* 行間 */
}

/* アコーディオン */
.html-css-accordion_item{
  margin-bottom:12px; /* 項目間余白 */
  border:1px solid #e5e7eb; /* 枠線 */
  border-radius:12px; /* 角丸 */
  overflow:hidden; /* はみ出し防止 */
  background:#ffffff; /* 背景色 */
}

.html-css-accordion_item:last-child{
  margin-bottom:0; /* 最後の余白を削除 */
}

/* 見出し */
.html-css-accordion_summary{
  display:flex; /* 横並び */
  align-items:center; /* 縦中央 */
  justify-content:space-between; /* 左右配置 */
  padding:16px 18px; /* 内側余白 */
  font-weight:700; /* 太字 */
  cursor:pointer; /* カーソル */
  list-style:none; /* マーカー非表示 */
}

.html-css-accordion_summary::-webkit-details-marker{
  display:none; /* Safari対応 */
}

/* 開閉アイコン */
.html-css-accordion_summary::after{
  content:"＋";
  color:#2563eb; /* アイコン色 */
  font-size:22px; /* アイコンサイズ */
  font-weight:700;
}

/* 開いた時 */
.html-css-accordion_item[open] .html-css-accordion_summary::after{
  content:"－";
}

/* 本文 */
.html-css-accordion_content{
  padding:0 18px 18px; /* 内側余白 */
  color:#4b5563; /* 文字色 */
  line-height:1.8; /* 行間 */
}

/* レスポンシブ */
@media (max-width:640px){

  .html-css-accordion_wrap{
    padding:24px 18px; /* スマホ余白 */
  }

}

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルは、HTMLとCSSの2ファイルで構成されたアコーディオンです。HTMLのdetails要素とsummary要素に備わっている開閉機能を利用するため、JavaScriptや外部ライブラリを使わずに動作します。index.htmlでアコーディオンの見出しと本文を作成し、style.cssで全体の横幅、配色、余白、枠線、角丸、開閉アイコンなどを整えています。

各アコーディオン項目は独立して開閉できるため、複数の項目を同時に開いた状態にできます。FAQ、お問い合わせページ、商品説明、利用案内など、複数の情報をコンパクトに整理したいページへ設置できます。

ファイルを同じフォルダへ配置してindex.htmlをブラウザで開くだけで動作を確認できます。表示する文章や項目数はindex.htmlで変更し、背景色、文字色、横幅、余白、角丸などの見た目はstyle.cssで調整できます。

sample/
├── index.html
└── style.css

各ファイルの役割
index.htmlは、アコーディオン全体の構造を作るファイルです。ページタイトル、説明文、各項目の見出し、開いたときに表示する本文を編集できます。アコーディオンを増やす場合は、details要素を同じ形式で追加します。

style.cssは、ページ全体とアコーディオンの見た目を設定するファイルです。全体の横幅、背景色、文字色、枠線、余白、角丸、プラス・マイナス記号、スマートフォン表示時の余白を変更できます。

設置方法・使い方
sampleフォルダを作成し、その中へindex.htmlとstyle.cssを配置します。2つのファイルは同じ階層へ保存してください。

配置後にsample/index.htmlをブラウザで開きます。各見出しをクリックすると対応する本文が表示され、もう一度クリックすると閉じます。JavaScriptは使用していないため、追加の設定やライブラリの読み込みは不要です。

カスタマイズできる内容
index.htmlでは、タイトル、説明文、アコーディオンの見出し、本文、項目数、表示順を変更できます。各項目はdetails要素で構成され、見出しはsummary要素、本文はhtml-css-accordion_contentクラスを付けた要素へ記述します。

style.cssでは、backgroundで背景色、colorで文字色、borderで枠線、border-radiusで角丸、paddingで内側余白を変更できます。summary::afterのcontentを編集すると、閉じている状態の記号を変更できます。details[open] summary::afterのcontentを編集すると、開いている状態の記号を変更できます。

数値調整
style.cssのmax-width:700px;はアコーディオン全体の最大横幅です。値を大きくすると広くなり、小さくするとコンパクトになります。

padding:32px;はアコーディオン全体の内側余白です。値を大きくすると外枠と内容の間隔が広がり、小さくすると狭くなります。

border-radius:18px;はアコーディオン全体の角丸です。値を大きくすると丸みが強くなり、小さくすると直線的な形になります。

margin-bottom:12px;は各アコーディオン項目の間隔です。値を大きくすると項目同士の間隔が広がります。

font-size:22px;は開閉記号の大きさです。値を大きくするとプラス・マイナス記号が大きく表示されます。

レスポンシブ対応
style.cssでは、アコーディオン全体にwidth:100%とmax-width:700pxを指定し、画面幅に合わせて自動的に縮小するようにしています。

また、@media (max-width:640px)で画面幅640px以下のときに内側余白を24px 18pxへ変更しています。これにより、スマートフォン・タブレット・PCで横幅や余白が崩れにくい構成になっています。