[Sponsor] 「Web制作者のための黒い画面(ターミナル)入門講座」
という無料講座を渋谷で開催!
はじめてのWebデザイン『HTML・CSS』入門

3-12. 要素を自由に配置する(position)

HTMLのブロック要素は何もしないと自然に縦に積み上がっていき、floatなどを使うと横並びにすることができます。通常の文章はそういったレイアウトだけで対応できますが、実装したいデザインによっては要素の位置を自由に座標で決める必要のものもあります。そういったときはpositionというプロパティで自由配置を指定します。

  • HTML・CSS
  • Webデザイン

公開日:2019/07/08最終更新日:2019/07/08

1.要素の配置方法を指定する「position」

position」は要素の配置方法を指定することができるプロパティです。通常はstaticという配置方法を指定しない値が設定されており、以下のような値が指定できます。

  • 相対位置を指定する「relative
  • 絶対位置を指定する「absolute
  • スクロールしても位置を固定する「fixed

positionで上記の3つのうちいずれかを設定すると、指定した位置から上下左右に指定したpxずつ要素を移動させることができます。

例えば上から10px動かしたい場合は`top : 10px`のような記述をします。

  • 上から「top
  • 下から「bottom
  • 右から「right
  • 左から「left

実際に試してみましょう。HTMLとCSSで以下のようなサンプルを用意します。

サンプルHTML:

<div class="box"></div>

サンプルCSS:

.box{
  width: 100px;
  height: 100px;
  background: #f00;
}

 

2.相対位置を指定する「relative」

relativeは、もともとstaticだった場所から位置を指定する際に使います。

CSSに`position: relative`と`top: 30px`、`left: 30px`を追記します。

サンプルCSS:

.box{
  width: 100px;
  height: 100px;
  background: #f00;
  position: relative;
  top: 30px;
  left: 30px;
}

左がstatic、右がrelativeにして上から30px・左から30px移動させたものです。

relativeを単独で使うことは少なく、次のabsoluteと組み合わせて使うことが多くなります。

3.絶対位置を指定する「absolute」

absoluteは親要素のpositionがstatic以外のものが指定されている場合、その親要素を基準に位置を指定することができます。親要素にpositionが何も指定されていない場合は、ウインドウの左上を基準として位置を指定します。

サンプルのHTMLとCSSを少し変更します。

サンプルHTML:

<div class="box">
  <div class="round"></div>
</div>

サンプルCSS:

.box{
  width: 100px;
  height: 100px;
  background: #f00;
}

.round{
  width: 30px;
  height: 30px;
  background: #faa;
}

赤い四角に対してrelative、ピンクの四角に対してabsoluteを指定し、ピンクの四角を上から10px・左から10px移動させます。

サンプルCSS:

.box{
  width: 100px;
  height: 100px;
  background: #f00;
  position: relative;
}

.round{
  width: 30px;
  height: 30px;
  background: #faa;
  position: absolute;
  top: 10px;
  left: 10px;
}

続いて赤い四角のpositionを指定なし(static)にしてみます。

サンプルCSS:

.box{
  width: 100px;
  height: 100px;
  background: #f00;
}

.round{
  width: 30px;
  height: 30px;
  background: #faa;
  position: absolute;
  top: 10px;
  left: 10px;
}

ブラウザの左上を基準にして、上から10px・左から10px移動しました。赤い四角の要素からはみでました。

4.スクロールしても位置を固定する「fixed」

fixedはスクロールしてもそのままで位置を固定することができる値です。固定のヘッダーや、メニュー、カスタマーサポート用に常時表示させるチャットなどの位置を指定するのに使います。

chot.designのトップページにはfixedを利用したレイアウトがあります。

左側のメニューにはfixedが設定されている

fixedは親要素ではなくブラウザの左上を基準にして位置を指定します。

理解度チェック

はじめてのWebデザイン『HTML・CSS』入門

1. HTMLとCSSを学ぶ準備

2. HTMLの基礎知識

3. CSSの基礎知識

このレッスンの著者