rh日和(仮)

モノ、ゲーム、PCなどについてのブログ。

はてなダイアリーのデフォルトデザインはどのようにサイドバーを設置しているか。

この記事を書いたきっかけ

ブログのデザインを自分でアレンジするために、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のサイドバーの仕組み(考察)

  1. メイン部とサイドバー部をそれぞれ左右にフロート。
  2. メイン部の幅を100%、サイドバー部の幅を220ピクセルに指定。
  3. メイン部に235ピクセルの右マージン。
  4. サイドバー部に222ピクセルの左ネガティブマージン。
  5. サイドバー部がメイン部の右側に回り込む。

 
で、問題は4から5の部分。
なぜネガティブマージンを指定するとサイドバー部が回り込むのか。
メイン部の幅は100パーセントなので、普通ならフロートにしても回り込まないはずだ。
 

ネガティブマージン

そこで重要になるのがネガティブマージン。
マージンの値が指定するのは、「ボーダー」と「他の要素との境界=外辺」との間隔だ。
参考:ボックス/HTML基礎講座
ということは、左マージンに負の値を指定すると、左外辺は左のボーダーよりも右側になる。
簡単に言えば、ボックスの中身がボックスの枠より左にはみ出す。
 
このはてなデフォルトデザインの場合、サイドバー部の左外辺は右外辺よりも右にある。図としてイメージしづらいがそうなっている。
すると何が起こるか。ここからは仮説。
まず、サイドバー部は右フロートなので、右外辺が右端に接しようとしている。
一方、フロートなので上にも行こうとする。
もし、サイドバー部の左外辺がメイン部の右外辺よりも左になってしまうとき、つまりメイン部とサイドバー部が重なるとき、サイドバー部は上に上がれない。
しかし、サイドバー部の左外辺は全体の右端よりも右にあるため、メイン部の右外辺より右になる。つまり重なっていないと判定されていると思われる。
そのため、サイドバー部がメイン部と同じ高さまで上がることが出来る。
言葉だと非常に説明しづらいが、多分そういうことだと思う。
 
書いているうちによくわからなくなったが結論。
 

結論

ネガティブマージンは、幅を固定したサイドバーを設置するのに使える。
あとFirebug便利。
Firebug :: Add-ons for Firefox