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

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

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

完成図

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

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

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

1. CSSウィンドウでpositionプロパティを使い、#headerの位置を固定する(sticky)と宣言する。
2. CSSウィンドウでtop(上からの距離)プロパティを使い、#headerのウィンドウ上部からの距離を0(=0px)と宣言する。