faq_001

基本的なレイアウトながら質問と回答にアイコンをつけて、さらにtext-indetで改行された時に読みやすくなるようにしました。

 
質問と回答をそのまま並べてレイアウト。そのままでは（dafault）では質問と回答の区別がわかりにくく、一見して質問内容がわかりにくく感じます。
このブロックデザインでは、質問のカテゴリーを大見出し、質問を小見出し、回答を本文としています。
CSS（もしくはDRESS）で小見出しに色を設定するなどで見やすくはなるかと思いますが、QとAのアイコンをつけて余白を調整することで見やすくしています。
さらに、レスポンシブデザインの場合は、スマホでは改行されて表示されることが多くなりますので、改行時にアイコンが本文と一緒にならないようにtext-indentを指定しました。
このブロックのCSSタブで調整できますので、アイコンを変更した時などの寸法変更にも対応します。

faq_001a

 
本文（回答）を右にずらすことで、一見して質問（小見出し）と区別が付きやすいようにしたバリエーション。