FAQ・Q&A向けカードの作り方
FAQ・Q&A向けカードの作り方を紹介します。このサンプルでは、質問と回答をひとつのカード内へまとめて表示するシンプルなFAQ・Q&AをHTMLとCSSで実装します。アコーディオンのような開閉操作を使わず、質問と回答を最初から表示しておきたい場合に利用できます。
FAQページや料金ページ、サービス説明ページ、お問い合わせ前の案内など、質問と回答を分かりやすく整理して掲載したい場面に適しています。質問を見出し、回答を説明文として配置し、それぞれをカード形式で区切ることで、複数のQ&Aを見やすく並べられます。
HTMLでは質問と回答の文章を変更でき、CSSではカードの横幅、余白、背景色、枠線、角丸、影、文字サイズなどを調整できます。JavaScriptを使用しないため、質問と回答を常時表示するシンプルなFAQ・Q&Aとして導入しやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
よくある質問と回答をカード形式でまとめて表示します。
サンプルコードは自由に確認できます。実際に利用する場合は、事前に動作確認を行ってください。
このサンプルはHTMLとCSSだけで表示できるため、JavaScriptは必要ありません。
FAQページ、料金ページ、サービス説明ページ、お問い合わせ前の案内などに使えます。
質問と回答をひとつのカード内へまとめた、FAQ・Q&A向けカードの表示を確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>FAQ・Q&A向けカード</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- FAQ・Q&A全体 -->
<div class="faq-card_wrap">
<!-- タイトル -->
<div class="faq-card_title">
FAQ・Q&A向けカード
</div>
<!-- 説明文 -->
<p class="faq-card_text">
よくある質問と回答をカード形式でまとめて表示します。
</p>
<!-- FAQカード一覧 -->
<div class="faq-card_list">
<!-- FAQカード -->
<div class="faq-card_card">
<!-- 質問 -->
<div class="faq-card_question">
利用料金はかかりますか？
</div>
<!-- 回答 -->
<p class="faq-card_answer">
サンプルコードは自由に確認できます。実際に利用する場合は、事前に動作確認を行ってください。
</p>
</div>
<!-- FAQカード -->
<div class="faq-card_card">
<!-- 質問 -->
<div class="faq-card_question">
JavaScriptは必要ですか？
</div>
<!-- 回答 -->
<p class="faq-card_answer">
このサンプルはHTMLとCSSだけで表示できるため、JavaScriptは必要ありません。
</p>
</div>
<!-- FAQカード -->
<div class="faq-card_card">
<!-- 質問 -->
<div class="faq-card_question">
どんなページに使えますか？
</div>
<!-- 回答 -->
<p class="faq-card_answer">
FAQページ、料金ページ、サービス説明ページ、お問い合わせ前の案内などに使えます。
</p>
</div>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではFAQ・Q&Aとして表示する質問と回答をカード内に配置し、CSSではカード全体の横幅や余白、背景色、枠線、角丸、影、文字の見た目などを設定します。JavaScriptを使用せず、質問と回答を常に表示するシンプルなFAQ・Q&A向けカードです。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはFAQ・Q&A向けカードの内容を構成するファイルです。「FAQ・Q&A向けカード」のタイトル、説明文、各カード内の質問と回答を変更できます。質問と回答の組み合わせを用途に合わせて書き換えることで、料金案内、サービス説明、お問い合わせ前の案内などに利用できます。
style.cssはFAQ・Q&A向けカードのデザインを設定するファイルです。全体の横幅や余白、カードの背景色、枠線、角丸、影、質問と回答の文字色や文字サイズなどを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページを開くと、質問と回答が組み合わされたFAQ・Q&Aカードが表示されます。開閉操作はなく、すべての質問と回答を最初から確認できる構成です。
カスタマイズできる内容
index.htmlでは「FAQ・Q&A向けカード」のタイトル、説明文、各カードに表示する質問と回答を変更できます。「利用料金はかかりますか？」「JavaScriptは必要ですか？」「どんなページに使えますか？」の部分を書き換えることで、掲載するFAQの内容を用途に合わせて変更できます。
style.cssではFAQ全体の最大横幅、内側余白、背景色、枠線、角丸を変更できます。また、各カードの横幅、余白、背景色、枠線、角丸、影や、質問・回答の文字色、文字サイズ、行間なども調整できます。
数値調整
style.css
max-width:700px;
FAQ全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
FAQ全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
FAQ全体の内側余白です。値を大きくすると内容と外側の枠線との間隔が広がり、小さくすると狭くなります。
border-radius:18px;
FAQ全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
max-width:420px;
各FAQカードの最大横幅です。値を大きくするとカードが横に広がり、小さくするとコンパクトになります。
padding:28px;
各FAQカードの内側余白です。値を大きくすると質問・回答とカードの端との間隔が広がり、小さくすると狭くなります。
border-radius:14px;
各FAQカードの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 12px 28px rgba(15,23,42,.08);
カードの影です。12pxや28pxの値を変更すると、影の位置やぼかし具合を調整できます。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
line-height:1.8;
回答などの文章の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthにより、画面幅に合わせてFAQ全体とカードが縮小されます。また、640px以下ではFAQ全体をpadding:24px 18px;、カードをpadding:24px 20px;へ変更して左右の余白を抑えているため、スマートフォン・タブレット・PCで利用できます。
コメント