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

コメントを残す




*

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

関連記事

WordPress4.0にバージョンアップするとどこが変わった?
FC2にログインできないときの対処
シーサーブログユーザーはスマートフォンでもPCサイトを表示させよう
WordPressの無料テーマ3種をご紹介
FC2ブログから引越し準備・データのダウンロード
WordPressテーマPrincipleで更新日を表示する
コメントを入れる<!--/-->・<!--//-->・<!---->の使い方を覚えよう
スタイルシート(CSS)を縮小・具体例
Googleアドセンスの種類は?
FC2ブログの記事をワードプレスにインポート
FC2ブログのdescriptionカスタマイズ・記事内容の要約を検索結果に表示して検索ユーザーに記事内容をアピールする
WordPressで使っていない画像を探して削除
プロフィールを設定しないとログインIDがただもれになる・WordPressでブログを作る
wordpressバージョン 3.9.2 へバージョンアップ
WordPressの画像アップロードによるサーバー容量の消費を防ぐメディア設定

Menu

HOME

 TOP