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やスタイルシートをもう一度見直してみると良いかもしれない。

コメントを残す




*

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

関連記事

GooglePlayアプリのダウンロードサイトへのリンクバナーを作ろう
RSSリーダーどれが使いやすい?
FC2ブログの記事をWordPressにインストールする前に検索エンジンの重複ページペナルティ対策
Googleアドセンスを設置したページ読み込みパフォーマンスを向上させるための対策
WordPressテーマPrincipleで更新日を表示する
FC2ブログのテンプレートの中に、ナビゲーション(パンくずリスト)を入れ込む
FC2ブログテンプレートの文字の大きさを変えてみよう
ブログのタイトルのSEO対策検索結果の順位を上げよう
無料ブログサービスならSeesaaブログ もお勧め
Googleアドセンスのサイト内検索ボックスのトラブル
FC2ブログの全記事リストを表示する時のHTMLタグと注意点
FC2ブログから引越し準備・データのダウンロード
独自ドメインをレンタルサーバーに登録する・ムームードメイン&レンタルサーバーミニバード
WordPressをレンタルサーバーにインストール
FC2ブログのバックアップ機能使ってみた

Menu

HOME

 TOP