menu
menu

キーワード検索

 

3月更新・前月(2月)の人気記事トップ10 - 03/02/2020

  1. ( 1 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 2 - ) 【CSS】CSSだけでドロップダウンメニュー
  3. ( 3 - ) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  4. ( 8 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  5. ( 6 ↑) 【Mac】Safariでソースコードを見る方法
  6. ( 5 ↓) 【制作Tips】iPhone画面解像度まとめ
  7. ( 4 ↓) 【Mac】Finderにフォルダのフルパスを表示させる方法
  8. ( 7 ↓) 【Mac】外付けメディアが取り外せなくなったらSpotlightの除外項目を設定してみる
  9. ( 10 ↑) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  10. ( 9 ↓) 【制作Tips】画面解像度一覧表
このエントリーをはてなブックマークに追加

【HTML5】detailsとsummaryでアコーディオン

【HTML5】detailsとsummaryでアコーディオン

こんにちは(・∀・)

アコーディオンといえば、今まではjQueryやCSSを使って実装してきましたが、それらを使わなくともアコーディオンは実現することができます。

detailsとsummaryでアコーディオン

detailsタグで囲んだ部分がアコーディオンとなります。summaryタグをクリックすると本文が表示されます。

sample

それではサンプルをご覧ください。

demo

HTML

<details>
<summary>コンテント1</summary>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</details>

あまりないとは思いますが、本文を最初から開いておきたい場合はdetailsタグにopen属性を追加すると実現します。

HTML

<details open>
<summary>コンテント2</summary>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</details>

また、CSSを使うことなくアコーディオンを実現することができますが、必要に応じてCSSを使うのも良いと思います。

CSS

details {
  height: 10px;
  transition: 2s;
  padding: 10px;
}
details[open] {
  height: 200px;
  background: #eee;
}
summary {
  cursor: pointer;
  list-style-image: url(ar-r.png);
}
summary::-webkit-details-marker {
  background: url(ar-r.png) no-repeat;
  color: transparent;
}

ボタン部分の枠はoutline: noneで消すこともできますが、アクセシビリティ上残しておくことをオススメします。

また、ボタン部分に表示される三角形の矢印も変更することができます。

その場合、list-style-imageで画像を指定しますが、そのままではChromeとSafariでは表示されないので、ベンダープレフィックスを使用します。


よろしければぜひお試しください。

関連リンク

【CSS3】CSSだけで横方向に展開するサイズ可変・スマホ対応のアコーディオン
【CSS3】CSSだけでサイズ可変・スマホ対応のアコーディオン
【jQuery】jQueryでスマホ画面は縦方向PC画面は横方向に展開するアコーディオン
【jQuery】jQueryでサイズ可変・スマホ対応のアコーディオン

参考

CSSすら不要!detailsとsummaryタグで作る簡単アコーディオン

  • CSS3 HTML5 アコーディオン
このエントリーをはてなブックマークに追加