よくある質問のテンプレート

Posted on by

よくある質問のテンプレートの紹介

サイトを作成する時によくある質問は結構ページとして作成されます。
そんなよくある質問についてテンプレートを紹介させて頂きます。

通常のよくある質問

特に動きもないよくある質問



 	
クエスチョンの内容が入ります。



 	
回答が入ります。







.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で読み込みます。

  

    




 	
クエスチョンの内容が入ります。



 	
アンサー回答が入ります。







.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で読み込みます。

  

    




 	
クエスチョンの内容が入ります。



 	
アンサー回答が入ります。







.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;
}

表示サンプル


クエスチョンの内容が入ります。
アンサー回答が入ります。