【CSS】positionを徹底解説!簡単Webレイアウト入門


【CSS】positionを徹底解説!簡単Webレイアウト入門

この記事では、要素を好きな位置に固定・移動するプロパティ”position”について解説しています。

  • 「positionってどんなときに使うの?」
  • 「positionを使ったWebレイアウトを知りたい」

positionは使い勝手がとても良く、Webサイト制作には非常に重宝するでしょう。

今回の記事では、大きく分けて以下3つをご紹介します。

  • positionの特徴と代表的な使い方4選
  • top・bottom・left・rightの使い方
  • positionを使った上級テクニック2選

実際にコーディングしたり数値をいじりながら、視覚的に学んでみてくださいね!

目次
  1. positionができること
  2. 【位置を指定】top・bottom・left・right
  3. positionの特徴&使い方4選
  4. 1.【デフォルト】static
  5. 2.【相対配置】relative
  6. 3.【絶対配置】absolute
  7. 4.【ブラウザに固定】fixed
  8. positionを使った上級テクニック2選
  9. 1.ヘッダーの固定とレイアウト
  10. 2.要素にラベルを貼る
  11. まとめ

positionができること

image

positionはカンタンに言うと、要素を好きな位置に固定するプロパティです。

たとえば以下のように、スクロールしても上の部分が変わらないWebサイトを見たことがありませんか?


Webサイト

ヘッダー

セクション

セクション

フッター

※上下にスクロールできます

ブラウザ画面の一番上が基準位置となり、要素(=ヘッダー)がピッタリ固定されていますね。

記事後半では、好きな位置を基準に設定する方法もご紹介するので、ぜひWebレイアウトの参考にしてください!

【位置を指定】top・bottom・left・right

top・bottom・left・rightは、要素を基準の位置からどれくらい動かすか指定するプロパティで、positionとセットで使われることがほとんどです。

セレクタ {
top(bottom,left,right): 値(◯px,◯%,◯em);
}

[例]
div {
top: 10px;
left: -10px;
}

top・bottom・left・rightのポイントは以下4つです。

  • top 基準位置からどれくらい下に動かすか
  • bottom 基準位置からどれくらい上に動かすか
  • left 基準位置からどれくらい右に動かすか
  • right 基準位置からどれくらい左に動かすか

また、値をマイナスで指定すると動かす方向が逆転します。

  • top(-10px) 基準位置より上に10px動く
  • left(-30px) 基準位置より左に30px動く

ここでは「とりあえず基準位置から動かせるんだなー」と理解できていればOKです!

positionの特徴&使い方4選

image

ここからはpositionの特徴と具体的な使い方として、以下4つをご紹介します!

  • static
  • relative
  • absolute
  • fixed

一度で理解できなくても全然OK!

何度かコードを実行して視覚的に覚えるのが一番近道なので、あせらず取り組んでいきましょう!


1.【デフォルト】static

staticは、デフォルトで設定されているpositionの初期値です。

セレクタ {
position: static;
}

staticの特徴&使い方は以下4つです。

  • staticと書かなくても、もとから要素はstaticになってる
  • 要素は通常の位置通り
  • topやleftなどを指定できない
  • z-index(=要素の重なる順番を決めるプロパティ)を指定できない

staticはデフォルトなので、特別な理由がなければ書くことはないでしょう。

ただし、topやleft、z-indexを指定しても反応がないときは、static(=デフォルト)のままになっているケースが多いので気をつけてください。


2.【相対配置】relative

relativeは、要素が本来配置されるべき位置がそのまま基準となります。

セレクタ {
position: relative;
}

[例]
div {
position: relative;
top: 100px;
left: 100px;
}

relativeの特徴&使い方は以下4つです。

  • topやleftなどが指定できる
  • z-indexが指定できる
  • 基準位置は”指定した要素が本来配置される場所”
  • absoluteに対する基準位置になれる(※後ほど解説します)

relativeだけだと反応がなく、staticとの違いが分かりづらいですが、topやleftをセットで指定すると使い方が見えてくるはずです。

relativeを使うときは、”要素が自分自身を基準にする”と考えれば、感覚が掴みやすいでしょう!

■使用例


HTML
  • <div>div</div>
  • <section>section</section>
  • CSS
  • div {
     background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
     border-radius: 0.5em;
     height: 150px;
     width: 150px;
     position: relative;
     top: 50px;
     left: 120px;
    }

  • section {
     height: 200px;
     border: dashed 3px #96c2fe;
     background: #f4f4f4;
    }
  • ブラウザ画面

    div

    section


    3.【絶対配置】absolute

    absoluteは、relativeが指定されている”親要素”を基準にして、自分の位置を決定します。

    セレクタ {
    position: absolute;
    }
    
    [例]
    (親)div {
    position: relative;
    }
    
    (子)div {
    position: absolute;
    top: 10px;
    left: 10px;
    }
    

    absoluteの特徴&使い方は以下3つです。

    • 親要素(=基準位置)にrelativeを指定
    • 子要素(=動かしたい要素)にabsoluteを指定
    • 子要素にtopやleftなどを指定

    absoluteの注意点ですが、親要素にrelativeを指定しなくても、見た目上問題なく動作することがあります。

    ただ、思わぬ動きやレイアウト崩れに繋がりやすいので、”relativeとabsoluteはセットで使う”と覚えておいてください。

    ■使用例


    HTML
  • <div class="oya">
  • <div class="kodomo">子要素</div>
  • </div>
    CSS
  • .oya {
     border: 1px solid black;
     border-radius: 0.5em;
     height: 150px;
     width: 150px;
     position: relative;
    }

  • .kodomo {
     background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
     width: 100%;
     height: 100%;
     position: absolute;
     top: 50px;
     left: 50px;
    }
  • ブラウザ画面

    子要素


    4.【ブラウザに固定】fixed

    fixedはブラウザ画面を基準位置にして、要素を固定するときに使います。

    セレクタ {
    position: fixed;
    }
    
    [例]
    div {
    height: 80px;
    position: fixed;
    top: 0;
    }
    

    fixedの特徴&使い方は以下4つです。

    • ブラウザ画面全体が基準
    • スクロールしても同じ位置にあり続ける
    • topやleftなどを指定できる
    • z-indexを指定できる

    記事冒頭で紹介したヘッダーもfixedで固定していますが、このように上下左右のいずれかに固定したいときは、”top:0”、"left:0"のように書きます

    ■使用例


    HTML
  • <div>fixed</div>
  • <section>section</section>
  • <section>section</section>
  • CSS
  • div {
     height: 150px;
     width: 150px;
     background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
     border-radius: 0.5em;
     position: fixed;
     top: 50px;
     left: 130px;
    }

  • section {
     height: 200px;
     background: #f4f4f4;
     border: dashed 3px #96c2fe;
    }

  • ブラウザ画面

    fixed

    section

    section

    ※上下にスクロールできます

    positionを使った上級テクニック2選

    image

    ここからは、positionを使った実践的なコーディングを2つご紹介します!

    1.ヘッダーの固定とレイアウト

    記事冒頭で紹介したヘッダー固定を、あらためて詳しく解説します!

    ヘッダーはfixedを使って固定するのが一般的ですが、うまく効かなかったりレイアウトが崩れるときがあります。

    そんなときは、以下をチェックしてみてください。

    • ヘッダーの高さ(=height)の分だけ、ページ全体のレイアウトが上にズレるときがある
    • 上記のようにレイアウトがズレたら、bodyかそれ以降の要素にmargin-topを指定
    • fixedを指定した要素が横いっぱいに広がらないときは、width: 100%を指定

    ただし、inline要素にはwidthが効かないので注意してください。

    ■使用例


    HTML
  • <header>
     <img src="search.png">
     <a href="#">ログイン</a>
    </header>

  • <section>
     <img src="hello.png">
    </section>

  • <footer>© footer All rights reserved.</footer>
  • CSS
  • header {
     height: 80px;
     width: 100%;
     background: rgb(72,72,72);
     position: fixed;
     top: 0;
     z-index: 10;
    }

  • header img {
     margin-left: 40px;
     width: 80px;
     height: 80px;
    }

  • header a {
     float: right;
     margin-right: 40px;
     color: white;
     line-height: 80px;
    }

  • section {
     width: 80%;
     height: 500px;
     margin: 0 auto;
    }

  • section img {
     width: 100%;
     height: 100%;
    }

  • footer {
     height: 50px;
     background: rgb(72,72,72);
     color: white;
     text-align: center;
    }
  • ブラウザ画面
    ログイン
    © footer All rights reserved.

    要素ごとに重要度の高いプロパティをピックアップしたので、1つずつみていきましょう!

    header

    • height: 80px 高さ80px
    • width: 100% 横幅を画面幅いっぱいに広げる
    • fixed、top: 0 ブラウザ画面の上部に固定
    • z-index ヘッダーの重なり順を指定
    • float: right 要素を右寄せ
    • line-height: 80px(=親要素の高さ) 文字の上下中央揃え

    section

    • margin: 0 auto 要素を中央揃え(※widthとセットで指定しないと効かない)
    • width: 80% 横幅を親要素(=今回はbody)に対して80%で設定

    footer

    • height 高さ50px
    • text-align: center 文字を中央揃え

    上の例は”聖杯レイアウト”と呼ばれ、Webページではよく見られる定番のカタチなので、ぜひ覚えておいてください。


    2.要素にラベルを貼る

    擬似クラス”:before”を使うと、要素の直前に擬似的な要素を追加できます。

    セレクタ:before {
    content:"";
    position: absolute;
    }
    
    [例]
    div {
    position: relative;
    }
    
    div:before {
    content:"ラベル";
    position: absolute;
    top: -10px;
    }
    

    :beforeの特徴&使い方は以下4つです。

    • content内の""には、挿入したい文字や記号を入れる
    • content内の""は空でも良い
    • セレクタにrelative、セレクタ:beforeにabsoluteを指定する
    • :beforeと::beforeは同じ意味だが、::beforeにはまだ未対応のブラウザもあるので注意

    ■使用例


    HTML
  • <div></div>
  • CSS
  • div {
     height: 150px;
     width: 150px;
     position: relative;
     border: 1px solid black;
     border-radius: 0.5em;
    }

  • div:before {
     position: absolute;
     content: "ラベル";
     background: skyblue;
     border-radius: 0.5em 0 0 0;
    }
  • ブラウザ画面

    :beforeのborder-radiusは、色がはみ出さないよう左上だけ0.5em掛けて丸めています。

    また、ラベルを好きな位置に動かしたいときは、:beforeにtopやleftなどを指定してみてください。

    一流デザイナーのスキルが身に付く

    CodeCampの無料体験はこちら

    まとめ

    この記事では、以下を中心にpositionを紹介しました。

    • positionの特徴と代表的な使い方4選
    • top・bottom・left・rightの使い方
    • positionを使った上級テクニック2選

    positionを効果的に使えれば、Webサイト制作の基礎から応用まで、幅広く対応できるようになります

    コピペをどんどん活用しながら、焦らずじっくり取り組んでみてください!


    関連記事

    佐藤恭平
    この記事を書いた人
    佐藤恭平
    \ 無料体験開催中!/自分のペースで確実に習得!
    オンライン・プログラミングレッスンNo.1のCodeCamp