【HTML5】CSSもJSも不要！detailsとsummaryで実装するアコーディオン

見出しと長い説明文のセットで情報を掲載したい場合によく使われるアコーディオンですが、HTML5で追加されたタグを使うとなんと、CSSにもJSにも依存することなくアコーディオンが実装できちゃうのです！！

いやいや、、便利な時代になったものです。

※現時点でIE, Edgeは非対応です

detailsとsummaryについて

details

詳細折りたたみ要素という扱いで、実装したいアコーディオンの数だけセットで記述する形となります。

この要素の最初の子要素としてsummaryタグがラベル（見出し）の役割で使用されます。

summary

概要明示要素という扱いで、主にdetailsタグの最初の子要素としてラベル（見出し）に使用されます。

コンテンツ一覧へ戻る

マークアップ例

上記で紹介した2つのタグは、次のような形で使います。

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

このようにHTMLを記述するだけで、クリック開閉可能な3つのアコーディオンが実装されるのです！
ビックリするぐらい超簡単ですね！

サンプルはこちら！

サンプルを確認する

コンテンツ一覧へ戻る

ラーメンだけ初めから開いておきたい

先程のマークアップ例で言うと、ラーメン焼肉寿司の3つのアコーディオンで構成されてましたね。

その内の1つ目であるラーメンだけを初めから開いておきたい場合、次のようになります。

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

変わっているのはハイライトされた1行目のみで、openという属性が追加されているだけですね！

コンテンツ一覧へ戻る

CSSでアレコレ

CSSもJSも不要でアコーディオン自体は動くのですが、デフォルトだとちょっと素っ気無い感じがするので、CSSで少し見栄えを整えていきたいと思います！

要所要所の紹介になりますので、まずは全貌を見たいという方はこちらからご確認ください！

サンプルを確認する

summaryタグのデフォルト黒三角を消す

デフォルトの状態ですと、次のように黒い三角がアイコンとして表示されます。

まずはこの三角を消してみたいと思うのですが、FirefoxとChrome, Safariでは手法が違いますので、注意してください。

Firefoxの場合

details summary {
  list-style: none;
}

Chrome, Safariの場合

details summary::-webkit-details-marker {
  display: none;
}

あ、ついでにカーソルがポインターになるようにしておきましょう。

details summary {
  cursor: pointer;
}

コンテンツ一覧へ戻る

三角を消した代わりにFont Awesomeアイコンを使用する

言わずとしれたウェブアイコンフォントの「Font Awesome」を使用し、summaryタグのアイコンを装飾していきたいと思います。

閉じている時はプラスアイコン、開いている時はマイナスアイコン。というようにしたいと思います。
ん…つまり開いている状態をCSSで指定できる必要がありますね。

はい、このようにすると開いている状態を指定することができます。

details[open] {
  /* 開いている時のCSSを記述 */
}

簡単ですね。
以上を踏まえた上で、Font Awesomeを使用した装飾のCSS記述例がこちらになります！

閉じている時

details summary::before {
  font-family: FontAwesome;
  content: '\f067';
  margin-right: 20px;
}

font-familyとmargin-rightは両方とも共通の部分になりますね。

開いている時

details[open] summary::before {
  content: '\f068';
}

プラスアイコン→マイナスアイコンに変更しているだけの記述になります。

その他CSS装飾を加えた完成版は、こちらからご確認いただけます！

サンプルを確認する

コンテンツ一覧へ戻る

IE, Edgeでは残念ながらまだNGであったり、アニメーションを付けようと思うとちょっと現実的ではなかったりと、まだまだ発展途上な点もありますが、便利な時代になったなぁとつくづく感じております。笑