【CSS】ポジション（position）レイアウトのコーディング方法

CSSでWebページを作るとき、要素を好きな場所に置きたいと思ったことはありませんか？

そんな時に役立つのが「positionプロパティ」です。

positionプロパティは、まるで要素を自由に動かすことができますが、relative、absolute、fixed、sticky…いろんな種類があって、最初は戸惑ってしまうかもしれません。

この記事では、そんなpositionプロパティをそれぞれの種類の違いや使い方、どんな時に役立つのかを、具体例を交えながら説明していきます。

positionプロパティをマスターすれば、レイアウトの幅がグーンと広がります。この記事を参考に思い通りのWebページを作ってみましょう！

CSSポジションレイアウト

CSSのpositionプロパティを使えば、まるでブロックを自由に積み上げるように、Webページの要素を好きな場所に配置できます。

特に、スマホ画面のような縦長のレイアウトを作る際に役立ちます。

positionプロパティって？

positionプロパティは、要素をどこに配置するかを決めるためのCSSの機能です。

static（初期値）

普通の配置方法。特に何も指定しない場合は、これが適用されています。

relative（相対配置）

自分の本来いる場所を基準に、少しだけ位置をずらすことができます。

absolute（絶対配置）

親要素（自分が入っている箱）や、画面全体を基準に、好きな場所に移動できます。

fixed（固定配置）

画面に固定され、スクロールしても動きません。ヘッダーやフッターによく使われます。

sticky（追従配置）

スクロールに合わせて、relativeとfixedを切り替えることができます。

positionプロパティを使うときの注意点

positionプロパティは便利ですが、いくつか注意点があります。

• absoluteやfixedを使うときは、親要素にposition: relative;を設定する必要があることが多いです。
• relativeを使うときは、後続の要素（自分の後に続く兄弟たち）の位置がずれる可能性があります。
• fixedを使うときは、スクロールした時に他の要素と重なってしまわないように注意が必要です。
• stickyは便利な反面、ブラウザによってはうまく表示されないことがあります。

absolute配置の親要素って？

absolute配置を使う際、「位置設定が可能な親要素」が必要になります。これは、positionプロパティにrelative（またはabsolute、fixed）が設定された要素のことです。

基本的に、absolute配置する要素を囲む要素にposition: relative;を設定しておけばOKです。

位置指定って、基準位置からどの部分までの距離？

指定した方向（top, right, bottom, left）に一番近い辺までの距離です。

例えば、top: 50px;と指定した場合、要素の上辺が基準位置から50px下に配置されます。

要素を真ん中に配置したいけど、どうすればいいの？

親要素の幅と要素自身の幅を把握し、計算する必要があります。

例えば、親要素の幅が300px、要素の幅が100pxの場合、要素を中央に配置するには、left: 100px;と指定します。（(300 - 100) / 2 = 100）

おわりに

positionレイアウトは、Webデザインにおいて非常に重要なテクニックです。最初は難しく感じるかもしれませんが、練習を重ねることで、必ずマスターできます。

以下の点を意識して挑戦してみてください。

• 親要素の指定はrelative: absoluteやfixedを使う場合、親要素には必ずposition: relative;を設定しましょう。
• 最初に計算してからコーディングするのがおすすめです。特にabsolute配置では、要素のサイズや配置位置を事前に計算しておくことで、スムーズに作業を進められます。

この記事が、positionレイアウトでつまずいている方の助けになれば幸いです。