【意外と簡単です】CSSのpositionの使い方
CSSのプロパティに「position」というものがあるのをご存知でしょうか。
これはHTML要素をどのように配置するかを決めるためのプロパティです。
画面をレイアウトする時に使われます。
CSSを触っている人はだいたい使ったことがあるか調べたことがあるかと思います。
ただこのposition、僕はCSSを書き始めた頃とっつきにくいなっていう印象がありました。下手に触ったら画面が崩れちゃって焦ったりしました。。
そこで今回はpositionの使い方をまとめようと思います。
これを読んだ後のあなたはpositionを自由自在に使える、はず。
positionの値は全部で5種類
今のところ使える値は以下の5つです！
（CSSの仕様は変わることがあるので、そのうち増えるかもしれません。）
- static：配置を指定しません。初期状態です。
- relative：相対位置に配置します。
- absolute：絶対位置に配置します。
- fixed：位置を固定します。
- sticky：スクロールの途中から位置を固定します。
ではそれぞれ使い方をみてみましょう。
staticの使い方
特に配置を指定しません。positionを書かないのと同じ状態です。
positionは通常、topプロパティ、bottomプロパティ、leftプロパティ、rightプロパティと併用して使われますがstaticを指定した時はこれらのプロパティを書いても効果がありません。
実際に見てみましょう。
HTML
<html>
<head>
<style>
.box1 {
width: 400px;
height: 300px;
background: lightblue;
}
.testbox {
width: 100px;
height: 100px;
background: blue;
position: static;
top: 20px;
}
</style>
</head>
<body>
<div class="box1">
<div class="testbox"></div>
</div>
</body>
</html>
薄い青色のbox1の中に濃い青色のtestboxを配置しました。
positionをstaticにしていますが、これは書かなくても同じ配置になります。
なぜならHTMLは通常、親要素の左上から順に配置されるためです。
そしてtopプロパティに20px、つまり基準となる上位置から20px分空けるという設定を書きましたが、positionがstaticなのでこの設定は効いていません。
relativeの使い方
では上のソースコードに対してpositionを「relative」にしてみましょう。
CSS
.testbox {
width: 100px;
height: 100px;
background: blue;
position: relative; ←ここを変えました
top: 20px;
}
濃い青色のtestboxがちょっと下に移動しましたね。
top: 20pxが効いている証拠です。本来配置される位置の上に20px分の余白を空けたのです。
ちなみに色を変えたボックスをもう一個書くとこうなります。
HTML
<div class="box1">
<div class="testbox"></div>
<div class="testbox2"></div>
</div>
CSS
.testbox2 {
width: 100px;
height: 100px;
background: rgb(225, 0, 255);
position: relative;
left: 20px;
}
紫色のtestbox2を用意しました。
同じrelativeのボックスですが、top: 20pxの設定は削除してleft: 20px;を追加しました。
leftプロパティは基準となる左位置からどれくらい移動させるかを設定するプロパティです。
本来は青いボックスと同じ並びで配置されますが20px分空いています。
そして、青いボックスと紫のボックスはちょっと位置が被ってますよね。
紫のボックスは基準位置に配置されているのですが、青のボックスは「top: 20px;」によって、基準位置から下に20pxずれているので20px分位置が被っていることになります。
relativeの使い方は以上です。
ちなみに基準位置についてですが、
HTMLにはインライン要素とブロック要素があります。
インライン要素はHTMLに書かれる文章などに使われるタグです。
ブロック要素は箱のようなイメージでHTML要素を一つのかたまりにするために使われます。
インライン要素は左から右に配置されていきます。
ブロック要素は上から下に配置されていきます。
総じて、HTMLでは書かれたタグの順番に左上から右下に向かって配置をされていきますが、要素の種類によって配置の仕方が少し変わります。
これがHTMLでの基準となる配置の仕方です。
以下のサンプルを見てください。
HTML
<body>
<a href="#">リンク</a>
<strong>強調表示</strong>
<div class="testbox"></div>
<p>段落</p>
<span>spanタグはインライン要素界のdivタグのようなものです</span>
<div class="testbox"></div>
</body>
インライン要素とブロック要素を混ぜこぜにして表示しました。
aタグとstrongタグはどちらもインライン要素です。
そのため、横に並んで表示されています。
次はdivタグですが、こちらはブロック要素なのでインライン要素の下に配置され、次に来る要素も下に配置されます。
次のpタグはブロック要素なので次の要素は下に配置されます。
次のspanタグはインライン要素ですが、次がブロック要素であるdivタグなので下に配置されます。
このようにインライン要素、ブロック要素の配置ルールを覚えておくと、思ったとおりにWebページをレイアウトする助けになります。
absoluteの使い方
relativeプロパティは相対位置で配置しますが、absoluteは絶対位置で配置します。
relativeでは基本的には基準位置で表示されていきますが、absoluteではそれを無視して、top/bottom/left/rightプロパティで指定された場所に配置します。
HTML
<html>
<head>
<style>
.box1 {
width: 300px;
height: 300px;
background: lightblue;
}
.box2 {
width: 100px;
height: 100px;
background: blue;
position: absolute;
right: 0px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
薄い青のbox1の中に濃い青のbox2を配置しましたが、なんとbox1をはみ出してブラウザの右端に配置されています。
これがabsoluteの効果です。
absoluteはpositionにstatic以外が設定されている親要素を基準位置とします。
box2の親要素であるbox1にはpositionが設定されていません。
つまりpositionがstaticであるのと同じです。
よって、box1は無視されてその親であるbodyタグ、つまりブラウザのウィンドウ全体を基準位置とします。
box2には「right: 0px;」の設定があるので、右端から0px離す、つまり右端いっぱいに寄せるということになります。
ではbox1の右端に寄せたい場合はどうしましょう。
box1をrelativeにしましょう。
CSS
.box1 {
width: 300px;
height: 300px;
background: lightblue;
position: relative;←これ追加
}
box1が基準になって、box1の右端に配置されました。
absoluteは親要素の具合を確認しないととんでもないところに配置されるのでビックリするかもしれませんが、思ったとおりの配置になっていない時は親要素のpositionを確認しましょう。
fixedの使い方
fixedプロパティは配置を固定したい場合に使います。
fixedが設定された要素はいくらスクロールしても位置が変わりません。
固定したヘッダーを作りたい時などに使われます。
HTML
<html>
<head>
<style>
.box1 {
width: 300px;
height: 20px;
background: black;
position: fixed;
}
.box2 {
width: 300px;
height: 500px;
background: lightcoral;
}
.box3 {
width: 300px;
height: 500px;
background: lightgreen;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
今度はbox1(黒)、2(赤)、3(緑)の3つを用意しました。
box1に「position: fixed;」を設定しています。
画面を下にスクロールしてみましょう。
スクロールされて緑のbox3が見えてきましたが黒のbox1は画面に表示されたままです。固定されているのがわかります。
注意点があります。box1をちょっと右にずらしてみましょう。
CSS
.box1 {
width: 300px;
height: 20px;
background: black;
position: fixed;
left: 50px; ←ここ追加
}
ご覧のとおり、box2がbox1に食い込んでいますので、もしここに文章などのコンテンツがあってもbox1に隠れて見えないことになってしまいます。
これを防ぐにはbox2の中身に余白を空けるなどの対応をしなければなりません。
例えばbox2に「padding-top: 20px;」を追加すると上に20px分の余白を空けることができます。
CSS
.box2 {
width: 300px;
height: 500px;
background: lightcoral;
padding-top: 20px;←ここ追加
}
上に余白を持たせたのでその分、文字が下に下がりましたね。
ちなみにpadding-topはボックスの中身上辺に余白を空けるプロパティになります。
stickyの使い方
fixedはスクロールしても表示位置を固定するプロパティでした。
固定系のプロパティとしてもうひとつ、stickyというものがあります。
こちらはスクロールして指定された位置に来たら固定するプロパティになります。
実際に見てみましょう。
HTML
<html>
<head>
<style>
.box1 {
width: 300px;
height: 500px;
background: lightblue;
}
.box2 {
width: 300px;
height: 500px;
background: lightcoral;
}
.box3 {
width: 300px;
height: 50px;
background: black;
position: sticky;
top: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
3種類のdivタグを5つ用意しました。
真ん中にある黒いボックス（box3）に対してstickyを設定しました。
「top: 50px」も併せて設定しています。
上の動画を見てお分かりと思いますが、スクロールをして黒いボックスが表示されたら上から50px分離れたところで位置が固定されました。
stickyはブログサイトのサイドバーとかに使われているのをたまに見かけます。
スクロールして流れて欲しくないコンテンツがあれば使ってみるといいでしょう。
まとめ
以上、positionプロパティの使い方を紹介しました。
なんとなくわかったでしょうか。
使い方を覚えるには実際に書いてみるのが手っ取り早いです。よかったら試してみてください。
したっけ！
- positionには「static」「relative」「absolute」「fixed」「sticky」がある。
- positionを使う時は「top」「bottom」「left」「right」プロパティと併用して表示する位置を決める。
- staticはpositionを書いていないのと同じ。topなどのプロパティは効かない。
- relativeはstaticと同じ位置で表示するが、topなどのプロパティで位置を修正することができる。
- absoluteはrelativeな親要素の左上を基準に絶対位置を指定できる。
- fixedは位置を固定する。
- stickyはスクロールの途中で位置を固定する。
本格的にプログラミングを学びたいですか？ITのエンジニアになりたいですか？
IT業界は万年人手不足であり、ニーズがあります。
パソコンとインターネットがあれば場所を問わず仕事ができるので、リモートワークが普及しつつある現代にマッチした職種と言えると思いますし、
物理的に必要なものはパソコンぐらいなので初期投資にかかる費用も少なく、人並みに仕事ができればフリーランスになって会社依存を脱却することもできます。
身につけた技術は一生モノです。
もし本腰を入れて勉強したいという方はスクールに入るのも一つの手です。
いくつか紹介しますので、興味があればサイトを覗いてみてください。
TechAcademy
最短4週間で未経験からプロを育てるオンライン完結のスクールです。 どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。
TechAcademyのサイトへ
Want to learn programming in earnest? Want to be an IT engineer?
The IT industry is understaffed for many years and has needs.
If you have a computer and the Internet, you can work anywhere,
so I think it can be said that it is a job type that matches the present age when remote work is becoming widespread.
The initial investment cost is low, and if you can work like a normal person, you can become freelance and get rid of your dependence on the company.
The skills that you have acquired is something that will last a lifetime.
If you want to study in earnest, you can go to school.
I will introduce some of them, so if you are interested, please take a look at the site.
DMM WEBCAMP
This is a programming school for those who are serious about changing jobs. guarantee a job change, so it is recommended for those who are inexperienced and are looking for a job change in the IT industry!
move to DMM WEBCAMP
TechAcademy
It is an online school that trains professionals from inexperienced in a minimum of 4 weeks. You can learn programming and app development at home without having to go anywhere.
move to TechAcademy