こんにちは、Autumn(オータム)です。
以前positionプロパティの基礎編ということで、positionプロパティの基本的な使い方の解説を行いました。
positionプロパティは、WEB制作で使用する頻度が高いプロパティの一つで、「position: relative;」「position: absolute;」以外の使い方もあります。
今回解説するのが「position: fixed;」で要素の位置を固定する方法を解説します。
「どういうときに使うの？」という声にも応えていきますので、ぜひ読んで頂けたら幸いです。
「position: fixed ;」 とは？
ホームページで画面をスクロールしてもヘッダー部分がずっと上に表示されたままになっているのを見たことがありませんか？
あれはヘッダー部分に「position:fixed;」をかけて位置を固定しているというカラクリなんです。
他にもヘッダーだけでなく、お問合せや資料請求ページに誘導するボタンを画面の左右に追従させたりすることもでき、ユーザーがアクションを起こしやすくする効果的なデザインにもなり得ます。
実践してみましょう
どういう感じなのか実例を元に説明します。
下記の例は青色のヘッダーに「position: fixed;」をかけ、下にスクロールしていってもヘッダーが追従してくるのが確認できます（ソースコードを非表示にした方が見えやすいです！）。
See the Pen
position: fixed; 実例 by Autumn (@regprvcd-the-animator)
on CodePen.
「position:fixed;」をつけた要素は、topやleftなどで固定する位置を上下左右に移動することもできます。
ちなみにですが、「position:fixed;」の場合、親要素に「position: relative;」をつける必要はありません。
まとめ
いかがだったでしょうか。Javascriptの技術を活用すれば、スクロールの途中からヘッダーが出てきて追従するようなアニメーションも作ることができます。
まずはHTML・CSSでできることをしっかり理解して、その後Javascriptを覚えるのが王道ですので焦らずにいきましょう。
少しずつできることが増えるとプログラミングもより楽しくなってきますので、コツコツ積み上げて一緒に成長していきましょう！
読んでいただきありがとうございました！
