HPB18 | HPB19 コンテンツ一覧
ホーム > HPB19 > HTML タグ辞典 > id
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

HTML タグ辞典 id


id リファレンス



id 説明



id属性で、要素に対してID(固有の識別名)を付けることができます


このIDは、スタイルシートのセレクタ(スタイルの適用対象)として使用されるほか、スクリプトやリンクなどの参照先として使用されることになります



id 記述例



<p id="example"> ~ </p>




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>部
  1. ホーム
  2. SEO対策
  3. ナビゲーションをわかりやすくしよう

<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 スタイルシートの活用





id SEOへの影響


特に影響はありません

<補足>
SEO ( Search Engine Optimization : 検索エンジン最適化 ) とは、Google、Yahoo!、Goo 等の検索サイトで検索された際に、検索結果表示ページ(SERP : サープ : Search Engine Result Page )の前の方(上位)に表示されるように工夫して、ホームページ、ブログをつくることです
そのために用いる方法をSEO対策と言い、適切に使うことによりSEOに効果のあるタグがあります
SEO対策について、詳しくお知りになりたい場合、詳細は、「 SEO対策 SEOとは 」をご参照下さい

目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > HPB19 > HTML タグ辞典 > id
HPB18 | HPB19 コンテンツ一覧
   

© 2014 abhp.net All Rights Reserved.

HTML タグ辞典

ページTOP
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP