正しく始めるHTML:class、idデザイン

Abstruct

さて、ココまで無事読み進めることの出来たみなさん、スタイルシートにはもう慣れましたか？

色んな知識がごっちゃになって、整理が突いていない方とかいるかもしれません

今回は、今まで習ったことを頭の中で整理するためのお話…、新技術を覚えるようなことはありません、多分…

先ほど、クラスやIDに、スタイルシートを当てて活用する方法を解説いたしましたが。クラスやIDの命名法には、ある一定の規則がありますので今回はコレをご紹介

つまりは


/* 赤色の表示にします */
em.red{
	color:red;
}

の様に、表示の感覚からクラス名を付けないで


/* 赤色の表示にします */
em.angry{
	color:red;
}

の様に、文書の中でどういう役割をしているかを基準に命名するのが正しいやり方。やり続けていれば遠からず気づきますが、表示の感覚でクラスの名前を付けるとデザインを変更したくなったとき等を中心に、全体的に変更に弱い構成になってしまいます

悪いことは言わないので、年寄りの冷や水と思ってお耳に止めておいてください

例えば、貴方が、dlタグに単語の解説(word expkanation)と、加えたい場合、２つ以上の単語をクラスの命名規則から、半角スペースクラスでは繋げません、どの様な命名法が良いでしょうか？

現在、この方法に関しては、サイトごとにみな違っていて、正解の出ていない状態です。ですが、ネットの海を蒐集していくと、大体次のパターンに集約することが出来ます

個人的蒐集では、次の様な順番になっているように感じました

自分は「cssはプログラミング言語じゃないんだよ！」という事で、word-explanationの様に区切るようにしていますが、みなさん、お好きなように選択してください

クラスの命名記法に関しては、先ほど説明いたしましたが、その他に、一部IDに関しては、慣例的、経験的に名前が決まっている物があります

content	内容と言えるようなテキスト達を全て納めるdivタグに付けられます
footer	メニュー等を含める縦長のリンクバーにこの名前を当てます
subfooter	サブメニューを含めているリンクバー

正直、クラス名、ID名の統一に関しては、幾つかの所で話が進んではいるのですが十分に決定されていない分野です、アンテナをとがらせながら、人の良いと思う方法を盗んでいきましょう