お得情報ネット

お得に生きていきたい

CSS id class セレクタの使い分け方、違い

こんにちは。最近Webデザインをブログに取り入れようと勉強を始めたのですが、ちょっと難しい。勉強がてらどなたかの参考になればいいです。

CSSとは

HTMLの見た目を変えるために装飾の指定をするのがCSSです。プログラマーWebデザイナーが使っているイメージですがブログの装飾にも使うことが可能です。実際に私のブログでは、CSSを若干ですが取り入れています。

idとclassの違い

では本題。idとclassはそれぞれHTML内で指定することによって、CSS内のセレクタとすることができる使い勝手のいいタグです。違いとしてはidは1つのHTMLページで一か所しか同じ名前を使えないのに対して、classは何個でも重複可能という点です。

セレクタ...CSS内で要素を選択し、プロパティと値を入れることで装飾ができる

h1(セレクタ) {

   color(プロパティ) : red(値) ;

}

この場合、h1の部分を赤文字で書くように指定してます。

idの使い方

HTML内で<h1 id="title">とするとCSS内で

#title{

  color  : blue ;

}

(titleという名のid部分は青文字で書くと指定)

のように#idの名前でidを指定可能です

注意点として1つのページに同じidを重複することはできません

classの使い方

HTML内で<h1 class="title"> <h2 class="title">とするとCSS内で

.title{

color : blue ;

}

(titleという名のclass部分は青文字で書くように指定している)

CSS内では.classの名前でclassの指定可能です

こちらは同じclassを何か所でも指定できるので、同じ装飾をしたい箇所があるときに便利です

HTML編集画面

idとclassの使い分けCSS

CSS編集画面

idとclassの使い分けCSS

ブラウザ表示画面

idとclassの使い分けCSS

私は、classの方が使い勝手よく感じているのでidよりもclassを使う機会が多いです。idは同じ名前では一回しか使えないという点を把握しておけばばっちりです!!