classとid

スタイルシートでは予め幾つかのパターンを作って置いて、状況に応じて使い分けることができます。
CLASS 属性による方法と、ID 属性による方法の２つの使い方があります。記述上から見るとどちらの場合でも殆ど同じような使い方で、使用する記号が異なる点と複数回使用できるか、できないかの違い位です。しかし id 属性の場合は一つのページで１回のみ使用(多分同型での使用を禁ず）となっており、かなり窮屈な面がありますがその分強力なユニーク性があるようです。（下記id 欄ではタグを変えたテストをしました。）

それではどちらを使うかということになりますが、使い方自由で双方同時に使っても構いません。今度は、パターン設定とその使用法になります。

１．特定のタグだけに CLASS 属性とか ID 属性を用いた複数のパターンを設定し、場面に応じてその内の「或るパターン」を使用する。
２． CLASS属性とかID属性を用いて各種パターンを「タグとは無関係に勝手に」設定して置いて、後で任意のタグから呼び出してその内の「或るパターン」を使用する。

例えば「ここでは、こういう形状で表示したい」と思ったとき、設定済のCLASS名やID名を<body>～<body>内の「任意のタグ」から下記の形で呼び出し、実行させるのです。(注：CLASS名やID名は英数字なら全く自由な名前が付けられます。)

CLASS属性の場合： <要素名="class名">内容</要素名>

ID 属性の場合： <要素名="id名">内容</要素名>

CLASS または ID というこの識別子を利用範囲の広い<div>タグ（包括的とも汎用的ともいわれ、「ブロックコンテナ・タグとして <body> タグ並み･･いや、インライン要素を子要素に持てるので、それ以上か？オールマイテイ的･･の権限を有す。）と組み合わせることで、千変万化のスタイル設定ができるといわれております。

(このページはIE6.0で正常に見えますが、NN7.0では文字がか重なってしまいます。適正なheight:など模索中です。）

0.◎CLASS 属性によるスタイル・パターンの設定◎

上の説明では「タグとは無関係に任意に設定できる」となっていますが、ここでは要素 div に特定し、その効果を試してみました。（特定したのは、要素 div だけで使うことが初めから分かっているからです。）

トップ以外の背景色灰色の部分は div タグを使用し、夫々下記が適用されています。
「0.◎」は div タグに標準設定の属性を適用
「1.◇」は class 属性使用で「div.font1 を適用」
「2.◇」は class 属性使用で「div.font2 を適用」
「3.◇」は class 属性使用で「div.font3 を適用」
（適用内容は「1.◇スタイル・パターン設定のソース◇」をご覧ください。

▼ class（クラス）属性▼
クラス属性とは、使用するセレクタの「一つのパターン」として識別され、その名前（任意に設定）を換える毎に異なった設定が適用できる仕組みになっています。

なお、同一のHTML内で何度も使用できます。クラス名は大文字と小文字が識別しますので要注意です。

<div>タグにCLASSを添える
<head>～</head>間の「CSS文書の記述」（エンベデイングスタイル）では
セレクタにピリオド「. 」を用いて下記のように記述します。

（任意のタグで使用する形式）
　　.font1 { color: ***; font-size: **pt; text-align: ***; }

（divタグに特定した場合）
div.font1 { color: ***; font-size: **pt; text-align: ***; }

と記述し、３っつの属性・値を設定してみました。（今回はdiv特定の形式で行いました。）

<body>～</body>間の「HTML文書の記述」（インラインスタイル）では
クラス属性「class= 」を用いて下記のように記述します。
<div class="font1">1.◇スタイル・パターン設定のソース◇</div>
と記述します。

（リンキングスタイル、エンベデイングスタイル、インラインスタイル[参照⇒スタイル設定の場所] ）

1.◇スタイル・パターン設定のソース◇(テスト１)

上の灰色部分は <div> タグの標準設定の背景色です。
文字色、フォントサイズ、文字列位置の３点についてはclass属性で下記のとおり
設定してあります。

　div.font1 {                
　　　　　　　　color: red;
　　　　　　　　font-size: 28pt;
　　　　　　　　text-align: left; }


  /*今回の課題は下記 div font1, 2, 3 はclass属性によるパターン設定です。*/

  div.font1 {                 /* class 属性による div パターン1 の設定*/
                color: red;                      /*文字色*/
                font-size: 28pt;                 /*文字サイズ*/
                text-align: left; }              /*文字を左揃いに*/

  div.font2 {                 /* class 属性による div パターン2 の設定*/ 
                color: green;
                font-size: 20pt;
                text-align: center; }

  div.font3 {                 /* class 属性による div パターン3 の設定*/
                color: blue;
                font-size: 14pt;
                text-align: right; }
 
  div   {     　　　　　　　　/* div の標準設定です*/    
         text-align: center;           
         color: #000000;                   
         font-size: 14pt;                  
         font-family: ＭＳ 明朝;           
 　　　　line-height: 100%; 
               
         padding-top: 17px;
         width: 600px;
         height: 70px;
         background-color: #eeeeee; } 

　/*ここまで今回の課題です。 
　　div タグに関して、文字色、フォントサイズ、文字列位置を４っつの
　　パターンで設定してあります｡ 各々の[値]の違いを確認してください｡*/

◎スタイル・パターンの設定ーその２．◎

▼ ID（アイディー）属性▼
id属性は、セレクタに対して固有の「拡張子」として区別され、同一のHTML文書内では１回しか利用できません。これを無視すると、表示が極端に遅くなったり、表現が無視される場合があります。

しかし、現実には「ブラウザ」が区別しないのか、できないのか分かりませんが複数回実行されているようです。
id属性で付ける名前は大文字と小文字を区別しますので、また、ブラウザNNでは最初の一文字に数字を使うと正しくは表示されないようです。注意してください。

<div>タグに # を添える
<head>～</head>間の「CSS文書の記述」では
セレクタにナンバー記号「# 」を用いて下記のように記述します。
div#test { color: ***; font-size: **pt; text-align: ***; }
と記述します。
<body>～</body>間の「HTML文書の記述」では
id 属性を用いて下記のように記述します。
<div id=test>◎スタイル・パターンの設定ーその２．◎</div>
と記述します。

▼ CLASS 属性とID 属性の記述の比較▼
下記をご覧ください。特にセレクタ部の記述だけが変わっています。
div.test { font-style: italic; text-align: center; color: purple;}
div#test { font-style: italic; text-align: center; color: purple;}

両者とも全く同じ内容のスタイルシートです。前者はクラス属性によって読み込み、後者は id属性によって読み込まれます。後者を実際に「◎スタイル・パターンの設定ーその２．◎」で使用しました。

注釈：この背景白色部分の斜体を取れないかに就いてご説明いたします。
上の灰色部分に<div>タグを使用し、下の<p>タグを入れ子にしました。目的は<p>タグの領域枠の左右の枠線灰色部分にぴったりとくっつくようにした、苦肉の手段です。
また、一番上のケースでは、うまくくっつける方法がみつかりませんでした。このタグ遊びだけで丸々１日ついやしてしまいました。下段２項目のように、テーブル使用が適切なのかと思いました。

テストの欄です。
ここでは<p>タグに id 属性を付加してみました。
上では<div>タグ使用の「◎スタイル・パターンの設定ーその２．◎」にid 属性を使用してありますが、タグを変えた場合どうなるかのテストです。

<head>～</head>間の「CSS文書の記述」ではセレクタにナンバー記号「# 」を用いて下記のように記述します。
ここでは、前回と違い要素を特定でず、セレクタdivをカットして#testから記述しました。
#test { font-style: italic; text-align: center; color: purple;}
<body>～</body>間の「HTML文書の記述」では id 属性を用いて下記の記述になります。
<p id="test">内容</p>

◇もう一つの実験◇

ここ迄はタグの持つ「領域とその枠」を使用して作成しました。（テーブルは使いません。）
下はテーブルを使った「或るサイト」のコピーを比較のため使用させていただきました。
なた、この図柄は私が以前から考えていたもので、従来使用の上側の枠線をはずしたものです。
殆ど同じようにできましたでしょうか。？

CLASS 属性と ID 属性