フローター卒業!? floatを使わなくても組めるあのレイアウト

floatを初めて知ったあとしばらくついつい楽しくてfloatを乱用してしまう、そんな状態の方を「フローター」と呼ぶ方が多いです。（すみません）

clearfixだらけになってる！
clearするのが大変！
あのブラウザで崩れちゃってる！

そんな問題をちょっぴり減らせるかもしれない記述を書いてみます。

フローター（floater）編

良くあるこんな【画像＆テキスト】のレイアウト。
どうやって組みますか？

floatで組むならこんな感じになるかと思います。

完成イメージ css

.sample img {
	margin-right:20px;
	float:left;
}
.sample div {
	float:left; /* もしくはright */
	width:420px;
}

html



    
        バグポックル
        IT業界都市伝説の小人

        バグに悩まされウトウト居眠りしてしまい、目を覚ますとバグが知らない間に直っていたらこいつの仕業かも。

スタンダードな組み方ともいえますし、特になんの問題もありません。
でも今回はあえて別の方法も書いてみます。

flaotを使わずにやる方法はいくつかありますが、今回はネガティブマージンを使った方法を記載します。

先ずは手順を確認してみます。
※完成イメージの下のボタンを押してみましょう。

css

.sample div {
	margin:-120px 0 0 150px;
}

html



    
        バグポックル
        IT業界都市伝説の小人

        バグに悩まされウトウト居眠りしてしまい、目を覚ますとバグが知らない間に直っていたらこいつの仕業かも。

htmlの記述は全く同じですが
cssの量は半分くらいになってるのがわかると思います。
私の場合は、「画像の横に簡単な短い説明を載せるだけ」そんな感じレイアウトをサクッと組みたい場合に使っちゃってます。

やまぱん

この記事は
やまぱんが書きました。

入社2007年

出身地千葉

スキル昆虫採集・生き物の知識・揚げ足

今日のひとこと：サンマには胃袋がないんだってさ。