ログイン

問題8 固定ヘッダーを作成しよう

HTML_CSSの問題

HTML_CSS

固定ヘッダーとは、Webサイトなどでスクロールをしても常時で表示されているヘッダーのことです。ヘッダーが常時表示されていることで、UI/UXの向上に繋がります。

固定ヘッダーを作成しよう

問題

今回の問題は、スクロールしても上部にヘッダーが固定されるというものです。
動画を参照してください。

※スクロールできるようにbodyタグにheightで高さをとりましょう。
例: body {height: 2000px;}

自分の環境に書くコード

              <header>ロゴ</header>
¥HTML¥
            

期待する画面

コードのアイコン

解答ソースコード

              <body>
    <!-- -----ここから下に記述してください----- -->
  <header>ロゴ</header>
</body>
¥HTML¥
            
              body {
  overflow-y: scroll;
  height: 2000px;
  background: #ccc;
}

header{
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  text-align: center;
  padding: 20px 0;
  color: #fff;
  font-size: 20px;
  background-color: #00a2d4;
}
¥CSS¥
            
答えのアイコン

解説

position: fixed;というプロパティを使うことで位置を固定できます。

横いっぱいに広げるためにwidth: 100%;も忘れないようにしましょう。
ログインして解答を見る
要素を固定するにはposition: fixed; を使用しました。
ヘッダー以外にも、バナー広告やCVボタン、SNSリンクなどの常時固定に様々なサイトで用いられています。
今後Web制作を行なう上で必ず使用してくるプロパティなので覚えておきましょう。

また技術的な部分だと、position: fixed;を指定すると要素は浮いた状態になります。
位置を指定する際はtop,right,bottom,leftを使用して設定するようにしましょう。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!