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

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

ATFコンサルティングFARM

ATFコンサルティングFARM

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

HubSPot+ ATFC担当に相談する

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

sample

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

sample2

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

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

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

SNS

Share on facebook
Share on twitter
Share on linkedin

千曲市の工務店のWebサイトリニューアル

更埴建設株式会社【住宅部】 リニューアルWebサイトへ 千曲市工務店のweb design(ウェブデザイン PC用) 長野県千曲市にある更埴建設株式会社様の住宅部のホームページをリニューアルしました。更埴建設様には住宅部

ブログを読む »
CRM

デジタル時代X新型コロナ時代のWeb制作

ホームページの概念を捨てよう!それがデジタル化の第一歩 デジタイル省が来年創設するようですね。日本はアジアでもデジタル化が遅れている国です。中国・韓国・シンガポールなど市民生活にデジタルが活用されています。日本ではWeb

ブログを読む »

HubSpotのすべて

ダウンロード