ガイドグループ世話人の日記

はてなダイアリーガイド

はてなダイアリーガイドの草稿置き場です。この日記へリンクはどこでもご自由にどうぞ。ガイドを作るガイドグループ参加もお気軽に*。グループに入らなくても、ガイドははてなダイアリー市民なら誰でも作成・編集できるものですのでよろしくどうぞ。

※MacOS9でInternetExplorerをお使いの方は、この日記にコメントを書き込もうとすると文字化けすることがあります。対処方法はこちらをご覧ください。

 | 

2004-10-11

position:static;で3カラムを作る

http://d.hatena.ne.jp/Yuichirou/20041010

http://d.hatena.ne.jp/Yuichirou/20041011(完成型)

わーちゃんと見えます、おめでとうございます。これは成功法を記録させてください。id:sasadaさんに感謝です。

div.main {
 position: static;
 float: right;
 margin-left: 0;
 width: 77%;
}

div.l-sidebar {
 position: static;
 margin-left: 2.5ex;
 width: 19%;
 _width: 100%;
}

div.left {
 position: static;
 float: left;
 width: 81%;
}

div.r-sidebar {
 position: static;
 float: right;
 _float: none;
 width: 16%;
 _width: 100%;
 margin-right: 2.5ex;
}


div.l-sidebar,div.r-sidebar,div.main,div.left {
 box-sizing: border-box; 
 -moz-box-sizing: border-box
 }

div.footer {
 clear: both;
}

かな。これだけだと整わないかもしれませんけど。構造が

(ヘッダ)
<div class="left">
 <div class="main">
(フッタ)
 </div>
 <div class="l-sidebar">左サイドバー中身</div>
</div>
 <div class="r-sidebar">右サイドバー中身</div>
<div class="footer">サイドバーの下</div>

かな。

http://beta.g.hatena.ne.jp/sugio/20041010にもYuichirouさんにコメントいただきました。ありがとうございます。

YuichirouYuichirou2004/10/11 11:46引用有難く存じます。ただ……
実はまた修正をしてしまって、スタイルシート部分が引用されたものと変わっています。
自分でも「ココはこうだからこう設定している」という説明も加えて掲載しようと思っています。

sugiosugio2004/10/11 11:50あ、お気遣いありがとうございます!これもまだメモですので、もしガイドのようにするなら、どういう形が汎用性が高いか、考えてみたいと思っています。

sugiosugio2004/10/11 11:52「ココはこうだからこう設定している」の文章もきっと参考にさせていただきます。よろしくお願いします。

 | 

ホームページ制作