アコーディオンバーの左側にfont-Awesomeを指定

 
アコーディオンで質問をカテゴリー分けする利用を想定したバージョン。アコーディオン左側にはfont-Awesomeでアイコンを表示し、右側にはテキストを指定しています。
文字数によっては重なることが想定されるため、右側のテキストはスマホでは表示されないようにしています。
 
また、アコーディオンが開いた時に表示される質問・回答はDRESSでリード(質問)と本文(回答)にインデントを設定しています。

Q. 吾輩は猫である。名前はまだ無い吾輩は猫である?

A. どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

Q. 吾輩は猫である。名前はまだ無い?

A. どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

Q. 吾輩は猫である。名前はまだ無い?

A. 吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

Q. 吾輩は猫である。名前はまだ無い吾輩は猫である?

A. どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

Q. 吾輩は猫である。名前はまだ無い?

A. どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

Q. 吾輩は猫である。名前はまだ無い?

A. 吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。


  • アコーディオンバー左のfont-Awesome(+、ー)は、DRESSのbefore要素から変更可能です。
  • アコーディオンバー右のテキストは、DRESSのafter要素から変更可能です。
  • アコーディオンバーの背景色の変更
  • 質問・回答の組み合わせ数は制限なし
  • 質問・回答の文字色、背景色の変更
  • 質問・回答の行高さ、文字サイズの変更
  • 質問ごとの区切り線は"区切り線"を配置しています。区切り線の色・太さなどはサイトのメインとなるDRESSで設定されているという前提でfaq_008では指定していません。

Tablet View

SP View