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

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

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

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

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

no image

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

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

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

cssで見出しに画像を表示させる方法「簡単にできる」

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

no image

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

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

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

最新記事

チャーさん

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

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

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