CSSのセレクタを理解しよう！

【こちらの記事は、約5分程でお読みいただけます。】

皆さん、こんにちは！
いつもWebブログを見ていただいて、ありがとうございます！

短い期間で学習をする場合に、ソフトや言語の隅から隅まで、
ということは難しいですよね。。実際に勉強をしたとしても、
業種や会社によっては「まったく使わない」機能も出てきます。
知識としては有効であっても、実践的ではない機能は、やはり存在します。

スクールでは、極力「主要な機能、且つ実践的」なことを中心に勉強します。
もちろん、それ以外のことでも、インストラクターに質問いただければ
解説をさせていただきます＾＾ 気兼ねなく、ご質問してくださいね！
 

さて、今回はCSSのセレクタで、一般的に省略されることが多いですが、
それが原因で勘違いやミスを起こしやすいところを、ご紹介・解説させていだきます。

<div id="wrapper"> 
   
  <div id="global_navi"> 
    <ul class="menu"> 
      <li>ホーム</li>
      <li>製品情報</li>
      <li>会社概要</li>
      <li>お問合せ</li>
    </ul> 
  </div> 

</div> 
（※アンカータグ等は省略）

上記のHTMLにて、ulタグに対しスタイルをつける際に、
.menu{margin-left:20px;}
と書くことができます。

.menuがセレクタということになりますが、実はこの前には
「*」や「div」が入るのが厳密な書き方です。

*.menu{margin-left:20px;}もしくはdiv.menu{margin-left:20px;}

省略をした場合には「*」が入っているのと同じ意味になります。
ですので、もしこのHTMLの他の場所に
<p class="menu">とか
<ol class="menu">などがあった場合には、
そちらも同時にマージンの設定が行われる、ということになります。

div.menu{margin-left:20px}と書いた場合には、
<p class="menu">とか
<ol class="menu">には、スタイルはかかりません。

「*」の場合には、menuというクラスがついている全てのタグに対して
「div」を入れれば、menuとうクラスがついているdivタグ全てに対して
という意味になります。

KENスクールのDreamweaverのテキストに置き換えていいますと、
CSSパネルを使って設定をすると、
HTMLのタグを選択している場合には、初期設定でセレクタ名に
『#wrapper #global_navi .menu』と表記されており、
【省略化】ボタンを押せば、
『#global_navi .menu』や『.menu』に省略することが可能です。

この省略化ボタンを使うのではなく、手動で間を消す場面も出てきますが、
間違って半角スペースを消してしまい、
スタイルが適用されないというミスも、よく起こりがちです。

本来『#wrapper .menu』と省略することが可能ですが、
『#wrapper.menu』と間の半角スペースを消してしまうことが見受けられます。 
確かに、半角スペースは見落としやすいポイントですよね＾＾

『#wrapper .menu』はIDセレクタとClassセレクタ、
子孫セレクタを組み合わせたものなので、
「wrapperというID名がついている中にあるmenuというクラス名のついたタグ」
という意味になります。

ここでスペースを消してしまうと、
「wappaerというID名がついていて、さらにmenuというクラス名がついているタグ」

つまり・・・

<div id="wrapper" class="menu"> 
  
  <div id="global_navi">
    <ul class="menu">
      <li>ホーム</li>
      <li>製品情報</li>
      <li>会社概要</li>
      <li>お問合せ</li>
    </ul>
  </div>

</div>
 

というHTMLであれば、一番最初のdivタグにスタイルがかかる、というわけです。
『#wrapper.menu』は、置き換えれば『div.menu』と同じことになります。

重要なのは、IDセレクタを使おうが、クラスセレクタを使おうが・・・

子孫、子供、属性を使おうが、スタイルは必ず「何らかしらのHTMLタグ」に
付けるものということを理解しておく必要がある、ということですね。

ここさえしっかり理解しておけば、
「このセレクタが効かない」と困ることは、解決できるでしょう。
皆さん、ぜひ覚えておいてくださいね！

--------------------------------------------------------------------------------

CSSレイアウトをマスターしたいなら、KENスクールがおススメです♪

⇒【CSS上級レイアウト講座】
CSSが書けるようになった、でもまだまだ不安の残るあなたにおススメ。
より高度なWebサイトのレイアウト構築をマスターして、
Web制作に更なるスピードアップを図りましょう！

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 磯貝