id
「id」属性は、要素に名前を割り当てます。この名前は文書中で一意でなければなりません。 すなわち「id」は、ページ中で一意に特定できる場所を示すために使われます。ですから、1ページ中に1度しか使えません。
たとえば、div要素などを用いて、ページを「上部」「本文」「下部」の3ブロックに区切ってレイアウトする場合を考えます。この場合、idを使って次のようにHTMLを（div要素を）記述するのが適しています。
【 例：id 】
上部 header <div id="header"> ヘッダー </div>
本文 main <div id="main"> コンテンツ </div>
下部 footer <div id="footer"> フッター </div>
この場合、上部（header）も、本文（main）も、1ページ中に2度以上登場することはありません。かならず1度だけです。このような場合に、idを使います。
上記のように「id」を使いデザイン「レイアウト」するのが一般的です。
レイアウトは本文の、id「main」の中に別のidを複数入れ、内容ごとに分けます。
例１：２段組（２カラム）
例２：３段組（３カラム）
以下、cssとhtmlの記述例
- [ 例：css ]
1 #header{width:600px} 2 #header{width:600px;text-align:center;background-color:#FF0000} 3 #header{
width:600px;
text-align:center;
background-color:#FF0000;
}
- [ 例：html ]
<div id="header">sasaki</div>
■ >>> ビジュアル
/* 表示の設定方法 */
name{display:block} /* ブロック要素 */
name{display:inline} /* インライン要素 */
name{display:list-item} /* リスト要素 */
name{display:none} /* 表示しない */
/* ポジショニングの設定方法 */
name{position:static} /* デフォルト：本来の位置 */
name{position:relative} /* 相対位置指定 */
name{position:absolute; top:100px; left:100px;} /* 絶対位置指定 */
name{position:fixed; top:100px; left:100px;} /* 絶対位置に固定 */
name{position:inherit} /* 継承（同上） */
/* 表示位置の設定方法 */
name{float:left} /* 左端 */
name{float:right} /* 右端 */
name{float:none} /* デフォルト：指定しない */
/* 横幅と高さの設定方法 */
name{width:500px} /* 横幅（単位付き数値：例（500px） パーセント形式：例（100%） 自動：auto） */
name{min-width:500px} /* 最小の横幅（単位付き数値：例（500px） パーセント形式：例（100%） 既定値：none） */
name{max-width:500px} /* 最大の横幅（単位付き数値：例（500px） パーセント形式：例（100%） 既定値：none） */
name{height:500px} /* 高さ（単位付き数値：例（500px） パーセント形式：例（100%） 自動：auto） */
name{min-height:500px} /* 最小の高さ（単位付き数値：例（500px） パーセント形式：例（100%） 既定値：none） */
name{max-height:500px} /* 最大の高さ（単位付き数値：例（500px） パーセント形式：例（100%） 既定値：none） */
/* 縦方向の配置 */
/* ベースラインあわせ：baseline 中央あわせ：middle 下付き文字の位置：sub 上付き文字の位置：super */
/* テキストの上限あわせ：text-top テキストの下限あわせ：text-bottom 上端あわせ：top 下端あわせ：bottom */
/* 継承：inherit パーセント形式：100% 単位付きの数値：0.3em */
name{vertical-align:top}
/* 線の設定方法 */
name{border:1px;} /* 上下左右すべての枠線を指定します。 */
name{border-style:solid;} /* 枠線のスタイル 線無し：none 実線：solid 点線：dotted 粗い点線：dashed 二重線：double 谷線：groove */
name{border-color:#000000;} /* 上下左右すべての枠線の色を指定します。 */
/* 内側の余白の設定方法 */
name{padding: 10px;} /* 上下左右すべての余白を指定します。 */