css

cssで要素の位置調整をする方法を丁寧に解説コピペもok

投稿日:

Pocket

うも、チャーさん(@chaa___san)です。

 

あなたはcssで画像やdivで作った要素の位置調整を、

したいと思っていませんか?

 

この記事ではcssでそれらの要素の位置調整を、

する方法を書いております。

 

なのでこの記事を読めば、

あなたはcssで要素の位置調整ができるようになります。

 

あなたが画像や要素をあなたの好きな位置に、

置きたい動かしたい、と思っているのならば

このままスクロールして読んでみてください。

 

スポンサードサーチ

cssで位置調整を行うには

 

で、まず結論から話します。

 

画像やdivなどの位置調整をしたい場合、

position:absolute;

を使いましょう。

 

 

理由は簡単でして、position:absolute;を使うと、

あなたが設置したい場所に要素(画像やdivなどの要素)を、

移動させることができるからです。

 

まぁとはいえ文章でみても、

イメージつきにくいと思いますので、

まずは画像で具体例を見せます。

 

 

と言うことで以下の画像をみてください。

 

この画面にあるピンク色のボックスを、

右下の方に移動させたいとします。

 

 

 

で、この記事冒頭で紹介した、

position:absolute;を使ってみましょう。

 

 

 

じゃん!

 

こんな風にピンクのボックスの位置を、

右下に持ってくることができましたね!

 

こんな風に、

position:absolute;を使うと、

あなたが設置したい場所に要素を動かせるのです。

 

スポンサードサーチ

cssで位置調整したい場合の記述の仕方

 

で、このposition:absoluteの機能を、

わかっていただいたところで、

どうやって書けばいいかそれを説明します。

 

1要素を準備しよう

 

まず1番目に、

位置を調整したい(動かしたい)要素を、

準備しましょう。

 

この記事の例のようにdivで作ったボックスであったり、

またはimg srcで表示させた画像だったり、

位置を調整したいものを用意しましょう。

 

2セレクタを選びcssを書きましょう

 

そして2番目に、cssを書きましょう。

まずはセレクタを選び、

そしてそこにposition:absolute;と書きましょう。

 

テンプレ的には、

セレクタ{

position:absolute;

}

 

でして、具体的には、

この記事の例で言うと、

 

.box {

position:absolute;

}

になります。

 

 

補足ですが、

 

この.boxと書いてある部分(セレクタという)の部分には、

divなどにつけたクラス名を書いておいて、

それを指定すると、動かしたいものを位置調整しやすいです。

 

3位置情報を指定する

 

で次に、位置調整をするために、

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>

 

4目で見て微調整をしよう

 

そして手順の最後ですが、

実際に数値を入れてみたら、

あとは微調整をしましょう。

 

実際にブラウザにあなたが書いたコードを、

表示させて、あなたが意図した位置にあるか、

それを確認しましょう。

 

 

理由は数値だけだと結構位置が思ったとこに、

行かないので、実際にあなたの目でみて、

調整してみてください。

 

スポンサードサーチ

まとめ

 

ということで、

cssで位置調整を行いたいですが、

それをするにはposition:absolute;を使いましょう。

 

これを使えばあなたの意図したとこに、

要素(画像やdiv)を設置できます。

 

 

また、これは実際にあなた自身でコードを書いて、

実際に動いてるやつをみると、

より上達しますので、ぜひ実践してみてください。

 

それでは、読んでもらってありがとうございました。

 

チャーさん(@chaa___san)

-css


スポンサードサーチ

関連記事

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。