○ スタイルシート
HTMLのタグごとのプロパティをHTMLから分離する方法
HTML以外の場所に設定を置いておき、ブラウザが表示する時に読み込みます。
a { }
a の部分をセレクタと言い、 { } で囲まれた部分を宣言と言います
a の部分で対象となるHTMLのタグを選択し、 { } で囲まれた宣言をタグに適用します。
{ } 内では、パラメータ : 値 ; の形でパラメータを表現します。
セレクタが a の場合はHTMLのタグ <a> に結び付けられます。
セレクタによりHTML文のパターンマッチングを行い、マッチングしたタグにパラメータを設定していく仕組みです。
▼ HTML
<style type="text/css">
a { color : #FF0000; }
</style>
test
<a>aaaa</a>
test
▼ HTML表示結果
test aaaa test
■ idを指定するセレクタ
id名の前に # を付けることによりidを指定します。
▼ HTML
<style type="text/css">
#id1 { color : #FF0000; }
</style>
test
<a id="id1">aaaa</a>
test
▼ HTML表示結果
test aaaa test
■ classを指定するセレクタ
class名の前に . を付けることによりclassを指定します。
▼ HTML
<style type="text/css">
.class1 { color : #FF0000; }
</style>
test
<a class="class1">aaaa</a>
test
▼ HTML表示結果
test aaaa test
■ セレクタのワイルドカード
* を設定すると、全ての要素が対象になります。
ただし、何らかの要素である必要があります。
▼ HTML
<style type="text/css">
* { color : #FF0000; }
</style>
test
<a id="id1" class="class1">aaaa</a>
test
▼ HTML表示結果
test aaaa test
■ タイプとidとクラスなどを一度に指定する
項目をつなげて書くことにより、一度に指定できます
全部の項目が一致したときにパラメータが設定されます。
▼ HTML
<style type="text/css">
a#id1.class1 { color : #FF0000; }
</style>
test
<a id="id1" class="class1">aaaa</a>
test
▼ HTML表示結果
test aaaa test
■ 階層で指定する
項目毎にスペースを空けて書くことにより、階層を表現できます。
階層が完全に一致した場合にパラメータが設定されます
▼ HTML
<style type="text/css">
div #parent1 .child1 { color : #FF0000; }
</style>
<div>
<p id="parent1">
<a class="child1">aaaa</a>
</p>
</div>
▼ HTML表示結果
aaaa
▲トップページ
>
Visual BASIC と C#