CSSの基本パターンを教えてください。

質問

教本を読みながら勉強しておりますCSSビギナーです。

CSSのコーディングで「この組み方を知っておけば
ある程度カタチになる」といったものはあるのでしょうか？

どなたかお教え頂ければ幸いです。
よろしくお願いいたします。

回答No.2

noname#66720

例えば

<div>
<p id="CONTENT-1">CONTENT-1</p>
<p id="CONTENT-2">CONTENT-2</p>
<p id="CONTENT-3">CONTENT-3</p>
</div>

div {width:500px; height:500px; background:#ddd;}
p {opacity:0.8;}
#CONTENT-1 {background:#f00;}
#CONTENT-2 {background:#0f0;}
#CONTENT-3 {background:#00f;}

というHTMLとCSSがあったとして、divを3つの面に分割したレイアウトを考え、p要素をwidth、height、float、clear、position、margin、paddingのプロパティだけで1pxもズレることなく配置することができれば、ほとんどのレイアウトはできると思います。
その際、それぞれの面に配置するp要素を入れ替えたり、使うプロパティを制限したりするといろいろ学べるはずです。

補足

とてもわかりやすい参考意見
ありがとうございます。
CSSビギナーの私でも理解できました。

ジブンなりに勉強した
２カラムレイアウトです。

お忙しいところ申しわけありませんが、
参考意見を聞かせて頂ければ幸いです。

<div id="warpper">
<div id="header"><!--end header--></div>

<div id="contents">
<div id="main"><!--end main--></div>
<div id="sub"><!--end sub--></div>
<!--end contents--></div>

<div id="footer"><!--end footer--></div>
<!--end wrapper--></div>

#wrapper {
margin:0 auto;
width:760px;
overflow:hidden;
}
#contents {
float:left;
width:760px;
}
#main {
float:right;
width:500px;
padding-right:20px;
}
#sub {
float:left;
width:150px;
padding-left:20px;
}
#footer {
clear:both;
}

とこんな感じです。
よろしくお願いします。

回答No.1

神崎 渉瑠（@taloo）

プロとしてやっていくつもりなのか、趣味でやるつもりなのかわかりませんが、
趣味としてなら、

前提知識であるHTML（DOCTYPE、HTMLとXHTMLの違い）
セレクタの書き方
文字サイズと色 ： font、color、background
余白 ： margin、padding
枠線 ： border、width、height、overflow
二段組み、三段組みの書き方 ： width、float、clear
センタリング ： margin:autoとtext-align:centerの違い

これでたぶん９割以上のサイトと同じ物が書けると思います。

プロパティよりも、
セレクタをどの様に書くか、全部のタグにclassやidを付けるようなことをする必要もなく、書けるかどうか、
の方が重要です。

お礼

まだはじめたばかりで
全体像がみえなかったのですが
なんとなくわかりました。
talooさんありあがとうございました。