CSSのpositionとは?その基本的な使い方と正確な位置指定をする方法 | プログラミング入門ならWEBCAMP NAVI
【1月枠も残りわずか】転職保証コース

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

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

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

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

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

CSSでのpositionとは

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

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

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

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

positionの位置指定

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

・要素の固定
・相対的な位置設定
・絶対的な位置設定

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

要素を固定するfixed

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

CSS
position: fixed;

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

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

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

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

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

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

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

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

 

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

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

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

CSS
セレクタ{
    position: fixed;
}

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

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

CSS
position: relative;

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

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

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

要素の位置を変更する

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

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

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

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

 

要素の基本の配置は左上になっているため、左上を基準にしてtopとleftの値で要素を配置する場所を数値で決めます。

セレクタには、position: relative; を使って配置させたい要素をいれましょう。

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

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

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

absoluteの親要素になる

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

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

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

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

CSS
position: absolute;

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

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

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

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

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

relativeの子要素になる

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

 

relativeが親要素になり、absoluteが子要素になるという事です。

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

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

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

 

このように、子要素のabsoluteの基準となる親要素にはrelativeが必要とされます。

要素を重ねられる

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

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

まとめ

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

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

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

1月枠も残りわずか!!

エンジニア転職を目指すなら…

転職保証付きプログラミングスクール

で未経験からエンジニア目指そう

 

✔︎未経験からの転職 ✔︎会社の将来が不安 ✔︎給与や待遇に不満がある

 

転職保証コースは質の高いカリキュラムで転職成功率98%

 

転職保証付のDMM WEBCAMPで
安心してエンジニア転職を目指そう

「スキルがないし…」「失敗したくないし…」
カウンセラーがあなたのキャリアを真剣に考え、
ご相談に乗ります。