#64日目　TechAcademy「はじめての副業コース」

提出したい最終課題

カバー部分

昨日までやっていたカバー部分の続きです。

カルーセルは、切り替わるように設定できましたが、デザインカンプを見ると画像の下に「丸」●があります。

これをクリックすることで、2枚目の画像、3枚目の画像と表示することができるヤツです。

これの表示の仕方がわからず、ググってみるとJavaScriptファイルのカルーセルの記述の項目に「dots: true,」と入力すればよい事が分りました。

コーディングし実行すると、うまく表示されました😁

そして、カルーセルの画像の手前に文字を重ねる方法もわからなかったのでググりました。

画像と文字を同じdiv内に入れて、このdiv(=親要素)をposition: relativeにして、文字の要素をposition: absoluteにして、bottom:1rem;などとコード書いたらうまくいきました。

また、この文字は2行で表示し、その2行の背景（＝白）が分離するようにしなければなりません。

初めどうしてもこの2行の背景（白）がつながってしまいました。

そして、これは過去のカリキュラムで自分が作ったコードを参考にしました。

Pタグを二つ別でHTMLファイルで作成し、CSSでtopやbottomにmarginを入れる事でうまくできました。

今日はこれで終了にしました。