CSSのpositionとは？その基本的な使い方と正確な位置指定をする方法

最大で受講料の70％がキャッシュバック！＞DMM WEBCAMP 転職コース専門技術講座

CSSのpositionというタグを上手く使うと、ユーザーが使いやすく、見やすいサイトができます。

初心者には特に難しいイメージのあるpositionですが、ここではわかりやすく説明しています。

positionを正しく理解し、ユーザーにとって見やすいサイトにしましょう！

CSSでのpositionとは

CSSではpositionというプロパティを使って要素の位置を決めたり、要素の固定をすることができます。

要素の位置指定をしっかり行えば、レイアウトの崩れない綺麗なサイトを作ることができます。

また、ある要素を一定の位置に固定すると、ユーザーにとって使いやすいサイトになることもあります。

positionで行える具体的な要素の位置設定について紹介します！

positionの位置指定

positionプロパティを使う要素の位置設定は全部で３つの方法があります。

これらのpositionを使った位置設定にはそれぞれ別の値が使われます。
一つずつ見ていきましょう。

要素を固定するfixed

CSSに書き込むコードはこちらです。

position: fixed;

fixedには、「固定する」という意味があります。

そのためfixedの値は、要素をある一定の位置に固定させたい時に使います。

fixedは日本語で固定するという意味があり、要素の固定ができるためページを動かしてもその要素は同じ場所にあり続けます。

ここでは、position: fixed; が使われている例をDMM WEBCAMPのホームページを使って説明します。

サイトの上部分に注目してください。

DMM WEBCAMPと書かれているバーが常に上部に表示されているのが確認できますか？

このように、ページをスクロールさせても常に同じ場所に要素を固定させる時にposition: fixed; を使います。

この例の場合、ユーザーが知りたいであろう情報をすぐに表示できるよう、常に見やすい場所に固定されています。

このようにposition: fixed; は、ホームページなどのメニュー部分を構成するhead部分に使われることが多いです。

ページを動かしても位置が変わらないというposition: fixed; の性質を活かすことで、ユーザーにとって使いやすいサイトになります。

fixedの仕組みはこのようになっています。

セレクタ{
    position: fixed;
}

要素を相対的な位置に指定するrelative

CSSに書き込むコードはこちらです。

position: relative;

relativeとは、「相対的」という意味があります。

相対的な位置を指定するとは、ある場所を基準にして要素の配置ができるということです。

このrelativeという値の主な使い方には２種類あるので説明していきます。

要素の位置を変更する

まず、position: relative; を使うことで、要素の位置の変更ができます。

基本は、HTML上に要素を書き込むと左上に配置されていきます。

しかし、position: relative; を使うことによってその要素を、細かい数字を使って配置することができます。

セレクタ {
    position: relative;
    top: 数値;
    left: 数値;
}

position: relative; を使った例が以下です。

基準の左上からtopとleftの値を使って要素の配置をしています。

セレクタ {
    position: relative;
    top: 10px;
    left: 20px;
}

absoluteの親要素になる

次に、relativeで固定された要素は、absoluteとという値の基準になることができます。

詳しくはabsoluteの見出しで説明します。

要素を絶対的な位置に指定するabsolute

CSSに書き込むコードはこちらです。

position: absolute;

absoluteには「絶対的」という意味があります。

意味の通り、absoluteを使うと、要素に絶対に置かれる位置の指定ができます。

absoluteの値も基準は左上のため、topとleftの数値で要素の場所を決めます。

主にabsoluteができる事は、relativeを使った要素を基準に配置できることと、要素を重ねて配置できることです。

一つずつ詳しく説明していきます。

relativeの子要素になる

relativeの説明でも少し触れたように、absoluteはrelativeを基準にして要素の配置ができます。

absoluteでの要素の位置は、relativeの要素の左上を基準にtopとleftの値で配置ができます。

以下がサンプルコードになります。

親要素 {
    position: relative;
    top: 10px;
    left: 20px;
}
子要素 {
  position: absolute;
  top: 10px;
  top: 10px;
}

要素を重ねられる

また、上記の例でもあるように、absoluteを使うことで要素同士を重ねることができます。

通常のHTMLでは要素を重ねる事はできないので、画像同士を重ねたい場合などにはposition: absolute; を使いましょう。

まとめ

positionを使った要素の配置はHTMLとCSS初心者にとって難しいと思われがちです。

しかしpositionを使うと要素の配置が自由になり、様々な表現が可能になります。

ここで紹介した値を使い、見やすく、ユーザーにとって使いやすいサイトを使いましょう！