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

    リストを横並びにした際に簡単に均等にすることができるdisplay:table-cellを使ってみる…

    リストを横並びにした際にli要素の幅を簡単に均等にすることができるdi…

  2. CSSでテキストを縦にするやり方

    CSS

    CSSでテキストを縦の位置にするやり方

    ちょっと便利そうだったのでメモがてらご紹介。CSSでテキストを縦の位置…

  3. CSS

    CSSを使ったエフェクトつきボタンを探せる「CSS Buttons」

    CSSでエフェクトがついたボタンを作りたいときに役立つ「CSS But…

  4. 動画をレスポンシブにするCSS

    CSS

    動画をレスポンシブに対応させるCSSのTipsがとても便利

    以前、YouTubeやVimeoからの埋め込み動画をレスポンシブにする…

  5. CSS

    CSS3でシンプルで簡単なボタンを作ってみる

    CSS3を使って簡単なボタンを作ってみました。画像を使わなくてもCSS…

  6. Ember Burger Menu

    CSS

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

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

コメント

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

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

最近の記事

  1. ネクスタイム
  2. フォールドオーバーポーチ
  3. 田沢湖
  4. ハクバ シリコンクロス
  5. トライポッドスリーブ

Instagram始めました

Facebookページ

PAGE TOP