Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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で背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

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

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

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

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

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

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

cssでテーブルの行間を広げる方法

  あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いてるので、読め …

no image

z-indexが効かない場合の解決法(relativeつけたのに効かない場合)

   どうもチャーさんです。   あなたはz-indexが効かないと困っていませんか? ちゃんとrelativeもつけてるのに、 なぜ効かないんだと悩んでいませんか?   この記事 …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

cssでテーブルをレスポンシブの縦並びにする方法

どうも、チャーさんです。   あなたはcssでテーブルをレスポンシブにし、 かつ縦並びにしたい、と思っていませんか?   この記事では、テーブルを縦並びにする方法を、 紹介していま …

最新記事

チャーさん

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

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

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