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

ATFコンサルティングファーム

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

ATFコンサルティングFIRM

ATFコンサルティングFIRM

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

HubSPot+ ATFC担当に相談する

目次

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

sample

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

sample2

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

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

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

SNS
インタビュー一覧
人材採用のキーポイントはWebサイトだった。

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

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

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

ブログを読む »
笑顔の女性
安曇野赤十字病院看護師採用サイト制作

安曇野赤十字病院看護師採用専用Webサイトへ 安曇野赤十字病院看護師採用専用サイトweb design(ウェブデザイン PC用) 看護師とのミーテイングを重ね仕事環境の改善を現実的に行い、それをコンテンツとしました。長野

ブログを読む »
Web制作会社
Webフォームに営業問い合わせが殺到する件

新しいWebフォームからお問合せが来たぞ! 「新しいWebフォームからお問合せが来たぞ!」と喜んでメールを確認すると営業メールだ。こんな日が毎日も続きます。言葉を変えて「協業」と言っているが、コピペでできるフォーム営業は

ブログを読む »
松本市ホームページ 見積もり
Web制作会社だけどコンサルティングファーム

企業のアドバイスなどのコンサルティング営業 ある日、ホームページ制作の依頼があり、依頼者の会社に訪れました。私が来社すると、厄介者が来たような目つきでその会社の従業員が私を見ていました。そんな会社で、売れるホームページな

ブログを読む »