前へ 目次 次へ
classやidで指定
　

同じ要素に対して、異なるCSS2を適応させたい場合もあるかと思います。 そのような場合には、IDセレクタやクラスセレクタを用いて記述します。

ここでは、このIDセレクタやクラスセレクタの使い方をみていきましょう。

　
セレクタ
　

タイプセレクタ（type selector）は要素名を指定します。 ここまでで説明してきた、body などがこれにあたります。

全称セレクタ（universal selector）はアスタリスクで示され、あらゆる要素名をあらわします。 アスタリスク以外に、IDセレクタなどが指定されている場合には、 アスタリスクを省略することが可能です。

クラスセレクタ（Class selectors）を定義しておくと、 class属性が一致した要素に対してCSS2が適用されます。 クラスセレクタは要素の後にドットで区切って指定します。 

次の様にして「class="green"」であるすべての要素にスタイル情報を割り当てることができます。 
*.green { color: green }
下の例の最初のH1要素は緑色になりませんが、2つめのH1要素は緑色になります。 
<h1>Not green</h1>
<h1 class="green">green</h1>

IDセレクタ（ID selectors）はID属性が一致した要素に適用されます。 IDセレクタは#で区切って指定します。

　

一つのHTMLファイルに同じclass属性が複数回出てきてもかまいませんが、 同じID属性を複数指定することはできません。

　
セレクタの例
　

mystyle2.css

.bgs{   background-color: #00ffff}
#red{   color: #ff0000}
　

css04s1.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>「歩行ロボット進化論」</title>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<link rel="stylesheet" href="mystyle2.css" type="text/css">
</head>
<body>
<li class="bgs">自己紹介</li>
<li id="red">自作歩行ロボット紹介</li>
<li class="bgs" id="red">歩行ロボットリンク集</li>
<li>日記</li>
</body>
</html>

クリックすると表示結果をみることができます。

　
2003/07/23(Wed)
トップページへ
SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送