SEO対策、WEBサイト(ホームページ)の作り方、そして時々柴犬と愛媛県

今更ながらclass属性とid属性の違いを解説

コーディングのレベルが落ちている?

今回はホームページの作成にかかわる、ちょっと初歩的なお話です。というか、こんなこと当たり前だと思っていたのですが、ふと思い出したので今回は取り上げてみました。

遡ること1年前、知り合いの会社さんにサイトの作成をうっかり引き受けてしまったわけなんですが、デザインは別の知り合いに頼んでもらって、僕はサイト設計ならびにSEO対策やコーディングを結果的に行ったわけです。ま、プロジェクト的なものではなくて、極めてなーなーなやり取りで進められたので打ち合わせみたいなものはなく、デザインとコーディングは同時並行で進められ、さきにwordpressの設定は済ませておいてから、デザインは送られてきました。

 



そのデザインデータ、県外の某ホームページ制作会社さんが2万円程度で引き受けてくれたそうなんですが、デザインだけかなと思ったらしっかりとhtmlに落とし込まれており、御大層にも6,7ページですが、内容はともかく簡単なサブコンテンツも作られてましたね。(ただ制作会社の悪い癖なのか、よく知らない業界のホームページは同種のサイトの内容をそのままもってくるという内容でしたが・・・)

中身はともかくとして、html形式でデータもらった(今時珍しいけど)ので、そこからあらかじめ用意しているwordpressに反映していくことにしました。

 

htmlやcssに多少興味のある方ならお判りでしょうが、人のコーディング見るのって結構面白いですよね。

今回のデータはさすが制作会社さんが作ったものなのか、僕が使わないheaderタグやarticleタグなんか使われてて時代の流れを感じますね(笑)
まぁ、そんなタグ使ったところで検索順位にほぼ影響ないとは思いますけど・・・(負け惜しみ)

で、作業を進めていくと分かったのがこのサイトのコーディングした人、html5には対応してそうだけど肝心な問題が

 

 

id属性の使い方分かってねぇ・・・

 

 

結論から言うと、id属性が1ページに何回も使われていたわけなんですが、素人ならともかく制作会社がコーディングしてこれはあかんだろと呆れさせられたのが今回のきっかけなんですよね。最近のWEB関係者がどういう勉強してこの仕事に就くのか全く知りませんが、これもツールやwordpressなんかのCMSが発展したせいで、基本的なことをすっ飛ばしている人も増えているのかもしれませんね。

 

で、かなーり前置きは長くなりましたが(ほんま長いな)、簡単にclass属性とid属性の違いを解説していきたいと思います。(解説するほどのことじゃないけど、初心者の方もいるかもしれないので)

 

id属性は1ページに一回しか使えない

class属性とid属性がそもそも何なのかという話は置いとくとして、基本的にhtmlやcssで果たす役割はほぼ同じですが、問題はclass属性が1ページに何回も使えるのに対して、id属性が1ページに一回しか使えないということです。

idは当然アイデンティを略したものでしょうから、見出しなどにid属性が付与されていた場合、その見出しとはどういった名称(呼称)なのか固有の定義となるわけですから1ページに何回も使えるわけはありません。それに対してclass属性は指定したものがどんな種類のものか表すようなものなのです。

  • id属性・・・固有の定義
  • class属性・・・種類の指定

こう覚えておくと理解しやすいでしょう。

 

class属性は同時に複数指定することができる

class属性は1ページに何回も使用できるのがid属性との大きな違いですが、もう一つ決定的な違いが、一つの要素に対して複数のclass指定を行うという点です。

例えば、このサイトを例にとると

 

 <h2 class="blog-post-title entry-title">今更ながらclass属性とid属性の違いを解説</h2>

この記事のタイトル部分のソースですが、h2という要素に対してblog-post-title と entry-title という二つのclass属性が指定(定義)されていることが分かります。(複数のclassを指定する場合スペースを空けます)

今回は二つのみですが、これは三つでも四つでも構いません。サイトを管理する人間が把握さえできればいくらでも指定することができます。

class属性とid属性は同時指定可能

最後にもう一点、class指定とid属性は一つの要素に対して同時に指定することも可能です。
先ほどのソースを例にとると

 <h2 class="blog-post-title entry-title" id="sample">今更ながらclass属性とid属性の違いを解説</h2>

このように記述することができます。

例えば、特定のh2で設定されている見出しに対して、この見出しのみfontサイズなどを保ったまま独自のデザインに変更したい場合などは、id属性を付与してやることにより、少しの違いを生み出すことが可能となるわけです。

※CSSなどで同じ要素のid属性とclass属性に違う記述をした場合、id属性が優先されます。

 

 

どうですか?

以上思いつくままに書きましたが、id属性とclass属性の違いとなります。

別にid属性を複数指定してもブラウザそのものは認識してくれるので、気付きにくいのは気付きにくいのですが、恥をかかないためにも知らなかった人は覚えておきましょう。

 

うーむ今回は内容はしょーもないけど、珍しくもっともらしい内容になりましたな(笑)


タグ: ,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

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