レイアウトで遊んでみよう 課題3 位置固定レイアウト

課題3 「位置固定レイアウト」

課題3でがは、サイトのヘッダーなどでよく見られる位置固定レイアウトを実現しましょう。
ページをスクロールしても上部や下部に固定されるヘッダーやフッターをよく見かけますが、こちらも簡単に実装できます。
完成図は以下です。

完成図

以下のウィンドウ右上の「EDIT ON CODEPEN」をクリックしてページを開き、PenをForkして保存し、
上記「位置固定レイアウト コーディング手順説明」を参考に課題を行い提出しましょう。

See the Pen コーディング応用:位置固定レイアウト by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

位置固定レイアウト コーディング手順説明

1. HTMLウィンドウ・CSSウィンドウを使い、flex-containerを箱、flex-itemを積み木として逆さ積み木を作る。