1. まとめトップ

【HTML/CSS】 idやclassの名前の付け方に悩んだら参考にしたいサイト

idやclass名で悩むことってありますよね。この悩む時間をなくすことが出来れば、コーディング時間を短縮することに繋がります。数は少ないですが、私が悩んだ時に参考にしているサイトをご紹介します。

更新日: 2013年09月15日

28 お気に入り 66448 view
お気に入り追加

この記事は私がまとめました

T.Ohkiさん

■CSS Lecture

有名・大手サイトで使用されている名前リストを紹介されています。一般的に使用されている名前を知ることで悩み解消に繋がります。

http://www.css-lecture.com/log/convenience/001.html

変な名前なんてつけたらダサいと思ってしまうし.........こう思ってしまうのは自分だけではないはず。そう思いこのたびいろんな有名サイトが使っているid名class名をせこせこ集めたものここでまとめちゃいました!

■CSS HappyLife

CSS HappyLifeさんもたくさんのウェブサイトで使用されているid名、class名をリストアップされています。

http://css-happylife.com/archives/2007/0115_1345.php

class名やid名って付ける時悩みませんか?今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。

こちらは上記記事の続編になります。CSS Happylifeの著者さんが個人的によく使うid名やclass名のまとめと、その理由を記事にされています。

http://css-happylife.com/archives/2007/0321_0034.php

以前に「もう、class名やid名で悩まないんだからっ!!」というエントリーを書いたのだけど、自分がよう使うid名とclass名のまとめと、その辺の理由付けをしてみよーかなぁと思った。

■CSS HappyLife ZERO

こちらも著者さんが普段使用しているid名/class名を列挙されています。とてもスマートで参考になりますねぇ。

http://zero.css-happylife.com/tips/column/2009/id_class_name.shtml

ID、クラス名に悩み過ぎて時間が経ってしまうのも勿体無いので、ボクが最近使ってるID、クラス名を上げておきます。

■TAG index Webサイト

id名、class名の命名例とその用途例を分かりやすくリストアップされています。

http://www.tagindex.com/stylesheet/basic/naming.html

よく見かける名前や、使いそうな名前をリストアップしています。ID名やクラス名を付ける際の参考にどうぞ。

さいごに

idやclassの名前は、ある程度の命名ルールをあらかじめ決めておくことで悩まないで済むようになります。また、「~Area」「~Inner」など単語の組み合わせで解消されることも多いですのでレパートリーを考えておくのも手です。そうすることでコーディングの時間は今よりも短縮できますよ。

1