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

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

Picture of ATFコンサルティングFIRM

ATFコンサルティングFIRM

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

HubSPot+ ATFC担当に相談する

目次

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

sample

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

sample2

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

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

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

SNS
Webサイト 長野県
WEBATF 長野閉鎖のお知らせ

WebATFNAGANOOFFICEは。2024年10.30日をもって閉鎖いたします。新型コロナ移行リモートが進行し長野松本市オフィスに増員し事業拠点を集約いたしました。Webサイト制作・Webサポートは松本OFFICE

ブログを読む »
AI
生成AIを使ったブログコンテンツの作成

生成AIを使ってブログ記事を作成する方法はいくつかあります。以下にその一般的な手順を示します トピックの選定: まず、ブログ記事のトピックを決めます。トピックは、読者が興味を持ちそうなテーマや、あなたの専門知識に関連する

ブログを読む »
インタビュー一覧
人材採用のキーポイントはWebサイトだった。

今年度こそ人材採用の成果を出す! 街には、新入社員らしき若者が目立つシーズになった。毎年、人材採用に苦戦している人事部人材採用担当は、今年も悔し涙を流しているのか? そこで、成果を毎年あげている企業は、Webサイト(コー

ブログを読む »
集客か?ブランディングか?Webリニューアル。
Webリニューアル:集客 vs ブランディング

Webサイトリニューアルの目的は集客か?ブランディングか? Webサイトのリニューアルを検討する際、多くの方が「集客」と「ブランディング」のどちらを優先すべきか悩むのではないでしょうか。結論から言うと、どちらを優先すべき

ブログを読む »