【CSS】positionプロパティを使ってかっこいいサイトを作ろう！
こんにちは。あいりすです！
現在お仕事の方で初のコーディングの作業をしております。
Webサイトというよりはアプリのようなデザインなので、少しイレギュラー？なデザインって感じでした。
そのおかげで、今まで使ったことない（正しくは使うのを避けていた）positionプロパティをガンガン使うことになりました。
わたしもまだまだ初心者レベルから脱することができていない身ではありますが、
昨年転職のためにポートフォリオをだらだら作っていたときにしっかり勉強して使ってみるべきだったと、今更になって大変後悔しております。
しっかり理解して適切な使い方をすればかっこいいサイトが作れること間違いなしだと思うので、現在ポートフォリオを作成中の方にもぜひ知っていただきたいなと思います。
このサイト、たまたま見つけたのですがすごくかっこいいし、こんなの作れたらすごいなぁと思ったので載せておきます！
もちろんpositionプロパティを使用していたので、検証ツールでぜひ探してみてください。
それでは本題です。
まず、positionプロパティには指定できる値がstatic・relative・absolute・fixedの４つがあります。
１. static→デフォルトの値。配置の方法を指定しないとき（CSSをになにも指定していないとき）はこれ。ちなみにこの状態だと重なりを指定する「z-index」も使用することができない
２. relative→相対位置への配置。staticの位置（本来表示されるべき位置）を基準に相対的に配置される。top・bottom・left・rightと併用して位置を指定します。
３. absolute→staticの位置を基準にするrelativeと違い、absoluteは親要素を基準とする。top・bottom・left・rightと併用して位置を指定します。
４. fixed→スクロールしてもヘッダーが固定されているっていう、あれ。ちょっと面倒なところがあるので後ほど詳しく説明します！top・bottom・left・rightと併用して位置を指定します。
ざっとこんなはたらきをします。
１つずつ説明していきます。
１. static
普通にしていたら指定することはないと思いますが、可能性があるとしたらPCやスマホで違うデザインにするときに
指定していたものを解除したいときに使うんじゃないかと思います（適当）
２. relative
absolute・fixedを指定するためには、その指定する要素の親要素にこのrelativeを指定しなければいけません。
relativeとして位置指定するというのは個人的にはあまり使い所がなさそうだなぁと今の所思っています。個人的には。
理由は、親要素を基準にするabsoluteの方がどこに指定されるかわかりやすいからです。
が、こんなことを言っているからいつまでも初心者のままなんです。
しっかり考えながら使い所を見極める必要がありそうです。
３. absolute
これは今回サイト制作をするにあたり一番使用しました。
親要素を基準にして位置を決める、というところがrelativeと違うところです。
z-indexと併用すれば本当に様々な使い方があるので、いろいろ試してみるのがいいと思います。
４. fixed
こちらはWebサイト制作のなかでも特にヘッダーを作るときにはほぼ必ず使用するのではないのでしょうか。
また、画面の端の方にある「資料請求はこちら」「ページのトップに戻る」などのボタンもこれを使えば作れます。
しかし少々厄介なところがあります。
図と一緒に説明します！
このようなサイトを作りたいとします。
緑色の部分がヘッダーで、スクロールしたときに固定させたい部分（fixedを指定する部分）とします。
ピンクの部分がメインエリアとします。
この状態で緑のヘッダーの部分にposition:fixedを指定します。
すると…
こうなってしまいます。
ヘッダーは固定されているのですが、下のメインエリア（ピンクのところ）がヘッダーの下に入り込んでしまいました。
イメージ的には、fixedを指定すると、指定された要素は「浮く」感じになります。
浮いた分、下のメインエリアがヘッダーの高さ分上に詰めてしまったので、こんな風に重なってしまう、ということが起こります。
対処法は、ヘッダーの高さと同じ分、メインエリアのtopにmarginやpaddingを指定するだけです。
以上、positionプロパティの説明を、実際扱ってみての感想も交えながらでお伝えしました。
工夫と応用しだいでかっこいいサイトが作れる素晴らしいプロパティだと思います。
また、こちらの記事もぜひ読んでみて下さい。↓
というかわたしのこんなアウトプットはもういいのでこちらの方を読んで下さい！ｗ
それでは今回はここまで！
読んでくださりありがとうございました。
