今回は、前回の応用(?)で2カラムのデザインを紹介。
CSS Designingは、簡単に言うと、四角い箱を上から積んでいって、
それを右に積むか、左に積むかを決めているだけなんです。
(そんなわけで、普通に右と左に積むだけじゃ、お互いの高さが違うとそこの先に積むボックス
の大きさとか考えないと、右と左のバランスがおかしくなったり、結構微妙。)
↑この文章わかりづらいので、後日、画像で説明しようかな
でも、基本がわかってしまえばそんなにむずかしくないはず!なんです。
(と、いいつつもいつも思った通りのデザインにならずにはまってしまうのですが・・・)
*******************
あ・・・勉強不足っぷりを発揮しました。なんかおかしいと思っていたら、CSSのクラス指定には
最初の文字に数字は使えないんですね(^^;
基本だと思いますけど、はまる人いると思いますので恥を忍んで・・・
(CSS内の .sub_2って部分です。 2_subと最初指定したらダメでした。)
*******************
それでは、今日のコピペです。
***********BODYタグの間に挿入して下さい******
<!-- start .container -->
<div class="container">
<!-- start .sub_container -->
<div class="sub_container">
<!-- start .main_2 -->
<div class="main_2">
<p>ここがメインウィンドウです。
ここにサイトの記事を書くと良いでしょう。 </p>
<p>←この空間はデザイン崩れ防止のために必須です。左側のカラムと右側のカラムをあわせて96%位の幅に抑えておくとデザイン崩れを防止できます。</p>
<p>
<!-- end .main_2 -->
</p>
</div>
<!-- start .sub_2 -->
<div class="sub_2">
<p>サブコンテンツはここへ</p>
<p>もし、サブコンテンツを右側に置きたい場合は、CSSの中の
.sub_2{
float:left;
}
のleftをrightに。
同様に、
.main_2{
float:right;
}
のrightをleftに変更して下さい。 </p>
<p> </p>
<p> </p>
<!-- end .sub_2 -->
</div>
<!-- end .sub_container -->
</div>
<!-- end .container -->
</div>
**********BODYはここまで*****************
**********CSSファイル。前回のCSSに追加して下さい*************
/*2カラム用のCSS*/
.main_2{
width:64%;
float:right;
background-color:#CCCC33;
}
.sub_2{
width:32%;
float:left;
background-color:#CCCC99;
}
*************************************************************
CSSはたったこれだけの追加で設定が出来ます。
いかがでしょうか?
2カラムの方が、現状では利用者多いかもしれませんね。
CSS Designingは、簡単に言うと、四角い箱を上から積んでいって、
それを右に積むか、左に積むかを決めているだけなんです。
(そんなわけで、普通に右と左に積むだけじゃ、お互いの高さが違うとそこの先に積むボックス
の大きさとか考えないと、右と左のバランスがおかしくなったり、結構微妙。)
↑この文章わかりづらいので、後日、画像で説明しようかな
でも、基本がわかってしまえばそんなにむずかしくないはず!なんです。
(と、いいつつもいつも思った通りのデザインにならずにはまってしまうのですが・・・)
*******************
あ・・・勉強不足っぷりを発揮しました。なんかおかしいと思っていたら、CSSのクラス指定には
最初の文字に数字は使えないんですね(^^;
基本だと思いますけど、はまる人いると思いますので恥を忍んで・・・
(CSS内の .sub_2って部分です。 2_subと最初指定したらダメでした。)
*******************
それでは、今日のコピペです。
***********BODYタグの間に挿入して下さい******
<!-- start .container -->
<div class="container">
<!-- start .sub_container -->
<div class="sub_container">
<!-- start .main_2 -->
<div class="main_2">
<p>ここがメインウィンドウです。
ここにサイトの記事を書くと良いでしょう。 </p>
<p>←この空間はデザイン崩れ防止のために必須です。左側のカラムと右側のカラムをあわせて96%位の幅に抑えておくとデザイン崩れを防止できます。</p>
<p>
<!-- end .main_2 -->
</p>
</div>
<!-- start .sub_2 -->
<div class="sub_2">
<p>サブコンテンツはここへ</p>
<p>もし、サブコンテンツを右側に置きたい場合は、CSSの中の
.sub_2{
float:left;
}
のleftをrightに。
同様に、
.main_2{
float:right;
}
のrightをleftに変更して下さい。 </p>
<p> </p>
<p> </p>
<!-- end .sub_2 -->
</div>
<!-- end .sub_container -->
</div>
<!-- end .container -->
</div>
**********BODYはここまで*****************
**********CSSファイル。前回のCSSに追加して下さい*************
/*2カラム用のCSS*/
.main_2{
width:64%;
float:right;
background-color:#CCCC33;
}
.sub_2{
width:32%;
float:left;
background-color:#CCCC99;
}
*************************************************************
CSSはたったこれだけの追加で設定が出来ます。
いかがでしょうか?
2カラムの方が、現状では利用者多いかもしれませんね。