見出し画像

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

提出したい最終課題

質問部分

昨日の続きですが、すでにHTML,CSS,JavaScriptは出来上がっているところに、文章内容だけが異なる小セクションを二つ加えるだけで完成しそうです。

HTMLの小セクションをコピー&ペーストし、文章のみ書き換えました。

そして、再実行すると予定通りの表示ができました😁

もう一つの小セクションも同様に行い、この質問部分は完成しました。

フッター

そして、いよいよフッターまで来ました!

フッターを見てみると、ヘッダーのハンバーガーメニューで使用した「SNSのアイコン4つ(インスタグラム、YouTube、フェイスブック、ツイッター)」が横並びになっています。

背景の色のみ違うので、それはCSSのbackground-colorを変更すれば良さそうです。

⇒うまくいきました😊

その下には、ヘッダーで使用した文字列があったので、これもヘッダーをコピー&ペーストで一部修正し活用しました。

一番下には、新しい小さな文字列でしたので、これは新たにコーディングしました。

これでスマホ版は完成です!

と思いながら、念のため画面の幅を少しずつ広げていってみると、疑似要素「::before」「::after」を使用して描写した線のうち、「::before」の線がズレていきます。

これもいろいろと調べ考えて、解決できました。

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