![見出し画像](https://assets.st-note.com/production/uploads/images/105727962/rectangle_large_type_2_7132549823b2ed7405a895e0fb6c143c.png?width=1200)
#66日目 TechAcademy「はじめての副業コース」
提出したい最終課題
昨日の続きで、また「カバー部分」です。
文字の前後に(左側と右側に)線を設置します。
普通の横線であれば、文字としての「-」でも良さそうですが、横線ではなく45度回転した線です。
ですので、やはり線を引かなければなりません。
しかし、これも調べなければわからないので、今まで作ったwebサイトを見てその部位のコードを調べます。
すると「border-top」で線の太さを決めて、それを疑似要素の「::before」と「::after」で設置すれば良さそうです。
そして45度の回転は「transform: rotate(45)」で良さそうです。
位置指定のために「position: absolute」の設定が必要です(親要素に「position: relative」も)。
これでカバーセクションは一応完成しました。
フォントサイズや設置位置が多少おかしい部分もありますが、最後に調整する事にして、本日の勉強も終了しました。