デザインの方法の比較(インライン,id指定,class指定)

CSSでhtmlをデザインする際に、どのような方法を取るべきなのか、ということについて調べたことを以下に記しておく。

 

インラインスタイル

要素に直接スタイルを設定する。それぞれの要素にその都度スタイルを設定しなければならないが、スタイルの指定の優先度では最も高い。

 

id指定

要素にidを指定し、そのid名の付いたものの装飾を別で設定する。id名はかぶってはならず、その要素固有のものを設定する際に役立つ。スタイルの指定の優先度はclass指定されたものよりも高い。

 

class指定

要素にclassを指定し、そのclass名の付いたもの全ての装飾を別で設定する。同じ要素が複数回出てくる際に役立つし、一度きりの者でも使用することができる。

 

特徴を見ると、まず「インラインスタイル」と「id指定・class指定」の二つに大別でき、インラインスタイルはhtmlの中に直接書く上に、要素ごとに設定する必要があるためhtmlが複雑になるかもしれない。ただ、どうせばらばらに設定しなければならない要素群などならば、インラインスタイルで書いてしまうのもわかりやすいかもしれない。

一方で、id指定・class指定は、html中では宣言のみのため、htmlをすっきりさせることができそうだ。そしてid指定とclass指定の大きな違いは、id指定では同じ名前を一度しか使えないという点だろう。その要素特有のものであることを明確に示したいのならばid指定がわかりやすそうだが、単体でも複数でも使えるclass指定で統一してしまった方がスタイル設定の優先度もわかりやすいため、理解しやすいhtml,cssになるかもしれない。