id と class

id と class は、HTLM タグの属性として、利用します。
id は、HTLM の同一ページ内では、同じ名前を重複して使えません。これに対して、class は、同じクラス名を複数箇所で使えるところが違います。また、スペースで区切ることにより同一タグに対して、複数のクラス名を定義することが出来ます。

id と class の例

div と span を使った利用方法の例を示します。次のサンプルをクリックしてください。
サンプル: div と span のサンプル
このサンプルのソースリストは、次の通りです。

<html>
<head>
<title>div と span のサンプル</title>
<style type="text/css">
 body { background-color:yellow }
 .ch_red { color:red; }
 .ch_blue { color:blue; }
 #cntnts { width:400px;background-color:white }
 #main { width:250px;background-color:pink;float:left }
</style>
</head>
<body>
<div id="cntnts">
<div id="main">
<h1>見出し1</h1>
<p>
見出し1の段落の内容。class で、範囲を指定した文字の色を変えます。<span class="ch_red">赤文字</span>と<span class="ch_blue">青文字</span>の色を、<span class="ch_red">赤</span>と<span class="ch_blue">青</span>にします。
</p>
</div>
<h2>見出し2</h2>
<p>見出し2の段落の内容。</p>
</div>
</body>
</html>

div には id の名前を、span には class 名をつけて、その範囲の表示を CSS で指定しています。 id="cntnts" では、body の下位の階層をすべて囲み、ページの幅の指定をしています。id="main" の範囲は、メインコンテンツとして、幅を多めに取って左側にレイアウトしました。
class には、指定した範囲の色を変えてみました。

PR amazon

author

サイト管理人:パワーデジット
管理人への連絡フォーム

ロリポップ! レンタルサーバーは、高機能なのに236円/月~
月額125円からの「さくらのレンタルサーバ
レンタルサーバー

スポンサード リンク

このページは 

トップページ > CSS > id と class