HTML_CSS
Googleでログイン問題8：固定ヘッダーを作成しよう
今回の問題は、スクロールしても上部にヘッダーが固定されるというものです。
動画を参照してください。
※スクロールできるようにbodyタグにheightで高さをとりましょう。
例: body {height: 2000px;}
動画を参照してください。
※スクロールできるように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; を使用しました。
ヘッダー以外にも、バナー広告やCVボタン、SNSリンクなどの常時固定に様々なサイトで用いられています。
今後Web制作を行なう上で必ず使用してくるプロパティなので覚えておきましょう。
また技術的な部分だと、position: fixed;を指定すると要素は浮いた状態になります。
位置を指定する際はtop,right,bottom,leftを使用して設定するようにしましょう。
ヘッダー以外にも、バナー広告やCVボタン、SNSリンクなどの常時固定に様々なサイトで用いられています。
今後Web制作を行なう上で必ず使用してくるプロパティなので覚えておきましょう。
また技術的な部分だと、position: fixed;を指定すると要素は浮いた状態になります。
位置を指定する際はtop,right,bottom,leftを使用して設定するようにしましょう。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
横いっぱいに広げるためにwidth: 100%;も忘れないようにしましょう。