まさおまっさお

思ったことを書き残す所だよ

     

CSSの書き方とセレクタの話　CSSについて少しずつまとめる①

ブログ改造 CSS

f:id:MasaoBlue:20160515194131p:plain



前回の記事があんなに読んでいただけると思っていませんでした。来てくださった皆様、本当にありがとうございます。


せっかくなので、不定期で少しずつ更新してみます。



今回はCSSの書き方と、セレクタの話です。



【注意！】
この記事は、一般的な定義の説明ではなく、私が理解していることを自分の言葉で説明する記事です。用語についてはある程度調べていますが、本来の定義とニュアンスが若干異なる部分があるかもしれないのでご了承ください。


ちゃんと勉強したい人は、学習サイトがあるのでそっちへ行きましょう！


media.tech-salon.com


目次

０．前回の補足：要素とタグ

前回、ブックマークでこんなコメントを頂きました。

「基本の基本」っていうからにはせめて要素とタグの区別をつけるとこからやってほしいんだが

ご指摘ありがとうございます。


すっかり当たり前に思っていましたが、専門用語を「誰でも分かる」と思って書いてしまうのは危ないですね。



上記の「要素」と「タグ」というのはHTMLで使われる用語で、「<div>」や「</div>」のように<>で囲んだ部分をタグ、開始タグと終了タグで囲んだ全体のことを要素と言います。


言葉だと分かりにくいですが、このサイトに超分かりやすい画像があるので、ピンとこない人はこっちを見てみてください。


参考サイト
基礎用語：「タグ」と「要素」の違いとは？ [ホームページ作成] All About


ブラウザでWebページを見た時、私たちに見えているのは「要素」です。CSSでは、この「要素」の状態を指定することができます。

１．CSSを書く場所

CSSを書ける場所は、大きく分けて3種類。

  1. タグのstyle属性に書く
  2. styleタグの間に書く
  3. 別のファイルに書いて、linkタグで読み込む

書き方1. タグのstyle属性に書く

タグに「style」という属性をつけ、その中に値を書き込む方法です。


一番単純ですが、1つずつのタグに対して書き込む必要があるため、適用する対象が多い場合には向きません。


【例】

<html>
  <head></head>
  <body>
    <!-- 横幅100px、文字色を青に指定 -->
    <div style="width: 100px; color: blue;"></div>
  </body>
</html>

書き方2. styleタグの間に書く

HTMLでstyleタグを用意し、そこに内容を記述する方式です。


styleタグは通常、headタグの中に書きます。
bodyに書く場合は色々と面倒なルールがあるので、今回は説明を省きます。


【例】

<html>
  <head>
    <style>
      /* ここに書く */
      div {
        color: red;
      }
    </style>
  </head>
  <body></body>
</html>

書き方3. 別のファイルに書いて、linkタグで読み込む

HTMLとは別にCSSのみを書いたファイルを用意し、HTML側には参照するファイルのURLだけを記述する方法です。


【例】

<html>
  <head>
    <!-- 別ファイルを読み込むだけ -->
    <link rel="stylesheet" type="text/css" href="CSSを記述したファイルのURL">
  </head>
  <body></body>
</html>


はてなブログの場合、管理画面から変更できる「デザインCSS」でこの方式が使われています。


これは1つのCSSを全てのページで共有するためで、この作りのおかげで、デザインCSSを変えれば過去のページ全てに変更が反映されるようになっています。



ここで挙げた3つのやり方はそれぞれに一長一短があり、目的に沿って組み合わせて使われることがほとんどです。

２．CSSの書き方と、セレクタ

CSSを要素に直接書いた場合、その結果は書いた要素のみに適用されます。


しかし、それ以外（上記の2, 3の方式）では

「この要素にこのスタイルを適用するよ」

という感じで、適用する対象を明確にする必要があります。


この時『この要素に』を記述する方法が「セレクタ」と呼ばれるものです。


大まかな書き方はこんな感じ。


【書き方イメージ】

/* セレクタで特定された要素に、スタイル1、2を適用する。 */
セレクタ {
スタイル名1: スタイル値1;
スタイル名2: スタイル値2;
...
}


スタイル部分の書き方はそんなに難しくないので割愛して、以下ではこの「セレクタ」について掘り下げていきます。


※これ以降「divタグ」と「spanタグ」が何度も出てくるのは、ただ使いやすいからです。セレクタを考える上ではタグの種類はあまり関係ないので、まずは「2種類のタグを使っているんだな」と考えておけば良いかと思います。

セレクタ例1. タグの名前を指定する

これが一番単純な書き方。


上に書いた書き方イメージの「セレクタ」の部分に、「div」や「span」といったタグの名前を記述します。


【CSS】

/* divは赤文字 */
div { color: red; }
/* spanは青文字 */
span { color: blue; }

【HTML】

<div>でぃぶたぐ</div>
<span>すぱんたぐ</span>

【表示結果】

でぃぶたぐ
すぱんたぐ

セレクタ例2. 要素の「class」や「id」の属性値を指定する

前回の通り、HTMLのタグには色々な属性をつけることが可能です。


その中でも「id」と「class」の2つはCSS側で特別扱いになっていて、専用のセレクタが用意されています。


idの場合、指定する値の前に「#」（シャープ）を、classの場合は「.」（ドット）をつけます。


これはらそれぞれ「IDセレクタ」や「クラスセレクタ」と呼ばれるものです。


【CSS】

/* classが「div1」なら赤文字 */
.div1 { color: red; }
/* idが「span2」なら青文字 */
#span2 { color: blue; }
/* classが「span3」なら緑文字 */
.span3 { color: green; }

【HTML】

<div class="div1">でぃぶ1</div>
<span id="span2">すぱん2</span>
<span class="sample1 span3 sample2">すぱん3</span>

【表示結果】

でぃぶ1
すぱん2
すぱん3



HTMLのルール上、idは1つの値しか指定できませんが、classについては
「sample1 span3 sample2」
のように、スペースで区切った複数の値を指定することができます。


この場合、上記のようにCSSのセレクタを「.span3」と書くと、classの値のうち1つでも当てはまれば適用対象になります。

セレクタ例3. 要素の属性を指定する

idとclass以外でも、HTMLの属性を指定する方法があります。登場頻度は上の2つほど高くありませんが、知っておくと便利なので紹介しておきます。


この書き方は「属性セレクタ」と呼ばれるものです。


【CSS】

/* 属性「zokusei1」の値が「div1」の要素は赤文字 */
[zokusei="div1"] { color: red; }
/* 属性「zokusei2」指定されている要素は青文字 */
[zokusei2] { color: blue; }

【HTML】

<div zokusei="div1">でぃぶ1</div>
<div zokusei2>でぃぶ2</div>

【表示結果】

でぃぶ1
でぃぶ2



属性セレクタは非常に柔軟で、もっと細かい指定の仕方も沢山あります。
全部見てみたい人はこちらのサイトを参考にしてください。


参考サイト
CSS3リファレンス



その他にも色んなセレクタがありますが、今回はこれだけにしておきます。

３．セレクタの組み合わせ

セレクタを使った書き方の場合、基本的に「ページ全体」に適用されます。


なので、例えば上で出したこの書き方をそのまま使うと、ページ上に存在する全てのdiv要素の文字が赤色になってしまいます。

/* (※ページ上に存在する全ての)div要素は赤文字 */
div { color: red; }

普通はこのままだと困るため、条件を増やして要素を絞り込むことが必要です。



ここでは、２で説明したセレクタを組み合わせ、さらに複雑なセレクタを作る方法を説明します。

組み合わせ1. 複数条件（A かつ B の要素）

セレクタをいくつか繋げて書くと、「AとBとCに当てはまる要素」といったように、複数の条件にあてはまる要素のみを指定することができます。


【CSS】

/* div要素で、classが「div1_c」で かつ、
   属性「zokusei」の値が「div1_z」なら赤文字 */
div.div1_c[zokusei="div1_z"] { color: red; }

【HTML】

<div class="sample_div div1_c" zokusei="div1_z">でぃぶ1</div>
<div class="div123" zokusei="div1_z">でぃぶ2</div>
<span class="div1_c" zokusei="div1_z">すぱん1</span>

【表示結果】

でぃぶ1
でぃぶ2
すぱん1


説明

上記は、こんな状態になっています。

  • 「でぃぶ1」は3つの条件全てに当てはまるので適用される
  • 「でぃぶ2」はclassの値が指定と違うので非適用
  • 「すぱん1」はタグの種類が指定と違うので非適用

組み合わせ2. 子供、もしくは子孫を指定する

ある要素の子供、または子孫を指定することができます。


「セレクタ1 セレクタ2」というように半角スペースで区切ると、セレクタ2の対象はセレクタ1の子孫である要素全てになります。


「セレクタ1 > セレクタ2」と記述した場合には、セレクタ2はセレクタ1のすぐ下（直下）にある子供だけに適用され、孫には適用されません。


ちょっと複雑になってきたので、以下に3つの例を挙げて説明します。
(見やすくするため、文字や背景の色を若干調整しています)

例1. 全ての子孫に適用

【CSS】

/* classが「div1」の要素の
   子孫にあたる全てのdiv要素は赤文字 */
.div1 div { color: red; }

【HTML】

<div class="div1">
  <div>適用(子)</div>
  <span>
    <div>適用(孫も対象)</div>
  </span>
</div>

【表示結果】

適用(子)
適用(孫も対象)


例2. 直下の子供のみに適用

【CSS】

/* classが「div2」の要素の
   直下にあるdiv要素は青文字 */
.div2 > div { color: blue; }

【HTML】

<div class="div2">
  <div>適用(子)</div>
  <span>
    <div>非適用(孫は対象外)</div>
  </span>
</div>

【表示結果】

適用(子)
非適用(孫は対象外)


例3. 複合させる

【CSS】

/* classが「div3」の要素の
   直下にあるdiv要素の
   子孫である全てのspan要素は赤文字 */
.div3 > div span { color: red; }

【HTML】

<div class="div3">
  <div>
    <span>適用(divから見た子)</span>
    <div>
      <div>非適用(spanじゃないため)</div>
      <span>適用(divから見た孫)</span>
    </div>
  </div>
  <span>
    非適用(div3の直下のspanは対象外)
  </span>
</div>

【表示結果】

適用(divから見た子)
非適用(spanじゃないため)
適用(divから見た孫)
非適用(div3の直下のspanは対象外)

カンマ区切りで複数指定

1つのスタイルを複数の要素に適用したい場合、セレクタをカンマ区切りで複数指定することができます。


【CSS】

/* classが「div1」の要素か、
  「div2」の子孫であるspan要素は赤文字 */
.div1, .div2 span { color: red; }

【HTML】

<div class="div1">でぃぶ1</div>
<div class="div2">
  <span>すぱん1</span>
</div>

【表示結果】

でぃぶ1
すぱん1

セレクタについての補足

CSSのセレクタでは、上記のように「Aの子供のB」という書き方はできますが、「Bの親のA」という逆の指定はできないので注意してください。


４．補足：開発者ツールでセレクタを確認する！

ここまで色々書いてみたものの、ちゃんと使えるようにするためには、実際に自分で書いてみた方が早いです。


以下、chromeの開発者ツールを使用してセレクタを考える方法を説明します。
（開発者ツールは、キーボードのF12を押すと表示されます。）

1. 要素の定義からセレクタを考える

f:id:MasaoBlue:20160515141056p:plain


①開発者ツールで、インスペクタのアイコン（画像の①）をクリックします。


②確認したい要素にカーソルを当てます。


③表示されたHTMLを見て、セレクタを考えます。


【考え方の例】
上の画像を見ると、カテゴリーのリンクは「aタグ」で、その周囲が「divタグ」で囲まれていることが分かります。ただし、このブログ上には沢山のdivタグが存在するため、カテゴリー部分を特定するには別の条件が必要です。


この例の場合、divタグに「entry-categories」(エントリのカテゴリー)という明快なクラス名がついているので、カテゴリーのリンク部分を特定するには


「『entry-categoriesというclass名がついた要素』の中にある『aタグ』」


を指定すれば良いと想定できます。


そして、この文章を今回説明したルールに沿って変換すると
『.entry-categories a』というセレクタができあがります。


2. 考えたセレクタを試す

考えただけでは勿体無いので、実際に使えるかどうか試してみます。


f:id:MasaoBlue:20160515144047p:plain


①「Console」タブをクリックします。


②開発者ツールのコンソールに以下を入力し、Enterを押します。


『document.querySelectorAll('確認したいセレクタ')』


f:id:MasaoBlue:20160515144153p:plain



③成功すると実行結果が表示されるので、カーソルを当ててみます。

※複数選択された場合、画像のように全ての要素が一覧で表示されます。


④選択できた場所がハイライトされるため、想定した要素が選択されているかどうか確認します。



こんな感じで、適当なサイトで遊んでみると理解がより深まるかと思います！

さいごに

セレクタの使いどころはCSSだけでなく、JavaScriptやjQueryにも登場するので、覚えておくと結構役に立つと思います。


補足したい点はいくつかありますが、逆にわかりにくくなりそうだったのでやめておきました。今日の所は、一旦ここまでです。


次回は、要素の配置（position）と、表示の種類（display）について書いてみます。


気力が持てば！

関連記事

早くこういう話につなげたい。

www.masaoblue.com