htmlの基礎 「class属性」と「id属性」について

こんにちは。

今日は、htmlの基礎である、「class属性」と「id属性」について記載していきます。

TECHCAMPでもhtmlを勉強しますが、カリキュラム自体は、学習が始まってから2.3日で終えていた為、(復習ドリルは定期的にありましたが)、また、深く物事を覚えるというよりは、自分でhtmlを使えるようになるか、に焦点をあてられていた為、ちょっと曖昧に覚えていた所もありました。

それが今回の第にもある通り、2つの属性。

class、id、なんとなく適当に覚えていたためここで整理します。

命名規則

・同じ名前のclass属性はhtml内にいくつ存在しても良い。

・同じ名前のid属性はhtml内で1つしか存在してはいけない。

ここすら知りませんでした。

学校に例えて、classは学校における「クラス」。idは学生一人ひとりの番号(id)。

A(id)くんは１人だけど、クラス(class)には何十人かいますよね。

ただし、AクラスのAくんということは可能のようです。(class名が、contents。id名がcontensでも一応問題ないようです。)

使い分けは？

基本的にhtmlとcssのみであれば、class属性だけで事足ります。しかし、javascriptを使うことが多いとidが使われることが多いようです。javascriptでイベント発火させる時、基本的には、一つの項目に焦点があてられていることが多いですよね。

※トップページのあのボタンをクリックすると、ポップアップ画面が出るなど。

なので、基本的にはjavascriptを使う時はidを使う事を意識していこうと思います。

以上、TECHCAMP残り23日、オリジナルアプリ作成に向けて、基礎知識を再確認しながら進んでまいります。