表示位置を変えたい！CSSでpositionの使い方【初心者向け】現役エンジニアが解説
初心者でも分かるようにCSSで書くpositionの使い方について解説。relative, absolute, fixedと混同しやすい値を詳しく説明しています。実際の表示位置がどうなるのか確認してみましょう。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
監修してくれたメンター
吉﨑 智正
CSSのpositionの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
CSSで位置の調整をする場合には、このpositionというプロパティを理解しておく必要があります。
positionは複雑なCSSを書かなくてもよく使うので、初心者の方でも覚えておくと良いでしょう。
最初は混同しやすいので、自分で表示位置を変えるコードを書いてみることをおすすめします。
目次
そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。
動画の解説はこちら
ここではpositionプロパティの使い方を練習してみよう。
田島メンター！！positionは何に使うんですか～？
positionは要素の配置の基準位置を決めるプロパティだよ。普段何も設定していない場合に配置される場所を相対位置、逆に本来ある場所と関係なく画面内の好きなところに配置することを絶対位置というんだ。
自分の思い通りの場所に要素を配置をしたいときに必要になりそうですね。よろしくお願いします！
positionとは
positionは各要素の配置に関する基準を設定するプロパティです。
その要素が本来ある位置を基準とする方法(相対位置)や、直接配置場所を設定して配置する方法(絶対位置)を選ぶことができます。
positionの書き方
positionプロパティはHTML要素のボックスの配置方法を指定します。
以下のように記述します。
position: 値; 配置指定プロパティ(static以外の場合);
値の部分には、以下の中から1つを入力します。
static：配置方法を指定せず、場所も指定しません。(初期値)
relative：相対位置から配置を指定します。
absolute：絶対位置から配置を指定します。
fixed：絶対位置から配置を指定し、画面をスクロールしても固定されます。
相対位置では本来配置される場所を基準とし、そこから位置を決定します。
絶対位置では親要素に指定されているpositionの値、それがない場合は画面の一番左上が基準位置です。
初期値のstaticでは配置位置を指定するプロパティ(top,bottom,left,rightなど)は使用できません。
相対位置のrelativeで基準となる場所は、初期値であるstaticで配置される所です。
HTML要素のボックス間で少し配置を変更する場合はrelative、absoluteはページ内で位置を固定したいとき、fixedはウィンドウ内でメニューなどの位置を固定したい場合に使われます。
positionの基本的な書き方になるよ。
初期値のstaticと、relativeはどう違うんですか？
staticとrelativeの違いは、その場所からさらに位置を指定できるかどうかだね。relativeではtopやbottomなどの位置指定ができるんだけど、staticではできないんだよ。
なるほど、分かりました！
[PR] HTML/CSSで挫折しない学習方法を動画で公開中
位置を調整するtop・bottom・left・right
positionで指定したHTML要素のボックスに対して、top・bottom・left・rightで位置の調整が行えます。
これらはstaticでは指定できないことにご注意ください。
以下のように記述します。
top: 位置;
right: 位置;
bottom: 位置;
left: 位置;
位置の部分には以下の中から1つを入力します。
auto：ブラウザにより自動的に指定されます。
数値：pxやemなど数値で幅などを指定します。
%値：%値を設定します。値は親ブロックの幅や高さに対する割合です。
実際にpositionを書いてみよう
値：relativeの場合
positionの値にrelativeを入力した場合の例です。
(※CSSとHTMLが同じディレクトリ内にあり、CSSのファイル名が”sample.css”であるものとします)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<img src=”photo1.png”>
<p class=”content1″>relativeの場合のテキスト位置</p>
</body>
</html>
CSS
p.content1 {position: relative; top: 0; }
画面ではこのように表示されます。
画像の次の段落、元々テキストが配置される場所が基準です。(相対位置)
値：absoluteの場合
positionの値にabsoluteを入力した場合の例です。
(※CSSとHTMLが同じディレクトリ内にあり、CSSのファイル名が”sample.css”であるものとします)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<img src=”photo1.png”>
<p class=”content1″>absoluteの場合のテキスト位置</p>
</body>
</html>
CSS
p.content1 {position: absolute; top: 0; }
画面ではこのように表示されます。
親要素がないため、画面の一番左上が配置の基準となっています。(絶対位置)
値：fixedの場合
fixedを値に設定した場合はabsoluteと同様に絶対位置として配置され、なおかつ画面をスクロールしてもその要素の場所は固定されます。
以上、CSSのpositionを実際に使いながら説明してきました。
「relative」と「absolute」は最初のうちは理解が混同してしまったりしますが、自分で書いているうちに慣れるでしょう。
とてもよく利用するのでぜひ覚えておきましょう。
それぞれの値と、どのように基準位置が決まるかを見てみました。
fixedの場合は画面をスクロールしても要素がずっとついてくるんですね。何だか不思議な感じです。
fixedは常に表示させたいメニューバーなどにも使うことができるね。各値の特徴と表示位置をよく理解しておこう。
色々活用してみたいです。ありがとうございました！
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
