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

コメントを残す




*

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

関連記事

wordpressテーマSTINGER3のスマートフォン表示の【NEW ENTRY】のアイキャッチ画像を非表示にする
FC2ブログから引越し準備・データのダウンロード
シーサーブログのタグページに記事概要(記事の要約・サマリー)を表示する方法
wordpress記事一覧・更新日順、1ページの表示件数制御、ページャー対応コード
FC2ブログのバックアップ機能使ってみた
noimage
FC2ブログテンプレートの文字の大きさを変えてみよう
シーサーブログ(seesaaブログ)を削除する方法
Googleの検索ボックスの便利な使い方1
WordPressテーマTwenty Fourteen(バージョン 3.9.1)で記事下に広告を表示
WordPressの投稿の編集のテキストモード「code」は何?
<!--more-->、<!--/more-->、<!--more_link-->、<!--/more_link-->の前後に広告や文字を入れるとどうなる?
Googleアドセンスを設置したページ読み込みパフォーマンスを向上させるための対策
一番初めにWordPressの自動整形機能を止めるプラグインを入れよう
Googleカスタム検索で自分のサイトへ戻るためのリンク設定をする

Menu

HOME

 TOP