【ネガティブマージン】3カラムレイアウトでの使用例

TwentyFourteenのスタイルシートを読んでいると見たことないコードを発見。

#secondary {
		background-color: transparent;
		border: 0;
		clear: none;
		float: left;
		margin: 0 0 0 -100%;
		min-height: 100vh;
		width: 122px;
	}

margin: 0 0 0 -100%;
(margin-left:-100%;)

margin:-100% ??????????
画面外じゃないのかと思ったのですが、調べてみると「ネガティブマージン」というそうで、結構使われている手法だそうです。
最初は理解できませんでしたが、調べていくうちに理解できたのでかるくまとめます。

ここのサイトがソースコードも公開されており理解しやすかったです。
【CSS】3カラムレイアウト-左右は固定幅、中央は残りの幅目一杯に広がるレイアウト

3カラムレイアウトのネガティブマージン

完成形はこれです。
3カラム完成形

右左のサイドバーは固定幅で#contentが可変幅です。

#leftと#rightのマージンを0にした時

#left#right_margin0

#contentの左右マージンがあるので下に続きます。

#leftのマージンを-100%にした時

#left_margin100minus

#contentのマージンを相殺して、#leftがしっかり収まっています。

#leftのマージンを-110%にした時

#left_margin110minus
上にずれるのかなと思ったのですが、画面外にはみだした形になりました。

まとめ

このパターンはHTMLで

  1. #content
  2. #right
  3. #left

の順にマークアップされ、SEO的にもいいそうな。

floatの定義をしっかり理解していれば、ネガティブマージンについてもすぐに理解できるはずです。

スポンサーリンク
RESAD
RESAD

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
RESAD