Tablet View
![](../_src/18848/img20221105172959299227.png?v=1714631193933)
SP View
![](../_src/18850/img20221105172959290954.png?v=1714631193933)
基本的なレイアウトながら質問と回答にアイコンをつけて、さらにtext-indetで改行された時に読みやすくなるようにしました。【faq_001のバリエーション】
質問と回答をそのまま並べてレイアウト。そのままでは(dafault)では質問と回答の区別がわかりにくく、一見して質問内容がわかりにくく感じます。
このブロックデザインでは、質問のカテゴリーを大見出し、質問を小見出し、回答を本文としています。
CSS(もしくはDRESS)で小見出しに色を設定するなどで見やすくはなるかと思いますが、QとAのアイコンをつけて余白を調整することで見やすくしています。
さらに、レスポンシブデザインの場合は、スマホでは改行されて表示されることが多くなりますので、改行時にアイコンが本文と一緒にならないようにtext-indentを指定しました。
このブロックのCSSタブで調整できますので、アイコンを変更した時などの寸法変更にも対応します。