パーツの横並びはpositionでも可能
スマホやタブレットはPCより画面幅が狭いため、例えばECサイトだと店舗ロゴの横にカートボタンなど、1つのライン上に複数のパーツを置きたい!となることがよくあるのではないでしょうか。
以下の画像のような複数の小さなパーツを横並びにする際CSSの「floatプロパティ」でも実現できますが、float解除のこともあり、細かく位置も指定できる「relative」や「absolute」といった「positionプロパティ」の方が有効ではないかと思います。
しかしこのpositionプロパティ、絶対位置とは?相対位置とは?実際どう違うの?と少々分かりづらいように感じます。私も入社後の課題でやっと理解できました。
そこで今回は、このプロパティの中で混同しやすい「relative」と「absolute」についてまとめたいと思います。
1.positionプロパティとは
要素の配置方法を指定します。値の種類は以下のとおりです。
static | 配置指定なし。通常の位置に配置される。(初期値) |
relative | 相対位置。本来その要素が配置される場所を基準に配置される。 |
absolute | 絶対位置。ウィンドウ、または親要素を基準に配置される。 |
fixed | absoluteと同じく絶対位置。だが、スクロールしても位置が変わらない。(固定配置) |
実際の上下左右の距離は「top」「bottom」「left」「right」プロパティを併用します。これらはpositionプロパティの値がstatic以外の時に有効となります。
またこの4つ全てを使う必要はなく、「top」だけ、「top」と「right」だけと必要なもののみ使い、配置された位置からの距離を指定します。
言葉だけではイメージがつきにくいと思いますので、以下より実際配置した時の画像と併せてご説明します。
2.“relative”と“absolute”の動きの違い
i)relative
【その1】
100px × 100pxの灰色のボックスの下に、relative指定した
今回は上から0pxの距離を指定しています。
<div class="box">box</div> <div class="relative">relative</div>
.box { width: 100px; line-height: 100px; background: #bbb; text-align: center; } .relative { position: relative; top: 0; /* 以下デザイン設定 */ width: 500px; line-height: 50px; background: #f8b862; text-align: center; }
relativeは「その要素が本来配置される位置」を基準にし、そこから指定した距離の場所に配置されます。
今回はその位置より上から0pxの距離のため、見た目は何も変わりません。
【その2a】
次はここから位置を動かしてみます。
【その1】の状態より、上から100px、左から100pxと指定します。すると元あった位置から指定した分移動しました。(ピンクの枠は空白部分です)
※HTMLは【その1】と同じ
.box { width: 100px; line-height: 100px; background: #bbb; text-align: center; } .relative { position: relative; top: 100px; left: 100px; /* 以下デザイン設定 */ width: 500px; line-height: 50px; background: #f8b862; text-align: center; }
【その2b】
上下左右の位置の値には負の値も指定できます。
【その1】の状態より、上から-50px、左から50pxで指定すると灰色のボックスに被りました。
灰色のボックスにもstatic以外を指定した上で「z-indexプロパティ」を併用すると、重なる順序の変更が可能です。
【その3】
relativeは元の位置からの移動なので、少し移動させる場合など指定しやすく便利なのですが1つ注意点があります。
それは「要素Aを移動させた後も、元の場所にその要素Aの高さが残ってしまう」です。
その注意点を分かりやすくするために、【その2a】にボックスを1つ追加しました。
<div class="box">box</div> <div class="relative">relative</div> <div class="box">box</div> /* ←追加 */
※CSSは【その2a】と同じ
【その2a】の時とrelativeのボックスの位置は変わりませんが、2つの灰色のボックスの間に空間ができていますよね。
つまりこの空間が「要素Aの高さ」ということです。
ii )absolute
【その1】
100px × 100pxのボックスの下に、今度はabsoluteを指定した
relativeの【その1】と同じく、上から0pxの距離を指定しています。
<div class="box">box</div> <div class="absolute">absolute</div>
.box { width: 100px; line-height: 100px; background: #bbb; text-align: center; } .absolute { position: absolute; top: 0; /* 以下デザイン設定 */ width: 500px; line-height: 50px; background: #f6bfbc; text-align: center; }
absoluteは「ウィンドウ、または親要素」を基準にし、そこからの距離の場所に配置されます。
今回の例ではウィンドウが基準になります。(親要素が基準になる場合は、後の【3.親要素にもpositionプロパティを設定】でご説明します)
ウィンドウ基準で上から0pxの距離となるため、absoluteのボックスはウィンドウの上辺にぴったり引っ付きます。
【その2】
次はここから位置を動かしてみます。
【その1】の状態より、上から100px、左から100pxで指定します。するとウィンドウを基準にして指定した分移動しました。
※HTMLは【その1】と同じ
.box { width: 100px; line-height: 100px; background: #bbb; text-align: center; } .absolute { position: absolute; top: 100px; left: 100px; /* 以下デザイン設定 */ width: 500px; line-height: 50px; background: #f6bfbc; text-align: center; }
【その3】
relativeは本来の位置にその要素の高さが残りますが、absoluteでは高さが残りません。
こちらでも、【その2】の状態からボックスを1つ下に追加しました。
<div class="box">box</div> <div class="absolute">absolute</div> <div class="box">box</div> /* ←追加 */
※CSSは【その2】と同じ
ご覧のように空間は残らず2つ目の灰色のボックスは上に詰め、1つ目のボックスのすぐ下に表示されました。
3.親要素にもpositionプロパティを指定
absoluteでウィンドウ基準ではなく親要素を基準にしたい時は、親要素にもstatic以外の値を設定する必要があります。
例で親ボックスにrelative、子要素にabsoluteを設定しました。比較上、親ボックスに30pxのmarginを付けています。
<div class="box"> <div class="absolute">absolute</div> </div>
.box { position: relative; /* 以下デザイン設定 */ width: 300px; height: 300px; margin: 30px; background: #bbb; text-align: center; } .absolute { position: absolute; top: 100px; left: 100px; /* 以下デザイン設定 */ width: 300px; line-height: 50px; background: #f6bfbc; text-align: center; }
親要素にstatic以外を設定しなければ、以下の画像のようになります。
基準が親要素からウィンドウになるため、ピンク色のボックスの位置が変わります。
本来その要素が配置される場所に空白(移動させる要素の高さ)を残したくないけれど、基準点を画面の途中に置きたい時はこれが有効です。
終わりに
いかがでしたでしょうか。少しでも「relative」と「absolute」の違いをご理解いただければ幸いです。
冒頭で申し上げたようにfloatでもパーツを横並びにすることが可能ですが、positionも使うことで更にレイアウトの幅が広がるのではないかと思います。
他にもパーツを横並びにする方法に、「displayプロパティ」の「inline-block」と「table-cell」があります。そちらの記事も併せてご覧ください。
レスポンシブWebデザインで使える!inline-blockで高さを揃えよう
レスポンシブ化するなら知っておきたいtable-cellの使い方
また、このようにCSSを利用してレスポンシブECサイトをデザインするにはレスポンシブWebデザイン前提のデザイン自由度の高いプラットフォームを利用する必要があります。そうしたプラットフォームの選び方も記事にしているのでご興味のある方は一緒に読んでいただければと思います。
ECサイトASP比較~マルチスクリーン対応ECサイトASPの比較ポイント~
-
クラウドECのサイト構築はaishipR-カスタマイズ可能なASP実績No.1
累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。 またモバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。 さらに信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。
WEBデザインカテゴリの最新記事
-
- 2022.11.28
【2023年最新】ECサイトの制作手順とクラウド型ASP利用における制作費や価格相場を徹底解説
-
- 2020.06.18
Flexboxを用いてレスポンシブなサイトを構築する
-
- 2020.05.25
【レスポンシブ】HTMLとCSSで固定ヘッダーメニューを作成する
-
- 2019.08.30
html&cssを用いて見やすいテーブルを作成する
-
- 2019.07.29
cssのdisplayプロパティを活用してhtmlの引き出しを増やす
-
- 2019.06.13
CSSの擬似クラスを使いこなそう〜nth-childとnth-of-typeの違いとは