floatを使わなくても組めるいつものレイアウト

画像の横にテキストが並ぶレイアウト、floatを使えば簡単だけど都度clearするのもめんどくさい!
そんな煩わしい気落ちはもういらない!
floatなんて使わなくてもネガティブ(マイナス)マージンだけでできるプチテクをご紹介。

目次

まずは完成イメージの確認

結果だけ知りたい方はこちら

サムネイルに記事情報や商品画像に商品説明などのレイアウトによくあるやつ

floatでも十分ですが、使い回しパーツなどどうclearするか悩ましい時とか、コーディングデビュー仕立てで「floatまだよくわからない!」なんて人もいるかと思います。

先ずはHTMLソースの確認

ブロックを大きく「画像」と「右側のテキスト達」に分けて考えます。

HTMLはこんな感じ

<div class="sample">
<img src="./hamusuke_pic.png" alt="はむすけ" width="100" height="100">
	<div>
	<h3>はむすけ</h3>
	<p>うぇぶの人の中の人の飼っていたハムスターの名前です。<br>
	イラストを描くときはこの名前で活動する時もあります。</p>
	</div>
</div>

floatを場合。

改めて説明するのもなんですが、imgをfloat:left;右側のテキスト達(div)をfloat:left(rightでも可)にします

サンプルを別画面で開く

CSSはこんな感じ

.sample img {
	margin-right:20px;
	float:left;
}
.sample div {
	float: left;
	width:500px;
}
.sample h3 {
	color:#678101;
	font-size:115%;
	font-weight:bold;
}

この方法でも特に問題はありません。 divを無くしてimgだけにfloatをかける方法もありますが、今回はメインテーマではないので割愛します。

これで解決! ネガティブマージンを使った場合。

floatは使わずにmarginだけで操作をします。

サンプルを別画面で開く

CSSはこんな感じ

a {
	margin-right: 10px;
	display: inline-block;
}
a:hover img {
	outline: 10px solid #FF9798;
}

これでclearを気にしなくても大丈夫!
片方が画像や大きさが決まったものであれば、この方法で簡単にレイアウト作成ができそうですね。