Sample List

HTMLのみで実装できるアコーディオン

概要

JSもCSSも使わずにアコーディオンが実装できる時代になったのですね（※IE, Edgeは現時点でNG）。
details>summaryという組み合わせがアコーディオンのセットとなり、HTMLを記述するだけでクリック開閉可能なアコーディオンが実装されてしまうのです！

HTML 

<details>
  <summary>ラーメン</summary>
  ラーメンとは、中華麺とスープを主とし、様々な具を組み合わせた麺料理。漢字表記は拉麺、老麺または柳麺。別名は中華そばおよび支那そば、南京そばなどである。中華人民共和国や中華民国では日式拉麺または日本拉麺と呼ばれる。
</details>
<details>
  <summary>焼肉</summary>
  焼肉とは、牛・豚などの肉を焼いたもの。また、肉や内臓にタレをつけ、直火で焼きながら食べる料理である。
</details>
<details>
  <summary>寿司</summary>
  寿司とは、米飯と主に魚介類を組み合わせた日本料理である。 大別すると、酢飯と生鮮魚介を用いた「早鮨」と、魚介類を飯と塩で乳酸発酵させた「なれ鮨」に区分される。
</details>

とりあえず実装してみた

ラーメン ラーメンとは、中華麺とスープを主とし、様々な具を組み合わせた麺料理。漢字表記は拉麺、老麺または柳麺。別名は中華そばおよび支那そば、南京そばなどである。中華人民共和国や中華民国では日式拉麺または日本拉麺と呼ばれる。
焼肉 焼肉とは、牛・豚などの肉を焼いたもの。また、肉や内臓にタレをつけ、直火で焼きながら食べる料理である。
寿司 寿司とは、米飯と主に魚介類を組み合わせた日本料理である。 大別すると、酢飯と生鮮魚介を用いた「早鮨」と、魚介類を飯と塩で乳酸発酵させた「なれ鮨」に区分される。

とても簡単でビックリです。ちょっとこの状態にCSSを加えてみたいと思います。

CSSを当ててみた

ラーメン

ラーメンとは、中華麺とスープを主とし、様々な具を組み合わせた麺料理。漢字表記は拉麺、老麺または柳麺。別名は中華そばおよび支那そば、南京そばなどである。中華人民共和国や中華民国では日式拉麺または日本拉麺と呼ばれる。

焼肉

焼肉とは、牛・豚などの肉を焼いたもの。また、肉や内臓にタレをつけ、直火で焼きながら食べる料理である。

寿司

寿司とは、米飯と主に魚介類を組み合わせた日本料理である。 大別すると、酢飯と生鮮魚介を用いた「早鮨」と、魚介類を飯と塩で乳酸発酵させた「なれ鮨」に区分される。

上記のようにしてちょっと見栄えを整えてみました！

HTML 

<details>
  <summary>ラーメン</summary>
  <p>
    ラーメンとは、中華麺とスープを主とし、様々な具を組み合わせた麺料理。漢字表記は拉麺、老麺または柳麺。別名は中華そばおよび支那そば、南京そばなどである。中華人民共和国や中華民国では日式拉麺または日本拉麺と呼ばれる。
  </p>
</details>
<details>
  <summary>焼肉</summary>
  <p>
    焼肉とは、牛・豚などの肉を焼いたもの。また、肉や内臓にタレをつけ、直火で焼きながら食べる料理である。
  </p>
</details>
<details>
  <summary>寿司</summary>
  <p>
    寿司とは、米飯と主に魚介類を組み合わせた日本料理である。 大別すると、酢飯と生鮮魚介を用いた「早鮨」と、魚介類を飯と塩で乳酸発酵させた「なれ鮨」に区分される。
  </p>
</details>

summary（見出しに当たる部分）のフォントサイズを大きくしたかったため、文章をpタグで囲むように変更しました。

CSS 

details {
  border: 1px solid #ccc;
}
details:not(:last-child) {
  margin-bottom: 20px;
}

/**
 * list-style: none; ←デフォルト三角削除（Chrome非対応）
 * cursor: pointer; ←カーソルをポインターに
**/
details summary {
  list-style: none;
  cursor: pointer;
  padding: 20px;
  background: #e4e4e4;
  color: #242323;
  font-size: 2rem;
  font-weight: bold;
}
/**
 * Chrome用のデフォルト三角削除
**/
details summary::-webkit-details-marker {
  display: none;
}
/**
 * Font Awesomeのプラスアイコン使用
**/
details summary::before {
  font-family: FontAwesome;
  content: '\f067';
  margin-right: 20px;
}
/**
 * アコーディオンがオープン時はマイナスアイコンに変更
**/
details[open] summary::before {
  content: '\f068';
}

details p {
  margin: 0;
  padding: 20px;
}

CSS内コメントにも説明を記載しておりますが、大きく変更した点はデフォルトの三角を削除しFont Awesomeのプラスマイナスアイコンにしたという所です。

オープン時のdetails要素には<details open>というように属性が追加されます。
なので、CSSのセレクタはdetails[open]というような指定になります。

一覧に戻る