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

HTML タグ辞典　class

class　リファレンス



class　説明



class 属性で、要素に対してクラス名（分類名）を付けることができます

このクラス名は、主にスタイルシートのセレクタ （スタイルの適用対象） として使用されます


class　記述例



<p class="example"> ～ </p>




class　記述式



属性 値 説明 クラス名使用注意事項
class="" クラス名 分類上の名前を指定 大文字と小文字は区別されます
クラス名をCSSのセレクタとして使用する場合、以下の制約もあります
使用できる文字は、半角の英数字、ハイフン（ - ）、アンダーバー（ _ ）です
アンダーバー（ _ ）をクラス名に含めると、一部の古いブラウザではクラス名が認識されなくなります
先頭は英字で始めなければいけません （数字や記号で始めてはいけません）




クラス名　使用方法



同じ文書内で、1つのクラス名を複数の要素で使用できます （1つのスタイルを複数の要素に適用できます）


<p class="example1">1つ目の段落</p>
<p class="example1">2つ目の段落</p>
<p class="example1">3つ目の段落</p>


1つの要素に複数のクラス名を指定できます （1つの要素に複数のスタイルを適用できます）
半角スペースで区切って、クラス名を列挙します


<p class="example1 example2 example3">1つ目の段落</p>




＜クラス宣言＞ ＜id 宣言＞ 使用方法詳細



＜クラス宣言＞　「 class 」 「 . 」 の使用方法



セレクタには、任意の「 .半角英数字 」（半角英数字の前に半角ピリオドを付けています）.を指定することもできます
これをクラス宣言と言います


ヘッダー部、スタイルシート内の宣言 .line170{
  line-height : 170%;
}
ボディ部、「 . 」（クラス）使用箇所の記述 <p class="line170">
  ～文字列等～
</p>


使用方法・目的は、「 id 」宣言と同じです
任意の一部分にだけ属性指定を適用させたい時に使用します




＜id 宣言＞　「 id 」 「 # 」 の使用方法



セレクタには、タグ文字の代わりに、任意の「 #半角英数字 」を指定することもできます
これを id宣言と言います


ヘッダー部、スタイルシート内の宣言 #line170{
  line-height : 170%;
}
ボディ部、「 id 」使用箇所の記述 <p id="line170">
  ～文字列等～
</p>


ヘッダー部で、タグに属性を付けてしまうと、ページ内全てに適用されてしまいます
任意の一部分にだけ適用させたい時に使用します




各指定方法の優先度



優先度 指定部 指定方法
高い
　↑
　↓
低い		 ボディ部 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="line-height : 130%;padding : 10px 6px;" 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="line-height : 130%;padding : 10px 6px;" 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 スタイルシートの活用」




class　SEOへの影響


特に影響はありません

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

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

© 2014 abhp.net All Rights Reserved.

HTML タグ辞典

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