Yuichirouの文書の倉庫

記事一覧ページ

 | 

2004年10月16日

左右サイドバー簡易版(第4版) 18:55

本家:d:id:Yuichirou:20050206#1107675707

自分はソース上の順番を「div.main→div.l-sidebar→div.r-sidebar」にしたかった為に、前に書いたような難しいスタイルシートを使っているのですが、もっと簡単な方法があったりします。

Win版IE6SP1・FireFox1.0PR・Opera7.53にて確認。MacOS X版IE5.2・MacOS 9版IE5.0・Safari1.0でも表示可能とのこと。

ページのヘッダ

<div class="l-sidebar">
(左サイドバー部分)
</div>
<div class="r-sidebar">
(右サイドバー部分)
</div>
<div class="main">

ページのフッタ

</div>

スタイルシート

/* 例:左右マージン:各2%・左右サイドバー:各16%の場合 */
div.l-sidebar, div.r-sidebar, div.main {
	border-left-width: 0; border-right-width: 0;
	padding-left: 0; padding-right: 0;
}
div.l-sidebar {
	position: static;
	float: left; width: 16%;
	margin-left: 2%; /*\*/_margin-left: 1%;/**/
	/* IEにだけはマージンを半分に設定↑ */
}
div.r-sidebar {
	position: static;
	float: right; width: 16%;
	margin-right: 2%; /*\*/_margin-right: 1%;/**/
	/* IEにだけはマージンを半分に設定↑ */
}
div.main {
	position: static;
	width: auto;
	margin-left: 18%; margin-right: 18%;
	/* ↑(マージンの%)+(サイドバーの%)↑ */
}
div.footer {
	clear: both;
}
/* ←これがミソ

「/*」について

「スタイルシート」の最後の「/*」は、はてなダイアリーのシステムが自動的に付加する

div.body {
	clear: both;
}

を無効化させるものです。その為、正確には「スタイルシート」の最後に付けてください。

「clear: both;」は本来、img.photo(日記に登録された画像)のfloatに対してのみ適応されるべきものですが、OperaやSafariでは左右のサイドバーのfloatに対して適応されてしまうのです(ちょうどdiv.footerのように)。

一応これによる支障はないようですが、バグでしょうか…仕様でしょうか…?

トラックバック - http://yuichirou.g.hatena.ne.jp/Yuichirou/20041016
 |