見出し画像

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

提出したい最終課題

昨日の続きで、また「カバー部分」です。

文字の前後に(左側と右側に)を設置します。

普通の横線であれば、文字としての「-」でも良さそうですが、横線ではなく45度回転した線です。

ですので、やはり線を引かなければなりません。

しかし、これも調べなければわからないので、今まで作ったwebサイトを見てその部位のコードを調べます。

すると「border-top」で線の太さを決めて、それを疑似要素の「::before」と「::after」で設置すれば良さそうです。

そして45度の回転は「transform: rotate(45)」で良さそうです。

位置指定のために「position: absolute」の設定が必要です(親要素に「position: relative」も)。

これでカバーセクションは一応完成しました。

フォントサイズや設置位置が多少おかしい部分もありますが、最後に調整する事にして、本日の勉強も終了しました。

この記事が気に入ったらサポートをしてみませんか?