十日目！（セレクタ～プロパティ～）

日曜ですが、CSS進めていきます。

●セレクタの組み合わせ
セレクタは組み合わせて利用できる。たとえば「#header h1｝と指定した場合「id="header"」に子孫要素として含まれるh1要素にスタイルが適用される。

クラスや擬似クラスを利用したやや複雑な子孫セレクタの例

#main .highlight ul li a:link {
  color: #000080;
}
#main .highlight ul li a:visited {
  color: #800080;
}


●セレクタのグループ化
セレクタをカンマ区切りでグループ化し、同じスタイルを同時に適用できる

h1,h2,h3 {
  color: #ff6600;
}


子孫セレクタを利用している場合など、長いセレクタをグループ化するときは、カンマごとに改行すると見やすい。

#utility-nav ul li a:link,
#global-nav ul li a:link,
#local-nav ul li a:link {
  color: #0000cc;
}
#utility-nav ul li a:visited,
#global-nav ul li a:visited,
#local-nav ul li a:visited {
  color: #cc0000;
}


●プロパティ
ボックスモデルのプロパティ
XHTMLの要素にはそれぞれ自分の領域をもっている。領域は「四角形」ときまっていて、この四角形の領域のことを「ボックス」という。ボックスはさらに４つの領域によって構成されている。
１、内容（content）・・・・・・・・・・・・・要素含まれるテキストや画像などの内容
２、パディング（padding） ・・・・・・・・内容とボーダーとの余白
３、ボーダー（border） ・・・・・・・・・・枠線
４、マージン（margin）・・・・・・・・・・・ボーダーと他の要素の間隔

このようなしくみを「ボックスモデル」といい、CSSでページの見た目を決めていく上でもっとも大切な考え方。

●margin／paddingプロパティ
マージンとパディングは、marginプロパティとpaddingプロパティで指定。どちらも値の数によって上下左右どこに適用されるかが次のように変わってくる。

• 値がひとつ・・・・・「上下左右」
• 値がふたつ・・・・・「上下」「左右」
• 値が３つ・・・・・・・「上」「左右」「下」　　
• 値が４つ・・・・・・・「上」「右」「下」「左」

たとえば、「margin: 5px 10px 8px」という指定は値が３つなので、上が5px、左右が10px、下が8pxのマージンとなる。

●borderのプロパティ
値には「太さ」「形状」「色」をスペース区切りで指定。たとえば「1px solid #ff6600」。太さには「thin」「medium」「thick」という細・中・太の3段階の値のほか、任意の太さが指定できる。形状は一重線の「solid」、点線の「dotted」、破線の「dashed」、二重線の「double」。
太さ・形状・色は（-width、-style、-color）を別々指定したり上下左右（-top、-right、-bottom、-left)
の4辺に分割し、別々の値を設定することもできる。
たとえば、「border-bottom: 2px dashed #cc0000」

●width／heightのプロパティ
内容の幅と高さのプロパティ。マージン、ボーダー、パディングは含まれない点に注意。


●視覚整形モデルのプロパティ
displayプロパティ
生成するボックスの種類を指定。「block」「inline」「list-item」「none」などの値が指定できる。通常、ブロックレベルとして生成されるボックス（たとえばli要素）に「inline」と指定してインライン化したり、逆にインラインとして生成されるボックス（たとえばa要素）に「block」と指定してブロックレベル化する、といった目的で利用。

●positionプロパティ
ボックスの配置方法を指定。相対配置、絶対配置、固定配置を意味する「relative」「absolute」「fixed」や元の位置（通常位置）に戻すための「static」という値が指定できる。さらに、top、right、bottom、leftプロパティで細かく位置きめでき、さらにボックスの重なり順序をz-indexプロパティで指定できる。

※テキストに説明の画像とかのっていたがイマイチわからずorz

●floatプロパティ
ボックスを左右にシフトさせることを「フロート」という。floatプロパティで「right」「left」などの値が指定できる。画像を左や右に配置し、テキストを回りこませるのが代表的な使い方。

フロートの解除にはclearプロパティを利用し、「right」「left」「both」という解除方向を値として指定。

実務的には、マルチカラム（段組み）レイアウトを実現するために、これらのプロパティがよく使われる。メイン部分を左に、サイド部分を右にフロートさせ、後続の内容をクリアさせる、といった使い方。





#main {
 width: 70%;
 float:left;/*左にフロート*/
}


#side {
 width: 30%;
 float:right;/*右にフロート*/
}


#footer {
 clear:both;/*フロートのクリア*/
}






今日はここまで。