どうも、チャーさん(@chaa___san)です。
あなたはcssで画像やdivで作った要素の位置調整を、
したいと思っていませんか？
この記事ではcssでそれらの要素の位置調整を、
する方法を書いております。
なのでこの記事を読めば、
あなたはcssで要素の位置調整ができるようになります。
あなたが画像や要素をあなたの好きな位置に、
置きたい動かしたい、と思っているのならば
このままスクロールして読んでみてください。
スポンサードサーチ
目次
cssで位置調整を行うには
で、まず結論から話します。
画像やdivなどの位置調整をしたい場合、
position:absolute;
を使いましょう。
理由は簡単でして、position:absolute;を使うと、
あなたが設置したい場所に要素（画像やdivなどの要素)を、
移動させることができるからです。
まぁとはいえ文章でみても、
イメージつきにくいと思いますので、
まずは画像で具体例を見せます。
と言うことで以下の画像をみてください。
この画面にあるピンク色のボックスを、
右下の方に移動させたいとします。
で、この記事冒頭で紹介した、
position:absolute;を使ってみましょう。
じゃん！
こんな風にピンクのボックスの位置を、
右下に持ってくることができましたね！
こんな風に、
position:absolute;を使うと、
あなたが設置したい場所に要素を動かせるのです。
スポンサードサーチ
cssで位置調整したい場合の記述の仕方
で、このposition:absoluteの機能を、
わかっていただいたところで、
どうやって書けばいいかそれを説明します。
１要素を準備しよう
まず１番目に、
位置を調整したい(動かしたい)要素を、
準備しましょう。
この記事の例のようにdivで作ったボックスであったり、
またはimg srcで表示させた画像だったり、
位置を調整したいものを用意しましょう。
２セレクタを選びcssを書きましょう
そして２番目に、cssを書きましょう。
まずはセレクタを選び、
そしてそこにposition:absolute；と書きましょう。
テンプレ的には、
セレクタ{
position:absolute;
}
でして、具体的には、
この記事の例で言うと、
.box {
position:absolute;
}
になります。
補足ですが、
この.boxと書いてある部分(セレクタという)の部分には、
divなどにつけたクラス名を書いておいて、
それを指定すると、動かしたいものを位置調整しやすいです。
３位置情報を指定する
で次に、位置調整をするために、
top、left、right、bottomに数値を書きましょう。
理由は、これが実際に位置調整を、
行ってくれるからです。
例えば以下の画像の、position:absolute;
の下をみてください。
bottom:100px;
right:100px;
と書いていますね。
これを翻訳すると、
右から100px、下から100pxの位置に、
表示せよ。
という内容になってます。
わかりやすい覚え方としては、
数字を大きくすればするほど、
スペースが大きくなると思ってもらっていいです。
例えば、これをbottom:200px;にしてみましょう。
すると、以下のようになります。
ピンクの箱がさっきの画像よりも、
ちょっと上の方に移動しましたね。
このように数値を大きくすると、
その分だけ移動してくれるという動きをするのです。
ちなみにこの例では、
bottom、right、を使って紹介しましたが、
topもleftも同じ動きをします。
例えばtop:100px;とかくと、
上から100px分下に動きますし、
left:100px;と書くと、左から100px分移動します。
この辺は実際にコードを書いてみると、
体感的に掴めます。
なので以下のコードをエディターにコピペして、
bottom:100px;、right:100px;の部分を、
いじって好きな数値入れてみてください。
練習用コード
<html>
<head>
<style>
.box {
width:300px;
height:300px;
background-color:pink;
position:absolute;
bottom:200px;
right:100px;
}
</style>
</head>
<body>
<div class=”box”>
</div>
</body>
</html>
４目で見て微調整をしよう
そして手順の最後ですが、
実際に数値を入れてみたら、
あとは微調整をしましょう。
実際にブラウザにあなたが書いたコードを、
表示させて、あなたが意図した位置にあるか、
それを確認しましょう。
理由は数値だけだと結構位置が思ったとこに、
行かないので、実際にあなたの目でみて、
調整してみてください。
スポンサードサーチ
まとめ
ということで、
cssで位置調整を行いたいですが、
それをするにはposition:absolute;を使いましょう。
これを使えばあなたの意図したとこに、
要素(画像やdiv)を設置できます。
また、これは実際にあなた自身でコードを書いて、
実際に動いてるやつをみると、
より上達しますので、ぜひ実践してみてください。
それでは、読んでもらってありがとうございました。
チャーさん(@chaa___san)
