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

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

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

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

no image

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

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

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

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

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

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

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

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

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

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

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

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

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

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

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

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

no image

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

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

最新記事

チャーさん

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

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

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