表示位置を変えたい！CSSでpositionの使い方【初心者向け】現役エンジニアが解説
初心者でも分かるようにCSSで書くpositionの使い方について解説。relative, absolute, fixedと混同しやすい値を詳しく説明しています。実際の表示位置がどうなるのか確認してみましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
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ではできないんだよ。
なるほど、分かりました！
位置を調整するtop・bottom・left・right
positionで指定したHTML要素のボックスに対して、top・bottom・left・rightで位置の調整が行えます。
これらはstaticでは指定できないことにご注意ください。
以下のように記述します。
top: 位置;
right: 位置;
bottom: 位置;
left: 位置;
位置の部分には以下の中から1つを入力します。
auto：ブラウザにより自動的に指定されます。
数値：pxやemなど数値で幅などを指定します。
%値：%値を設定します。値は親ブロックの幅や高さに対する割合です。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
実際に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デザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
