css,html画像の横にテキストが並ぶレイアウト、floatを使えば簡単だけど都度clearするのもめんどくさい!そんな煩わしい気落ちはもういらない!floatなんて使わなくてもネガティブ(マイナス)マージンだけでできるプチテクをご紹介。結果だけ知りたい方はこちらサムネイルに記事情報や商品画像に商品説明などのレイアウトによくあるやつfloatでも十分ですが、使い回しパーツなどどうclearするか悩ましい時とか、コーディングデビュー仕立てで「floatまだよくわからない!」なんて人もいるかと思います。HTMLソースの確認ブロックを大きく「画像」と「右側のテキスト達」に分けて考えます。height="100"><div><h3>はむすけ</h3><p>うぇぶの人の中の人の飼っていたハムスターの名前です。<br>イラストを描くときはこの名前で活動する時もあります。</p></div></div>floatを場合。{color:#678101;font-size:115%;font-weight:bold;}この方法でも特に問題はありません。divを無くしてimgだけにfloatをかける方法もありますが、今回はメインテーマではないので割愛します。ネガティブマージンを使った場合。floatは使わずにmarginだけで操作をします。#FF9798;}これでclearを気にしなくても大丈夫!片方が画像や大きさが決まったものであれば、この方法で簡単にレイアウト作成ができそうですね。60ビューaboutはむすけ自然と動物が大好きなWebクリエイター。front-endが専門領域ですが動物の知識はそれ以上。