このIDは、スタイルシートのセレクタ（スタイルの適用対象）として使用されるほか、スクリプトやリンクなどの参照先として使用されることになります
id 記述例
id 記述式
| 属性 |
値 |
説明 |
クラス名使用注意事項 |
| id="" |
ID名 |
固有の識別名を指定 |
大文字と小文字は区別されます
1つのIDは、同じ文書内で1ヵ所にだけ使用できます （重複は不可です）
使用できる文字は、半角の英数字、ハイフン（ - ）、アンダーバー（ _ ）、コロン（ : ）、ピリオド（ . ）です （ハイフン以外の記号は使わない方が無難です）
先頭は英字で始めなければいけません （数字や記号で始めてはいけません）
IDををCSSのセレクタとして使用する場合、以下の制約もあります
CSSのセレクタ名では、コロン（ : ）とピリオド（ . ）が使えません
アンダーバー（ _ ）をID名に含めると、一部の古いブラウザではIDが認識されません |
＜id 宣言＞ ＜クラス宣言＞ 使用方法詳細
＜id 宣言＞ 「 id 」 「 # 」 の使用方法
セレクタには、タグ文字の代わりに、任意の「 #半角英数字 」を指定することもできます
これを id宣言と言います
| ヘッダー部 スタイルシート内の宣言 |
#line170{
line-height : 170%;
} |
| ボディ部 「 id 」使用箇所の記述 |
<p id="line170">
～文字列等～
</p> |
ヘッダー部で、タグに属性を付けてしまうと、ページ内全てに適用されてしまいます
任意の一部分にだけ適用させたい時に使用します
＜クラス宣言＞ 「 class 」 「 . 」 の使用方法
セレクタには、任意の「 .半角英数字 」（半角英数字の前に半角ピリオドを付けています）.を指定することもできます
これをクラス宣言と言います
| ヘッダー部、スタイルシート内の宣言 |
.line170{
line-height : 170%;
} |
| ボディ部、「 . 」（クラス）使用箇所の記述 |
<p class="line170">
～文字列等～
</p> |
使用方法・目的は、「 id 」宣言と同じです
任意の一部分にだけ属性指定を適用させたい時に使用します
各指定方法の優先度
| 優先度 |
指定部 |
指定方法 |
高い
↑
↓
低い |
ボディ部 |
style 属性 |
| ヘッダー部 |
id 指定 |
| class 指定 |
| タグ 指定 |
同じ優先度の指定が複数ある場合は、後から定義されたものが優先されます
「 !important 」ルール
半角スペースで区切って、「 !important 」を追記すると、その指定が優先されます
例えば、下記のように、値の後ろ、それぞれに追記します
h1{
font-size : 100% !important;
color : #ff0000 !important;
background-color : #ffffff !important;
} |
擬似要素と擬似クラス
擬似要素（ pseudo-elements ）とは、要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加する為のもので、「 :before
」 擬似要素と 「 :after 」 擬似要素を使用すると、対象となる要素の前または後に、content プロパティで指定した内容が表示されます
content プロパティには、テキスト文字、及び、URL指定で、画像も表示できます
| 記述例 |
<head>部 |
p#id_p1:before{
content: "【 表題 】"
" ";
font-size:80%;
}
p#id_p1:after{
content: " "
url("img/HP_Triangle_TR12pxc008080.gif");
} |
| <body>部 |
<p id="id_p1">擬似要素表示例</p> |
| 表示例 |
<body>部 |
擬似要素表示例
|
擬似クラス（ pseudo-classes ）とは、要素が特定の状態にある場合にスタイルを指定する為のもので、下記では、「 :last-child
」 が相当します
擬似要素、擬似クラス、ともに、セレクタとなる要素名のあとにコロン（:）をつけて、擬似要素 擬似クラス名を記述します
擬似要素と擬似クラスを使用したパンくずリスト（ breadcrumb navigation ／ トピックパス topic path ）の作成例
| <ol>タグ使用例 |
| 記述 |
|
<head>部 |
|
#bread ol li{
display: inline;
list-style-type: none;
}
#bread ol li:after{
content:" > ";
}
#bread ol li:last-child:after{
content: none;
} |
| <body>部 |
|
<td style="padding : 10px 6px;" nowrap align="left"
colspan="3" id="bread">
<ol>
<li><a href="../index.html">ネットで稼ぐ方法
教えます（TOP）</a>
<li><a href="../seo/SEO_000000.html">SEO対策</a>
<li><a href="../seo/SEO_105000.html">ナビゲーションをわかりやすくしよう
</a>
</ol>
</td> |
| 表示 |
| |
<body>部 |
|
- ホーム
- SEO対策
- ナビゲーションをわかりやすくしよう
|
| <ul>タグ使用例 |
| 記述 |
|
<head>部 |
|
#bread ul li{
display: inline;
list-style-type: none;
}
#bread ul li:after{
content:" > ";
}
#bread ul li:last-child:after{
content: none;
} |
| <body>部 |
|
<td style="padding : 10px 6px;" nowrap align="left"
colspan="3" id="bread">
<ul>
<li><a href="../index.html">ネットで稼ぐ方法
教えます（TOP）</a>
<li><a href="../seo/SEO_000000.html">SEO対策</a>
<li><a href="../seo/SEO_105000.html">ナビゲーションをわかりやすくしよう
</a>
</ul>
</td> |
| 表示 |
| |
<body>部 |
|
|
参考ページ 「ホームページビルダー19 HTML スタイルシートの活用」
|