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