質問と回答がわかりやすいように先頭にQやAをつけていきます。
- 疑似要素
- プロパティ
- スタイリング
疑似要素
・前回までで簡単なスタイリングをしていきました。
・今回はさらに見やすくするために質問と回答の前に「Q」や「A」をあらかじめ入れておきたいと思います。
・今回使っていくのは疑似要素です。先頭に付けていくのでbefore疑似要素を使っていきたいと思います。
・セレクタはdtが質問でddが回答なので質問はdt::before{}としていき、回答はdd::before{}としていきましょう。
プロパティ
・プロパティはcontentをを使って、値は’’の中に書いていきましょう今回の場合、dtの方はQを入れたいので’Q. ’と書いておきます。
・このとき.や空白を入れておくとそのまま文字列として反映してくれるので必要であれば入れてもいいでしょう。
・同様にddの方もcontent: ‘A. ‘;としていきます。
・まとめるとこんな感じで書いけます。
dt::before {
content: 'Q. ';
}
dd::before {
content: 'A .';
}
スタイリング
・これまでで先頭にQやAがつけられたと思います。今度はもう少し細かいスタイリングをしていきます。
・まずはAを表示しないようにしていきます。初期値ではAは隠した状態になっていてQをクリックしたらAが表示されるようにJavaScriptで書いていくのでまずは消しておきます。
・やり方は単純でddに対してdisplay: none;と書いていきましょう。これで表示されない状態になります。
・次にQをクリックしたらAを表示したいのでクリックできることがわかりやすいようにホバーしたらマウスカーソルがクリックできることがわかる形に変えておきましょう
・dtにcursor: pointer;を追加しておきましょう。
・最後にクリックするとテキストが選択されてしまうので選択されないようにしておきましょう。
・これは質問はクリックするものでクリックしたら毎回選択されてしまうのでユーザーが不快にならないための配慮です。
・dtに対してuser-select: none;としてあげればいいでしょう。
・今回スタイリングのために使ったdtやddはもともと前回作った方のセレクタなので間違えないようにしましょう。
・dtとdt::beforeは目的も意味合いも全く違うので分けて考えるといいです。