class=、id=の使い方と注意点

 HTMLをいじっていると、たびたび出てくるのがclass="○●"、id="○●"という記載。

  class="○●" とか、 id="○●"とか、ぴんと来ない人も多くない?

 正直、管理人は、まったく意味がわからなかった。

 「class="○●"・ id="○●"とHTMLの関係」と、「class・
id使い方の注意点・記載のしかた」を一寸メモ代わりにまとめてみた。

 

class="○●"、 id="○●"の○●は、外部スタイルシートの名前を示す

 例を挙げたほうがわかりやすいかも。

外部スタイルシートの例)

1) .rei{font-size:large;color:#000000;}

2) #rei{font-size:large;color:#000000;}

 

HTMLの記載例)

1)<p
class="rei">ここに記載したものは、rei{font-size:large;color:#000000;}のスタイルが反映される。すなわち、文字の大きさはlarge、文字の色は#000000となる。</p>

2)<p
id="rei">ここに記載したものは、rei{font-size:large;color:#000000;}のスタイルが反映される。すなわち、文字の大きさはlarge、文字の色は#000000となる。</p>

 

HTMLに直接スタイルシートを書き込んだ例)

<p style="font-size:large;color:#000000:
">ここに記載したものは、rei{font-size:large;color:#000000;}のスタイルが反映される。すなわち、文字の大きさはlarge、文字の色は#000000となる。</p>

 この3種類の記載、全部webサイトでは同じ表示になる。

 上の例は、段落(<p></p>)のスタイルを指定した場合だが、「<div></div>」「<span></span>」でも考え方は同じ。

classと idの違いと使い方の注意点

・「id」は1ページ内で同じ名前を1回しか使用できない。
 外部スタイルシートの記載は#○●{}。

・「class」は1ページ内で同じ名前を何度も使用できる。
 外部スタイルシートの記載は.○●{}。

 表示上は、「id」を何回も使っても、webサイトを見る分には問題ない。

 が、アクセス解析などでエラーになったりする場合があるらしい。

 id(外部スタイルシートの記載は#○●{})は使わなくても問題ないそうだ。

 id(#○●{})を使わずに、class(外部スタイルシートの記載では
.○●{})で記載したほうが問題が出なくてすむかもしれない。

 アクセス解析などでエラーが出る人は、HTMLやスタイルシートをもう一度見直してみると良いかもしれない。

コメントを残す




*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

GoogleWEBマスターツールの「HTMLの改善」で訪問者を増やそう
色コードの収得に便利な無料ソフト・ウェブカラークリエイター
wordpressテーマSTINGER3のスマートフォン表示の【NEW ENTRY】のアイキャッチ画像を非表示にする
noimage
FTPクライアントソフト「WinSCP」インストールとサーバー接続設定
スタイルシートで角の丸いリンクボタンを作って見よう
Googleアドセンスをシーサーブログのタグページに表示させないようにする・2カラムテンプレートサイドカラム編
シーサーブログ(seesaaブログ)を削除する方法
シーサーブログのタグページに記事概要(記事の要約・サマリー)を表示する方法
WordPressリビジョンを制御するプラグインRevision Controlの使い方
Googleカスタム検索をスタイルシートでカスタマイズ-コードは変更しないよ
ページタイトルの問題点と改善点を把握して訪問者を増やそう
プラグインを使わないwordpressの記事一覧
旧FC2ブログの訪問者を新サイトに自動的に誘導するmeta
Bloggerのテンプレートの文字の色やフォントを変えてみよう

Menu

HOME

 TOP