よくある質問のテンプレート
よくある質問のテンプレートの紹介
サイトを作成する時によくある質問は結構ページとして作成されます。
そんなよくある質問についてテンプレートを紹介させて頂きます。
通常のよくある質問
特に動きもないよくある質問
- クエスチョンの内容が入ります。
- 回答が入ります。
.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;
}
表示サンプル
- クエスチョンの内容が入ります。
- アンサー回答が入ります。
HTMLのsubとrubyタグの使い方
2月 6, 2025display: grid; の使い方を徹底解説!CSSグリッドレイアウトの基本と応用
2月 5, 2025CSSで作るシンプルなタイムラインデザイン
1月 30, 2025