開閉できることがわかりやすいように「質問」の右端に「＋」マークを追加します。
- ::after疑似要素
- 絶対配置
-
JavaScriptファイルの作成
疑似要素
・前回までで先頭にQやAを追加して見ました。今回は右端に「＋」マークを付けることで開閉できることがわかりやすいようにしていきましょう。
・今回使うのも前回と同じ疑似要素です。しかし今回は右端なのでafter疑似要素を使っていくことになります。
・まず前回と同様にdt::after{}のセレクタを作っていきます。その中にcontent: ‘+’;と書いていくと「＋」マークを質問のあとに付けることができます。
・詳しくは前回の記事を確認してみてください。
・しかしそれだけだと質問のあとにつくだけで右端にはきてくれません。右端に配置したい場合は絶対配置が必要になります。
絶対配置
・「＋」マークを表示させたが右端に持ってきたいので絶対配置で右に持ってきたいと思います。
・まずdtに対してpositionをrelativeに指定していきます。
・次にdt::after{}に対してpositionをabsoluteにしていきましょう。これで絶対配置になってくれます。
・あとは位置を決めていけばいいので上から８px、右から１６pxくらいのところで配置していきたいと思います。
・dt::after{}に対してtop: 8px;とright: 16px;を指定していけばいいですね。
・dt::after{}はこんな感じです。
dt::after {
content: ‘+’;
position: absolute;
top: 8px;
right: 16px;
}
・dtに対してposition: relativeを指定し忘れないようにしましょう。
JavaScriptファイルの作成
・では次回からJavaScriptを書いていくのでファイルを作成しておきましょう。
・HTMLファイルのbodyの閉じタグの直前で<script src=”js/main.js”></script>と書いていきましょう
・これはjsフォルダの中にmain.jsファイルを作ってねという内容になります。
・またbodyの閉じタグの直前に書くのはJavaScriptは重くなりがちなのでHTML・CSSを表示仕切ったあとに読み込んでもらうための措置です。
・VS Codeだとファイルを作るのは簡単で<script src=”js/main.js”></script>と書いたら”js/main.js”の部分にカーソルを持っていき、command + クリックで簡単に作ることができます。
・ポップアップでファイルが見つかりませんが新しく作りますかと表示されるので新しいファイルもしくはCreateFileをクリックします。
・ファイルが作成できたら内容を書いていきましょう。
・エラーチェックをしてもらうために先頭に’use strict’;と書いていきましょう。
・そして下に{}（波括弧）を書いてその中に次回以降JavaScriptを書いていきます。
