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で上下を入れ替えるというやり方は結構使う機会もあるかと思うので、覚えておくとよさそう。

現在のブラウザサイズをリアルタイムで教えてくれる「What’s My Browser Size?」前のページ

MAMP(インストール済)でWordPressをローカル環境で動かすまでの簡単な手順次のページ

関連記事

  1. CSSで可変式ドロップダウンメニュー

    CSS

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみた

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみました。…

  2. CSSグラデーションジェネレーター「Gradientoo」

    CSS

    直感的な操作感!CSSグラデーションを作成できるジェネレーター「Gradientoo」

    CSSのグラデーションを作成できる素敵なジェネレーター「Gradien…

  3. CSS

    CSSを使って画像にホバーするとキャプションを表示させるエフェクト

    CSSを使ったホバーエフェクトがとてもよかったのでご紹介します。画像に…

  4. (cs)spinner

    CSS

    CSSだけでミニマルなローディングアニメーションを実装できる「(cs)spinner」

    CSSだけでローディングアニメーションを実装できる「(cs)spinn…

  5. littlebox

    CSS

    CSSだけで作られたシンプルで可愛いアイコンセット「littlebox」

    littleboxは画像を用いずにCSSだけで作られたシンプルなアイコ…

  6. CSS3を使ったツールチップ

    CSS

    CSS3を使ってアニメーションするツールチップを実装するコード

    これすごくよかったのでメモがてらエントリー。CSS3を使ってアニメーシ…

コメント

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

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

最近の記事

  1. すしざんまい
  2. 蒼龍唐玉堂 特製牛バラ担々麺
  3. サーモンアボカドサラダラップとドリップ
  4. 猿田彦フレンチ
  5. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて

アーカイブ

PAGE TOP