スタイルシート:段組 StyleSheet web design

スタイルシート:段組

 サンプルプレビュー
ボックス名はb1
スタイルシートよる段組です。このボックスのスタイルシートのプロパティはfloatです。必ずwidthプロパティも一所に記述します。
ボックス名はb2
スタイルシートよる段組です。このボックスのスタイルシートのプロパティはfloatです。必ずwidthプロパティも一所に記述します。
 コード
スタイルシート部分 
.b1      { float: left; width: 160px; }
.b2      { float: left; width: 200px; }
.b-title { font-weight: bold; }
.b-moji  { padding: 5px 20px 5px 0px;
           line-height: 140%;
         }
.cl      { clear: left; }
html部分 
<div class="b1">
 <div class="b-title">ボックス名はb1</div>
 <div class="b-moji">スタイルシートよる段組〜</div>
</div>

<div class="b2">
 <div class="b-title">ボックス名はb2</div>
 <div class="b-moji">スタイルシートよる段組〜</div>
</div>

<div class="cl">
 <img src="images/sp.gif" width="1" height="1" alt="">
</div>
 解説
ボックス名はb1
スタイルシートよる段組です。このボックスのスタイルシートのプロパティはfloatです。必ずwidthプロパティも一所に記述します。
ボックス名はb2
スタイルシートよる段組です。このボックスのスタイルシートのプロパティはfloatです。必ずwidthプロパティも一所に記述します。
赤枠がb-moji(内側にtop,right,bottomの余白が出来てます)
青枠がb1(widthが160px),b2(widthが200px)
※floatプロパティを使った場合は必ずclearプロパティを入れる
※floatプロパティのボックスは必ずwidthプロパティを入れる
※paddingやmarginのleft,rightを入れたボックスにはwidthを入れない事。入れ子にしてボックスを分ける(IE5などの対策)
※私個人として、NN4とかIE4.5(Mac)、それ以前のブラウザはホームページの対応させる事をあきらめました。(ウィンドウズのIE5/IE5.5/IE6だけででシェア95％と言われております)

※記述は独自で制作したものであり、正規な記述方法では無い場合があります。また間違っている所やもっと良い方法等ありましたらご連絡下さい。
｜   Link  ｜   Profile  ｜   Sitemap  ｜