長野県長野市・松本市ウェブ制作事業部 コンサルテイングFIRM

floatさせたボックスをキレイに並ばせる方法

ATFコンサルティングFIRM

ATFコンサルティングFIRM

マーケティングがあなたのビジネスの目標達成を支援します。

HubSPot+ ATFC担当に相談する

WEB制作をする上で画像やテキストを含ませたボックスを並ばせるレイアウトを作ることが多くある思う。
例えば下のようなデザイン。よく見かけるおなじみのレイアウトだ。

sample

大抵は複数のボックス共通のCSSを定義し横に並べて、幅いっぱいに到達したらカラム落ちしてキレイに並ぶといった仕組みだろう。
当然ボックスとボックスの間にはマージンを付けたいのだが、一番端にくるボックスが上手く並ばないことがよくあると思う。

sample2

そうした時に、従来ならJavascriptでキレイに並べられるライブラリを使う方法などがあったが、WEB制作者ならそんなところにJavascriptの手を借りたくないというのが本音だろう。
現在ではCSS3のnth-child()という、要素が何番目の子要素かによって該当するものにだけCSSをかけることができる疑似クラスがあるようだが、今のところまだレイアウトに関わる部分はCSS3を使うことは気が進まない。今日も同僚のデザイナーとそんな話をした(IEユーザがまだまだ多いため)。

そんなときに使えるのが親ボックス(親要素)にネガティブマージンを付けてあげる方法。横並びするボックス(子要素)に右マージンを付けているのなら、その親ボックスにマイナスの右マージンを付けてあげればいい。この方法ならIE6にも対応させることができるはずだ。

昔から多用してきたにも関わらずネガティブマージンという名前は知らなかったが、是非ためしていただきたい。サンプルコードは書きませんので。悪しからず。

SNS

世界がどれだけ変わっても、顧客体験の重要性は変わらないーHubSpot CCOが考える成長戦略

顧客体験(カスタマーエクスペリエンス)をどのように取り組むか?ローカル企業の課題

顧客体験(カスタマーエクスペリエンス)とは? 顧客体験(カスタマーエクスペリエンス)とは、顧客が製品やサービスと接触し興味を持った時点から、購入して利用し続けるまでの、すべての企業との接点のことでう、それにマーケティング

ブログを読む »
今どきのホームページ

今どきのホームページ-2022年夏

ホームページは今どきWebサイトと言います 多くのビジネスパーソンがビジネスホームページの変化に気づいていないようです。それは、Webサイト(ホームページ)から具体的に効果を得られていない企業の経営者に多いいようにも感じ

ブログを読む »