CSSコーディング。positionプロパティとその使い方。

CSSコーディング。positionプロパティとその使い方。

ウェブデザインに於いて要素の位置を指定することは必須となります。

例えば『ブラウザ上のこの部分』とか『この要素のこの部分』といった場合です。

更には要素に重ねて位置を指定することなども可能です。

そこで今回は、この様な場合にCSSで要素の場所指定を行う方法を初心者向けに解説します。

positionプロパティとは

positionプロパティとは、要素の位置を決める為のプロパティです。

positionの書き方は以下の通りとなります。

◯◯ {position : 値}

位置を指定する為には、どの部分からどの位置に指定する必要があります。

そこでpositionプロパティでは以下の4つの値を指定する必要があります。

位置の基準を指定する値

✅static・・・・初期値

✅relative・・・現在の位置から相対的な位置を指定

✅absolute・・親要素を基準に絶対的な位置を指定

✅fixed・・・・画面の決まった位置に固定

次に位置の基準を指定したら、その基準からどの距離にしたいかを指定します。

基準からの距離は以下のプロパティを使用します。

位置を指定するプロパティ

✅top・・・・・基準の上からの距離

✅bottom・・・下からの距離

✅left・・・・・左からの距離

✅right・・・・右からの距離

それでは早速これらのプロパティを使って要素の位置を調整してみましょう。

staticの使い方

positionプロパティに於けるstaticは初期値となります。

staticのコーディング方法

◯◯ {position : static;}

See the Pen MWaYVNW by PakuPaku (@PakuPaku) on CodePen.

あれ❓
位置が全然変わらない⁉️

static(初期値)では位置を指定することができないんだ🍎

それでは位置を指定するにはどの様にすれば良いのでしょうか?

それは次の項目から解説していきます。

relativeの使い方

relativeは要素の元の位置から相対的な位置に指定する値です。

relativeのコーディング方法

◯◯ {position : relative;}

See the Pen jObExMN by PakuPaku (@PakuPaku) on CodePen.

元の場所から上(top)から30px、左(left)から20px移動したのが確認できますね。

absoluteの使い方

absoluteは親要素を基準に絶対的な位置に指定する値です。

absoluteのコーディング方法

◯◯ {position : absolute;}

See the Pen YzyPLVv by PakuPaku (@PakuPaku) on CodePen.

元の場所から上(top)から30px、左(left)から20px移動したのが確認できますね。

あれ⁉️
これってrelativeと何が違うの❓

絶対位置に配置できるってところが違うんだよ👀

absoluteは親要素の絶対的な位置に配置できるという特性を持ちます。

例えばコンテンツに絶対的な場所に設置したい題名やボタンなどに適します。

それでは実際のコーディング例を紹介しておきます。

See the Pen zYvxjJE by PakuPaku (@PakuPaku) on CodePen.

コンテンツに対して上(top)から20px、左(left)から20pxの位置に配置できたことが確認できます。

そしてこの様にabsoluteを値として使用する際は以下のことに注意して使用して下さい。

absoluteを使うときの注意事項

✅親要素にはrelativeを指定しておくこと

fixedの使い方

fixedは画面の決まった位置に固定する値です。

fixedのコーディング方法

◯◯ {position : fixed;}

relativeやabsoluteはブラウザをスクロールするとそのまま画面外に消えてしまいます。

しかしfixedはブラウザの決まった位置で固定できる特性を持つことから、画面上部のメニューバーなどに活用されます。

See the Pen OJyPZeJ by PakuPaku (@PakuPaku) on CodePen.

まとめ

positionプロパティをうまく活用することで、ウェブデザインの幅は格段に広がるでしょう。

様々なサイトでも活用されているプロパティですので、意識してみてみるのも勉強になると思います。

日々の中で試験的にコーディングを是非試してみて下さい。

感覚的に使える様になると思います。

CSSカテゴリの最新記事