この記事を書いたきっかけ
ブログのデザインを自分でアレンジするために、HTMLの勉強をしている。
で、サイドバーの幅を変えようとスタイルシートをいじってみたが、なかなか上手くいかなかった。
そこで、このデザイン(hatena2-white)が、どのようにしてサイドバーを設置しているかを調べてみて、結果わかったことについて書く。
(追記:2011年現在、このブログは一から自分で作ったCSSを使用している。)
エントリ部分とサイドバーのクラス名
まず、タイトルの部分はH1要素になっている。それより下の部分は、.mainと.sidebarというクラス名がついていて、.mainがエントリなどの本体部分(メイン部)、.sidebarがサイドバー部分(サイドバー部)を構成している。
「hatena2」のスタイルシート
それぞれのクラスは、CSSで下のように指定されている。
.main { background:none repeat scroll 0 0 #FFFFFF; float:left; text-align:left; width:100%; } .main div.calendar, .main div.day { margin-right:235px; } .sidebar { border-bottom:1px solid #D2D6DE; border-left:1px solid #D2D6DE; float:right; line-height:1.5; margin-left:-222px; overflow:hidden; width:220px; }
hatena2のサイドバーの仕組み(考察)
- メイン部とサイドバー部をそれぞれ左右にフロート。
- メイン部の幅を100%、サイドバー部の幅を220ピクセルに指定。
- メイン部に235ピクセルの右マージン。
- サイドバー部に222ピクセルの左ネガティブマージン。
- サイドバー部がメイン部の右側に回り込む。
で、問題は4から5の部分。
なぜネガティブマージンを指定するとサイドバー部が回り込むのか。
メイン部の幅は100パーセントなので、普通ならフロートにしても回り込まないはずだ。
ネガティブマージン
そこで重要になるのがネガティブマージン。
マージンの値が指定するのは、「ボーダー」と「他の要素との境界=外辺」との間隔だ。
参考:ボックス/HTML基礎講座
ということは、左マージンに負の値を指定すると、左外辺は左のボーダーよりも右側になる。
簡単に言えば、ボックスの中身がボックスの枠より左にはみ出す。
このはてなデフォルトデザインの場合、サイドバー部の左外辺は右外辺よりも右にある。図としてイメージしづらいがそうなっている。
すると何が起こるか。ここからは仮説。
まず、サイドバー部は右フロートなので、右外辺が右端に接しようとしている。
一方、フロートなので上にも行こうとする。
もし、サイドバー部の左外辺がメイン部の右外辺よりも左になってしまうとき、つまりメイン部とサイドバー部が重なるとき、サイドバー部は上に上がれない。
しかし、サイドバー部の左外辺は全体の右端よりも右にあるため、メイン部の右外辺より右になる。つまり重なっていないと判定されていると思われる。
そのため、サイドバー部がメイン部と同じ高さまで上がることが出来る。
言葉だと非常に説明しづらいが、多分そういうことだと思う。
書いているうちによくわからなくなったが結論。
結論
ネガティブマージンは、幅を固定したサイドバーを設置するのに使える。
あとFirebug便利。
Firebug :: Add-ons for Firefox