CSSで上下の要素を入れ替えて配置させるやり方

CSS

CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方

CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に配置させたい時があるかと思います。先日このように配置させなきゃいけない状況になったのでその時のやり方をメモがてらエントリーします。ちなみに今回は二つの要素の幅と高さが決まっている場合と、二つ目の要素の幅と高さだけが決まっていて一つ目は決まっていない場合の2パターンのやり方です。

[ads_center]

二つの要素の幅と高さが決まっている場合

二つ上下に並んでいる要素が共に幅と高さが決まっている場合のやり方です。この場合はpositionだけを使えばいいのでとても簡単です。

HTML

<div class="wrap">
	<div class="box1">box1</div>
	<div class="box2">box2</div>
</div>

CSS

.wrap {
	position: relative;
	height: 400px;
}
.box1 {
	width: 200px;
	height: 200px;
	background: red;
	position: absolute;
	bottom: 0;
	left: 0;
}
.box2 {
	width: 200px;
	height: 200px;
	background: blue;
	position: absolute;
	top: 0;
	left: 0;
}

こんな感じで上下が入れ替わります。

CSSで上下を入れ替える配置

この場合はシンプルなので特に難しいことはないですね。ただ、あんまりこの状況はないかもしれませんが…。

二つ目の要素の幅と高さだけが決まっていて一つ目は決まっていない場合

この状況は結構あるかと思います。例えば、ブログのトップページなどで見かけるサムネイル画像とタイトルと抜粋が並んでいる時など。画像を最初に表示させたいけどマークアップ的にタイトルと抜粋を先に記述したいというような状況ですね。

ここではbox2の幅と高さが決まっていてbox1は決まっていないという状況です。

この場合は以下のようにします。ポイントはbox1にpadding-topを使ってbox2が持ち上がってくる空間を作ってあげると同時に、自分が下に移動するところ。

HTML

<div class="wrap">
	<div class="box1">
		<h3>タイトル</h3>
		<p>サンプルテキストサンプルテキストサンプルテキスト</p>
	</div>
	<div class="box2">box2</div>
</div>

CSS

.wrap {
	width: 200px;
	position: relative;
}
.box1 {
	padding-top: 200px;
	background: pink;
}
.box2 {
	width: 200px;
	height: 200px;
	background: red;
	position: absolute;
	top: 0;
	left: 0;
}

このように、タイトルと抜粋を下に配置させることができます。

CSSで上下のレイアウトを入れ替える

CSSで上下を入れ替えるというやり方は結構使う機会もあるかと思うので、覚えておくとよさそう。

関連記事

  1. CSS

    CSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできた

    前回、「jQueryでマウスオーバーした時に要素を全体的に拡大するやつ…

  2. Alerts.css

    CSS

    シンプルでピュアなCSSによるアラート実装「Alerts.css」

    Alerts.cssはシンプルでピュアなCSSを使ったアラートを実装で…

  3. Three Dots

    CSS

    シンプルで可愛いCSSローディングアニメーション「Three Dots」

    Three Dotsはアニメーション付きのシンプルで可愛いCSSローデ…

  4. Ember Burger Menu

    CSS

    豊富なアニメーションを有するハンバーガーメニュー「Ember Burger Menu」

    Ember Burger Menuは、豊富なアニメーションを有するカス…

  5. CSS

    CSSの:beforeと:afterを使ってちょっとした装飾をつけてみる

    CSSの:beforeと:afterを使ってちょっとした装飾をつけるこ…

  6. CSS

    ulのリストを横並びにしてtext-alignを適用させる方法

    ちょっと悩んじゃいました。ulのli要素を横並びにしてそれにtext-…

コメント

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

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

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP