Pocket

二回目の今回はCSSの超基本、「CSSセレクター」についてまとめてみたいと思います。
さて、CSSといえば、今や大小問わず必ず必要不可欠となるものですね。

Web業界に携わっている身としては、CSSを触らない日は無いぐらい、当たり前のものですが・・・

HTML5とCSS3が登場した当初は、「IEで使えないから~」とか「IEが~」とか言われておりましたが、今やスマートフォンの普及や
IE以外のブラウザのシェアの増加も伴い、プログレッシブエンハンスメント* の考え方も一般的になってる様に感じます。

そこで、CSS3で新たに定義されたCSSも含めて、まずは基本のセレクターも含めてまとめてみたいと思います。

まずは、CSSの基礎的なことを復習します。

1.CSSの基礎知識

blog_02_neta

まず、この図解を解説すると、

Selector(セレクター)とは、CSSを適応させる要素を指定します。 つまり図解の例でいうと「h2」のタグに対してのスタイルである事がわかります。
続いて Property(プロパティ)とは、実際にどんなスタイルを指定するかを設定します。図解の例でいうと、文字色を指定するプロパティを選択している事がわかります。
最後のValue(値)ですが、先に指定した、プロパティに対して【どれだけ】の指定をするかを設定します。
今回の図解でいうと、”h2のタグに対して文字色を~”何にするか、となるので値の所には、色コードを指定する事となります。

セレクターとは、スタイルを適応する対象を指定するモノとおぼえて頂ければと思います

 

CSSセレクター一覧

  • ユニバーサルセレクタ

    *(アスタリスク)で指定するセレクタです。これの意味は、全ての要素にプロパティを指定するという意味になり、上記コードの場合は、全ての要素の文字色を赤色にするとなります。
    かつてはリセットCSSではよく使われていましたが、最近はあまり使われる事は少なくなってきています。
  • タイプセレクタ

    よく使う度はかなり高いセレクタだと思います。上記の例でいうと、全てのpタグの要素の文字色を赤色にするという意味になります。

    HTML

     

  • クラスセレクタ

    こちらもよく使う度は無限大だと思いますが、.(ドット)+ 文字列で指定するセレクタとなります。
    上記の例でいえば、クラスsampleが指定されている要素の文字色を青にするという意味なります。
    クラス名に関しては、制約がいくつかあるものの自由に設定する事が可能です。

    1.命名は半角英数と記号のみで命名する
    2.最初の文字は、数字は使ってはいけない。
    3.大文字/小文字は区別される。

    HTML

    上記のHTMLの場合、一見すると2つのdivに入っている文字が適応されるように見えますが、単語的には同じ意味ではありますが、
    下段はSampleとなり頭文字が大文字の為適応されません。

  • IDセレクタ

    こちらもよく使うセレクタですが、#(シャープ)+文字列で指定するセレクタです。
    クラスと一緒同じ制約があり範囲ではあれば自由に命名できます。しかし、クラスセレクタとことなり 同一ページで使えるIDは1度きりとなります。
    下記のHTMLソースのようなコーディングをした場合、上段のほうは背景色(#dddddd)が反映されるのに対して、下段の要素に関しては反映されません。
    ※最近のモダンブラウザの場合は見た目を優先しているのか同一IDが複数存在してても、反映する場合がありますが、文法的にもセオリー的にもNGです。

     

  • 子孫セレクタ

    子孫セレクタというと、なにそれ?!ってなりますが 前述している クラス/IDセレクタ並に使っているセレクタです。
    下記のHTMLコードを見て頂くとわかりやすいかと思いますが、クラスsampleが親となりその中に入っている要素に適応するという意味になります。

    HTML

    クラスsampleが親となり、その中に入ってるのが子供となります。
    例でいうと、まずクラスsampleの中にpタグとdivタグが存在しており、更にdivの中に更にpが存在しています。
    子孫セレクタなので、ざっくりいうと、指定した要素の中の要素に適応させるとなります。

  • 子セレクタ

    HTML

    子セレクタとは、こちらも紐解いてみると結構わかりやすいです。
    クラスboxの中の要素のpにスタイルを適応するというセレクタですが、こちらは孫要素には適応されないというものとなります。

  • 兄弟セレクタ

    HTML

    また聞きなれない、セレクタ名ですが隣接セレクタといったほうが分かりやすいかもしれません。
    サンプルで説明すると、h1すぐ後に出てくるh2に対してスタイルを指定するというものとなります。

  • 後方セレクタ CSS3
    こちらはCSS3から追加されたセレクタになります。 

    HTML

    正直兄弟セレクタににています! 兄弟セレクタの場合は、間に別のタグがありそれ以降は適応されないですが
    後方セレクタはそれ以降も適応されていきますが但し、孫となる要素には適応されません。

CSS3で追加されたセレクタ

ここからはCSS3で追加されたセレクタをざっくりと紹介したいと思います。
IEの場合はIE9~のものとなりますので、IE9以下のブラウザでは対応していませんので、ご注意ください。

 

1.:first-letter

こちらは、pタグの最初の文字色を変えることができます。
CSS3追加とはいいましたが、実はこちらはIEで先行実装されており、古いIEでも使えるセレクタです。

 

2.:first-line

HTML

first-letterに似てますが、こちらは文字列の1行目にスタイルを適応するセレクタになります。
このサンプルでいうと、「毎日スゴく寒いです。」の箇所にスタイルが適応されます。

3.:first-child / :last-child

HTML

:first-child は 指定の子要素の最初の要素に対して、スタイルを適応するセレクタとなります。
:last-child はfirst-childの逆となり、一番最後の子要素に対してスタイルを適応させます。

4:nth-child(n)

HTML

first-childとlast-childに関しては、何となく単語でイメージができたと思いますが、このnth-childは何番目の子要素に対して
スタイルを指定することができます。今回の例でいうと、三番目のliタグに対して文字色を指定しています。

5.:checked

HTML

このセレクタは、チェックボックスにチェックされた事によってスタイルを適応するセレクタとなります。
サンプルはチェックされたらラベルの文字色を赤色にするといった簡単なものですが、CSS3が登場する前はこれらの処理はJqueryなどを使って逐次監視しなくては
実現出来ませんでしたが、CSS3によりCSSだけでそれができるようになりました。

6.:enabled/:disabled

HTML

また変わり種ではありますが、enabled(有効)とdisabled(無効)といったものも追加されました。
この属性自体は、form要素等でしか指定できないのですが、これらを使う事でよりCSSの幅が広がると思います。

enabledに関しては有効 ≒ デフォルト と思って頂いても構いません。
逆にdisabledは無効と指定されている要素に対して適応ができます。

今回はCSS3のまとめという形で、使用頻度の高そうなものを選んでお届け致しましたが、クラスセレクタやjqueryなどを駆使することで
上で述べたCSSの記述を使わなくても同じような見た目にできるのですが・・・乱雑にCSSクラスが付加されていくというのは
個人的にはなんとも、気持ち悪いと思ったりしますし、今後もCMS等を使ったご納品も増えてきて
なぜか、CMS側は別会社で行ってる為、それ用のクラス等が付けられない!といった事もあるかもしれません。
今回紹介したCSSを用いる事で、そういった自体に遭遇してもなんとか切り抜けられるかもしれません・・・・

ただ、レガシーブラウザ(IE9以下)等をどこまでカバーするかにもよるので、思惑通りに行かないのですがね・・・・(遠い目

それでは!

 

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。