webディレクターのdevil≒芝です。
blogの更新が１週間に１回ペースになっている。
このブログは、何度も言いますように、社内向けにも書いています。
初心者向けのブログです。
たまに最新のことも取り上げますが、たいていは、「知ってるよ！！」という内容だと思います。
さて今回は、HTMLのid指定とclass指定に関して、わからないとWEB初心者の人から話がありましたので、簡単にまとめます。
まとめられるかな・・・。
id指定とclass指定
HTMLとCSSでのWEBサイトを作っている時に、すべてのスタイルをCSS側で管理しています。(概ねですが・・・。)
その際にブラウザにHTMLのどのタグが、どのCSSになるよ！！
という指定をする際にタグを記載して、読ませます。
例えば、下記のようです。
h4 {
font-size: 12px;
color: #E7373C;
}
のように記述していきます。
ただ、＜div＞などの一般的によく使われるタグがあります。
このタグ自体が、装飾用のタグでボックス要素のタグになります。
一般的にサイトのコードを記述する際によく記述します。
これを上記のようにCSSの側に記述するとすべての＜div＞ボックス内で、スタイルが反映されてしまいます。
その際に使用する指定方法が、id指定とclass指定です。
この二つの違いは、一つのhtmlファイル内に何度でてくるかという時に使い分ける感じです。
- id指定＝１回の使用のみ
- class指定＝複数回使用可
ざっくりと表現すると、そのような感じです。
HTMLソース内では、＜div id="test"＞などのように記述し、CSSでは、
#test {}と書き、カッコの中にスタイルを記述していきます。
class指定の場合は、＜div class="test"＞とし、
CSSには、.test {}と記述します。
そして、一つのdivに対して、id指定とclass指定の両方ともを記述することも可能です。
あるdivボックス要素内は異なるけど、全体を通した時に縦横の幅などは同じ場合
その際には、あるdivのボックス要素に対して、classで大枠のwidthやheight、marginなどの指定を行います。
その後、ボックス要素内には、id指定で対処します。
やり方は、様々ですので、デザインによって使い分けていただくことがいいと思います。
