2004年10月15日の記事から抜粋
CSSのクラス指定時の些細な注意
*******************
あ・・・勉強不足っぷりを発揮しました。なんかおかしいと思っていたら、CSSのクラス指定には
『最初の文字に数字は使えない』んですね(^^;
基本だと思いますけど、はまる人いると思いますので恥を忍んで・・・
（CSS内の .sub_2って部分です。 2_subと最初指定したらダメでした。）
*******************
CSSのクラス指定時の些細な注意
*******************
あ・・・勉強不足っぷりを発揮しました。なんかおかしいと思っていたら、CSSのクラス指定には
『最初の文字に数字は使えない』んですね(^^;
基本だと思いますけど、はまる人いると思いますので恥を忍んで・・・
（CSS内の .sub_2って部分です。 2_subと最初指定したらダメでした。）
*******************
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カラムの方が、現状では利用者多いかもしれませんね。
ここのランキングって何で決まってるんですかね・・・？（初心者でごめんなさい。
特にコメントも何もついてないのに、ランキングがアップしているのはなんでだろう。んーーー、不思議だ。
ここ 長い人誰かレクチャーしてくださいっ！（ってまず自分で調べろというわけで（汗
まだまだ初心者ですが、頑張って参ります。
最近、NucleusによってBlogサイトの構築をやってるのですが
プログラムとか全くの素人だったので、なかなか苦戦しました。
これによってCSSの勉強にもなったんですけどね。
やっとこ、そちらが落ち着いてきたので、ブログでも始めてみようかと思った次第です（って自分のところでやれって話ですが、それはそれということで。
今日も頑張っていきましょう。相変わらず天気は微妙。
あと、記事が自動で短くならないのは不便かも。
一覧になっちゃって、HTMLのソースとか書くと、もうそれだけで
ずらずらと・・・こりゃまいった。。。
特にコメントも何もついてないのに、ランキングがアップしているのはなんでだろう。んーーー、不思議だ。
ここ 長い人誰かレクチャーしてくださいっ！（ってまず自分で調べろというわけで（汗
まだまだ初心者ですが、頑張って参ります。
最近、NucleusによってBlogサイトの構築をやってるのですが
プログラムとか全くの素人だったので、なかなか苦戦しました。
これによってCSSの勉強にもなったんですけどね。
やっとこ、そちらが落ち着いてきたので、ブログでも始めてみようかと思った次第です（って自分のところでやれって話ですが、それはそれということで。
今日も頑張っていきましょう。相変わらず天気は微妙。
あと、記事が自動で短くならないのは不便かも。
一覧になっちゃって、HTMLのソースとか書くと、もうそれだけで
ずらずらと・・・こりゃまいった。。。
以下、コピーしてお使い下さい。
（*今回はカラムの紹介ということで、カラー設定などは、センス無しというか、全く考えてません。その辺は、また別の記事で。）
********HTMLソース。BODYタグの間に入れて下さい。********
<!-- start .container -->
<div class="container">
<!-- start .sub_container -->
<div class="sub_container">
<!-- start .leftside 2col -->
<div class="leftside">
左側のカラムは、カラム１・２を含んでいます。
<!-- start .left_leftside -->
<div class="left_leftside">
カラム１の内容はこちら
<!-- end .left_leftside -->
</div>
<!-- start .right_leftside -->
<div class="right_leftside">
カラム２の内容はこちら
<!-- end .right_leftside -->
</div>
<!-- start .leftside_end -->
<div class="leftside_end">
カラム３はここまでです
<!-- end .leftside_end -->
</div>
<!-- end .leftside 2col -->
</div>
<!-- start .rightside 1col -->
<div class="rightside">
<p>カラム３の中味はここです。</p>
<p> </p>
<p> </p>
<p> </p>
<!-- end .rightside 1col -->
</div>
<!-- end .sub_container -->
</div>
<!-- end .container -->
</div>
*********CSS 部分*******************
スタイルシートは、HTMLと別ファイルで準備します。
Webの構成が
/public_html/
┣/htm/
┃ ┗***.htm
┗/css/
┗cssdesign.css
となっていた場合は、***.htmに
<link href="../css/cssdesign.css" rel="stylesheet" type="text/css" />
と記入し、CSSへのリンクを張って下さい。
********CSS source*******************
/* CSS Document */
/* Author:George */
/* version: Oct.13 2004 */
body{
margin:0;
text-align:center; /*IE 5.5以前用センタリング*/
}
/*大外を囲む枠はcontainer
その内側にsub_containerをおく。
これをすることで、外側を囲うDIVからなかにはいるDIVが
はみ出さないようにするため。
本体の幅はcontainer内のwidthで設定。変更したい場合はwidthを変更する。
カラム本体の幅の変更については
カラム１・２の合計幅＋カラム３の幅で構成されているので
カラム３の幅を変更したい場合は
カラム３：rightsideのwidthを希望値に変更後
カラム１・２を囲っているカラム leftsideの幅を変更。
合計で96％位になるように設定すること（100％にするとデザインが崩れる場合がある）
その上で、カラム１・２の幅を変えたい場合は
カラム１：left_leftside
カラム２：right_leftside
内の幅を変更。*/
.container{
width:80%;
margin:0 auto; /*新しいWebブラウザ用センタリング*/
text-align:left; /*centerを左揃えに戻す*/
background-color:#000000;
background-width:thin;
}
.sub_container{
width:100%;
float:left;
background-color:#CCCCCC;
}
/*3カラム用CSS*/
/*左側の二つのカラムをひとまとめにする*/
/*floatでまず、左の二つをまとめたカラムをleftに設定。
右のカラムをrightに設定。
そうした上で、カラム１をleft、カラム２をrightと設定。*/
.leftside{
width:67%;
background-color:#FF0000;
float:left;
background-width:thin;
}
.left_leftside{
width:27%;
background-color:#009966;
float:left;
background-width:thin;
}
.right_leftside{
width:70%;
background-color:#99CC99;
float:right;
background-width:thin;
}
/*右側のカラムの設定*/
.rightside{
width:30%;
background-color:#FF00FF;
float:right;
background-width:thin;
}
******************************************
これで、3カラムデザインが完成。
詳しいことは、次回にて。
ここ、デザインあんまり変えられないのかな・・・
早くもブログ変更の予感！？