楽しいだけで十分です

position, floatプロパティの整理

CODEPREP | CSS基礎 position編を勉強したのでメモです。


fixed

  • positionプロパティにfixedを指定した場合、位置指定が基準が画面のビューポート(ウィンドウサイズ)となり、スクロールしても動かなくなる

位置指定をつかって親要素いっぱいに表示する

  • 要素を絶対位置(absolute)指定して、オフセットプロパティに全て0を指定すると、親要素に対して上下左右それぞれの距離が0であるという意味となる (= 親要素いっぱいに広がる)
  • 親要素にもrelativeなどの指定が必要

位置指定をつかって全画面表示する

  • 要素をビューポート固定(fixed)指定して、オフセットプロパティに全て0を指定する

2カラムレイアウト

  • コンテナ要素を作って、relativeを指定する
  • それぞれのカラムにはabsoluteと、width: n%;を指定する

固定ヘッダーを作る

  • fixedを指定して、 top: 0;を指定する
  • 横幅いっぱいにするために、right: 0; left: 0;も合わせて指定する
  • コンテンツがヘッダーの高さ分隠れてしまうので、body要素にmargin-topを指定して隠れないようにする

floatによる左寄せ(left)

  • absoluteを用いて左寄せにした場合との違いは、それ以降の要素が指定した要素の右側に回り込む
  • floatプロパティを適用できるのは、位置指定されていない要素のみ

floatによる右寄せ(right)

  • rightを用いると次の要素が左側に回り込むため、要素の並び順が右から順番になる

floatの解除(clear)

  • clearプロパティを用いると、指定された要素はfloatから切り離され下に移動する (回り込みを解除できる)

floatした要素を親要素の高さと合わせるテクニック

  • floatしている親要素に対して::after擬似要素を使ってfloatのclearを指定する (clearfix)
  • 別のテクニックとして、親要素のoverflow: auto;を指定する
yinm

WRITTEN BY yinm

I'm a software engineer.