ウェブコーディング

混乱してない?CSSレイアウト【position: absolute】を最短で理解するための2つのポイント

 positionを使うとfloatやmarginを駆使してレイアウトを設定するより簡単に設定できてしまうのですが、1つ難しいところがありますね。

そう。

【position: absolute;】で配置を設定するときの基準がわかりにくいのです。

大体は疑似要素(after、before)と一緒に使われていたりするので、結構理解に苦しむ部分です。

今回はそんな【position: absolute;】の基本的なことを2つのポイントでまとめていこうと思います。

重要なのはコレ!2つの視点から考える

自分自身が独学でCSSを学んでいるので、いろいろ試してみたんですが、気をつけてみておくと理解が深まる部分はこれ↓です。

【position: absolute;】を指定した要素の基準になる位置はどこなのか?

「ナンノコッチャ?」って感じで、あまりイメージがわかないかもしれないですね。

ここから順番にやっていくんですが、注意して見てほしいのは「親要素」と「揃え位置」です。

この考え方さえあれば、基本的にどんなものでも理解できると思います。

念のため【position】関連のCSS設定で必要な部分をまとめておいたので、不安な人は一度見ておいてくださいね。

使用例
.box {
    position: absolute;
    top: 100px;
    left: 200px;
}
【position: ~;】で設定できる値 組み合わせて使う位置指定のプロパティ
static デフォルト(位置指定無効)
親要素の左上を基準にした通常の配置
top: ~px;
left: ~px;
基準位置から「~px」の位置に配置する
relative 相対配置
通常の位置から相対的な位置に配置する
bottom: ~px;
right: ~px;
基準位置から「~px」の位置に配置する
absolute・fixedでは基準が異なる
absolute 絶対配置
親要素を基準に配置する
z-index: 1; 重なりの順番を決める
数字が大きい方が前面に配置される
fixed 固定配置
ウィンドウを基準に配置する
   
  1. 【position:static;】はデフォルトなので、あえて使うことはありません。
  2. 【position:~;】を使っていないときは、常に【position:static;】になっていると思っておけばOKです。
  3. ただし、位置指定のプロパティは【position:static;】以外を設定すると有効になります。
  4. 「~px」の部分は「~em」とか「~%」とか、基準になっている単位を好きなように使えます。

本当に基本的なことはこのくらいだと思います。

では、ここから【position: absolute;】を設定していきます。

何もしていないときの配置

まずは何も設定しない状態を確認しておきましょう。

ここに書き足して配置を確認していきますので少し目を通しておいてくださいね。

CSS・HTMLを確認する

大きな枠(.frame-large)の中に小さな枠(.frame-small)を置いて、その中に要素(.box)を配置しようとすると、普通はこういう感じになります。
(「画面」は便宜上設定している枠ですので、実際のブラウザ表示とは違っているかも知れません。)

ここからCSSに【position】関連の設定を追加していきます。

親要素はどれ?

まず最初のポイント親要素ですね。

親要素の概念を理解するために、はじめに「.box」だけに【position: absolute;】と【right: 100px;】を設定して、表示を確認してみます。

知っている人は知っていることなのですが、まあ何も考えずにやってみると、こう↓なります。

CSS・HTMLを確認する

「青い箱(.frame-small)の右から100px移動する」と思った人もいるかもしれません。

実はこの場合、ページの一番外側を構成する要素(<body>~</body>)が基準になって配置されてしまいます。

原則として【absolute】を設定するときは基準になる親要素が必要になるのですが、今回はそれが【<body>~</body>】になっているということなんです。

じゃあどうすれば基準になる親要素を変えられるのか?

というと、基準にしたい親要素に【position: relative;】を設定してあげればいいのです。

つまりこういうこと↓です。

【absolute】の基準にしたい枠に【relative】を設定する

青い箱(.frame-small)を基準に配置したいときは、そのクラスに【position:relative;】だけを追加します。

CSS・HTMLを確認する

【absolute】で意図したところに配置するためには、基準になる親要素を明確にするために【position:relative;】を設定します。

もともとのCSSのルールでは

【absolute】が基準とする親要素 =【static】以外が設定されている親要素

となっているので【relative】を使っています。

【position:relative;】は【top:~px;】などの他の設定を書き込まなければ、通常の配置(static)と何ら変わらないので、こういう方法が使われるというわけです。

【position: relative;】をどこに設定するかによって親要素を決められる

同じようにグレーの箱(.frame-large)だけに【position:relative;】を設定して、青い箱(.frame-small)を親要素として無視することもできます。

CSS・HTMLを確認する

青い箱(.frame-small)には【position】が設定されていないので、基準になる親要素ではなくなっているということですね。

まずここまでが親要素についての概念です。

ここからはもう一つのポイントの基準になる位置についてお話します。

absolute と relative の基準になる位置はどう違う?

WEBページの配置を考えるとき、それぞれの要素の基準は左上になりますよね。

これは【relative】の場合でも考え方は同じなのですが、【absolute】を設定するとちょっと違った考え方をしなければならないのです。

まずは【relative】の設定を確認してみましょう。

【relative】でのtop・left指定
CSS・HTMLを確認する

「表示位置調整」の部分は気にしないでください。あと、グレーの箱はここでは紛らわしいので消しておきました。

これは至って普通で、もともとあった位置からtopとleftで指定した分だけ、左上を基準として移動しています。

これを【absolute】に変えてみます。

【absolute】のtop・left指定
CSS・HTMLを確認する

relativeとくらべても全く同じ位置に配置されているのがわかります。

relativeの場合は親要素に【relative】を指定する必要はないのですが、absoluteの場合は必要になります。

では今度はrightとbottomを使ってみます。

【relative】のbottom・right指定
CSS・HTMLを確認する

【relative】の場合は常に左上の位置が基準になっています。

では今度は【absolute】で同じことをしてみます。

【absolute】のbottom・right指定
CSS・HTMLを確認する

これがちょっと混乱を招くのですが、【absolute】でbottomとrightを指定すると、基準の位置が変わってしまうのです。

この仕様のお陰で便利な部分もあるのですが、それはまた今度にしましょう。

【position: absolute;】のまとめ

最後にポイントをまとめておきますね。

  1. 配置する要素の基準にしたい親要素に【position:relative;】を追加する
  2. top、leftでの配置は要素の左上を基準に考える(relativeと同じ)
  3. bottom、rightでの配置は要素の右下を基準に考える

この原理さえわかってしまえば、ヘッドラインやリストなどのデザインに幅をもたせることができます。

記事が気に入ったら
tipLog を "いいね!"
Facebookで更新情報をお届け。

tipLog

WordPressテーマ

WordPressテーマ「MAG(TCD036)」

スポンサードリンク

関連記事

  1. レイアウト

    inkscapeの「整列と配置」でオブジェクトを綺麗に並べて表を作る方法

    inkscapeには整列と配置を調整するための機能があります。この…

  2. ウェブコーディング

    PHPの基本的な文法と変数のまとめ

    どんなPHP文でも必ず従わなければいけない文法があります。その初歩…

  3. ウェブコーディング

    WordPressでgoogle-code-prettifyの導入と最低限のCSS設定をする方法

    google-code-prettifyとはウェブページ上のソースコー…

  4. ウェブコーディング

    WordPressの記事内でPHPを実行した結果を表示する方法

    WordPressの記事内でPHPを実行できると、記事に表示できるコン…

  5. グラフィックデザイン

    デザインの中で「線」が果たす役割を考えてみよう

    1つのデザインの中で「線」がどんな役割をはたすのか?についてのお話です…

  6. ウェブコーディング

    WordPressでも簡単に使えるってほんと?会話風吹き出しのCSSテンプレート

    会話風吹き出しのテンプレートとして使えるCSSを作ってみました。会…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


スポンサードリンク

ピックアップ記事

おすすめの本

使用している素材

カテゴリー

 
  1. タイポグラフィ

    読みやすい明朝体フリーフォント
  2. ブログ収益化

    月額100円から使える「ロリポップレンタルサーバー」
  3. 素材

    無料でクオリティが高く、検索機能が利用できる画像素材サイト3選
  4. グラフィックデザイン

    フォトレタッチ・グラフィックデザインの無料ソフト「GIMP」(≒Photosho…
  5. ブログ収益化

    脱初心者しませんか?Amazon・楽天のアフィリエイトを上手に活用するための予備…
PAGE TOP