よくある質問のテンプレートの紹介
サイトを作成する時によくある質問は結構ページとして作成されます。
そんなよくある質問についてテンプレートを紹介させて頂きます。
通常のよくある質問
特に動きもないよくある質問
|
1 2 3 4 |
<dl class="faq"> <dt><span class="faq_span">クエスチョンの内容が入ります。</span></dt> <dd>回答が入ります。</dd> </dl> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.faq dt { padding: 10px; position: relative; display:flex; align-items: center; } .faq dt:before { content: 'Q'; font-size: 30px; margin:0px 20px 0px 0px; } .faq dd { padding: 10px; position: relative; margin:0px 0px 0px 0px; display:flex; align-items: center; } .faq dd:before { content: 'A'; font-size: 30px; margin:0px 20px 0px 0px; } |
表示サンプル
- クエスチョンの内容が入ります。
- アンサー回答が入ります。
動きのよくある質問
Qをクリックした際の動きを付けてみます。
「jquery.js」をダウンロード致します。
ダウンロード先
今回はCDNで読み込みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> <script type="text/javascript"> $(document).ready(function(){ $(".faq dt").on("click", function() { $(this).next().slideToggle(); }); }); </script> |
|
1 2 3 4 |
<dl class="faq"> <dt><span class="faq_span">クエスチョンの内容が入ります。</span></dt> <dd>アンサー回答が入ります。</dd> </dl> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.faq dt { padding: 10px; position: relative; display:flex; align-items: center; } .faq dt:before { content: 'Q'; font-size: 30px; margin:0px 20px 0px 0px; } .faq dd { padding: 10px; position: relative; margin:0px 0px 0px 0px; display:flex; align-items: center; display:none;/*最初は非表示*/ } .faq dd:before { content: 'A'; font-size: 30px; margin:0px 20px 0px 0px; } |
表示サンプル
- クエスチョンの内容が入ります。
- 回答が入ります。
アイコンのよくある質問
Qをクリックした際にアイコン表示を変更します。。
「jquery.js」をダウンロード致します。
ダウンロード先
今回はCDNで読み込みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> <script type="text/javascript"> $(document).ready(function(){ $(".faq dt").on("click", function() { $(this).next().slideToggle(); $(this).toggleClass("active"); //dtをクリックした際にクラスを付与 }); }); </script> |
|
1 2 3 4 |
<dl class="faq"> <dt>クエスチョンの内容が入ります。<span class="faq_icon"></span></dt> <dd>アンサー回答が入ります。</dd> </dl> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.faq dt { padding: 10px; position: relative; display:flex; align-items: center; } .faq dt:before { content: 'Q'; font-size: 30px; margin:0px 20px 0px 0px; } .faq dd { padding: 10px; position: relative; margin:0px 0px 0px 0px; display:flex; align-items: center; display:none;/*最初は非表示*/ } .faq dd:before { content: 'A'; font-size: 30px; margin:0px 20px 0px 0px; } .faq_icon:before{ content:"▼";/*自由に変えて下さい*/ margin:0px 0px 0px 10px; } .active .faq_icon:before{ content:"▲";/*自由に変えて下さい*/ margin:0px 0px 0px 10px; } |
表示サンプル
- クエスチョンの内容が入ります。
- アンサー回答が入ります。
