長野県長野市・松本市ウェブ制作事業部 コンサルテイング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 design (ウェブデザイン PC用) 住宅モデルハウスの完成に併せ、サイトリニューアルのご依頼をいただきました。モデルハ

ブログを読む »
ホームページで売上を上げる魔法の言葉

ホームページで業績を上げる魔法

よくWeb製作者の声を聞くとWeb 2.0だ、CGMだ、AjaxだとかWordpressやDB、そしてLPなどの言葉が聞こえてきます。しかし、そんな話はWeb屋さんなどの業界の話で、地方の中小企業の経営者やウェブ担当にと

ブログを読む »
DX

スマホを核とした小売業のDXこそチャンス!

スマートフォンを核としたDXはリテール(小売業)マーケティングとして他社との差別化・効果性・効率性・サービスの質の向上に役立ちます。それは、コトラーのリテール4.0 デジタルトランスフォーメーション時代の10の法則を読め

ブログを読む »
松本市ホームページ制作

工務店・リフォーム会社のお盆WEB戦略「このときユーザはホームページであなたの会社を探します!」DX推進してみましょう。

工務店・リフォーム会社のお盆WEB戦略 「このときユーザはホームページであなたの会社を探します!」今からでも遅くないDX ウェブ制作の仕事を長野県で初めて10年以上、Googleアナリティクス(アクセス解析)を観察してい

ブログを読む »