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

positionができること

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

たとえば以下のように、スクロールしても上の部分が変わらない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選

ここからは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を使うときは、”要素が自分自身を基準にする”と考えれば、感覚が掴みやすいでしょう！

■使用例

ブラウザ画面

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選

ここからは、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などを指定してみてください。

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

無料カウンセリングはこちら

まとめ

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

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

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

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

• シェア
• ツイート
• シェア
• ブックマーク

---

• CSS
• Webデザイン入門
• Webデザインお役立ち情報

関連記事

• 
  【Webデザイン】CSSの『sticky』を使いこなそう

  CSS

  Webデザインお役立ち情報
• 
  スキルアップして生き残れるWebデザイナーになろう！

  Webデザイン入門

  Webデザインお役立ち情報
• 
  favicon（ファビコン）を設定してクリック率アップ！作成方法や変換ツールまで解説！

  Webデザインお役立ち情報

  Webデザイン入門
• 
  3Dグラフィック技術WebGLを使ったサイト10選が近未来すぎる件

  Webデザインお役立ち情報
• 
  思わず頬がにやけちゃう！Webサービスで使われてるかわいいマスコット10選

  Webデザインお役立ち情報
• 
  〜憧れの講師との出会い〜　卒業生が語る、CodeCampの学びの質

  CSS

  Webデザイン入門

この記事を書いた人

佐藤恭平