JavaScript勉強会

JavaScript学習で、「CSS セレクター」という用語がたまに出てきます。

CSS セレクターについてまとめておきます。（メモ）

CSS
- セレクターとは？
CSSセレクター
CSSセレクターの分類
- 要素セレクター（タイプセレクター）
  - HTMLタグとHTML要素の違い
  - CSSで要素セレクターはなるべく使わない
まとめ

CSS

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。

CSSは、HTMLと組み合わせて使用する言語です。

HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。

CSSとは？これを読めば初心者でも必ずCSSが書ける！｜Udemy メディア

CSSとは、「HTMLのタグで囲んだ範囲の文字の色・大きさ・背景の色や配置などを指定するための言語」です。

CSSを適応したいタグ（上図ではh1）のことを「セレクタ」、変更したい項目を「プロパティ」、そのプロパティを決めるものを「値」と呼びます。

CSSの基本-スタイルシートの記述方法

セレクタ { プロパティ: 値; }

このように、「何に」（セレクタ）、「何を」（プロパティ）、「どのように」（値）適用するかを宣言していきます。

セレクタはスタイルを宣言したい対象（範囲）を記述します。

CSSは、「カスケーディング・スタイル・シート」の略
CSSは、HTML文書の見た目（装飾）を設定するための言語
CSSは、「セレクター」「プロパティー」「値」の組合せで書く

セレクターとは？

selectorの意味 - 英和辞典 Weblio辞書

selectorとは

選ぶ人、選択者、選別機、(オートマチック車の)変速レバー、(ギヤ)セレクター

英語の「selector」には、「select（選ぶ）するもの」という意味があります。

「CSS セレクター」と言った場合、「CSSの選択者」というような意味でしょうか？

CSS セレクター

CSSの「セレクター」とは、CSSを適用する対象のことですね？

qiita.com

h1 { color: red; }
セレクタとはスタイルを適用する対象を指定するものです

h1 …　セレクタ

color …　プロパティ

red …　(プロパティの)値

CSSの文法で、CSSの構成要素は、

セレクター
プロパティー
値

の３つの組合せで記述されます。

Where （どこに）　→　セレクター
What （何を）　→　プロパティー
How （どのように）　→　値

という３つを指定します。

CSSを適用する対象＝「どこに（Where）」を指定する項目が、CSSの「セレクター」です。

CSS セレクターの分類

CSSのセレクターは、対象の種類によって、いろいろ分類されていました。

www.htmq.com

要素型セレクター（タイプセレクター）
IDセレクター
クラスセレクター

など、いろいろ分類されています。

要素セレクター（タイプセレクター）

スタイルを適用する対象が、HTML要素（HTMLタグで囲まれた部分）であるセレクターを、「要素セレクター」（タイプセレクター）と言います。

要素型セレクタ（タイプセレクタ）－スタイルシートリファレンス

要素型セレクタ（タイプセレクタ）は、要素名で対象を指定してスタイルを適用する基本的なセレクタです。

HTMLタグとHTML要素の違い

「htmlタグ」と「html要素」の違い- M2制作

f:id:jsstudy:20170514002829g:plain

HTMLタグで囲まれた部分がHTML要素ですね。

CSSで要素セレクターはなるべく使わない

極力、タイプセレクタを使わない - < /gecko >

僕は、タイプセレクタ（ E { … } ）をたくさん使うCSSはあまり好きじゃありません。

ようは、親要素に応じて、スタイルが変化するわけです。

そのたびにCSSを書き換える？？

HTMLの構造や、要素が変わる可能性がゼロとは言い切れません。

そういった変化に弱いCSSは書きたくないものです。

まとめ

基本的には、「作成するもの全ての要素にclass属性値を付与し、すべてクラスセレクタで書き、どんな要素に指定されても同じ振る舞いをする」ように作るのが理想だと思っています。

Web制作者のためのCSS設計の教科書モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

作者: 谷拓樹
出版社/メーカー: インプレス
発売日: 2014/07/24
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

(p.31)

2-2　セレクタのリファクタリング

セレクタをより安全でシンプルなものに

HTMLに依存したセレクタをもっとシンプルに、そしてより安全なセレクタへと最適化することができます。

要素セレクタを省略する

よく要素セレクタとクラスセレクタの組み合わせを書くことがあります。

その意図は、おそらくセレクタが表す通り、次のようなものかもしれません。

タイトルとして強調するh2要素

リンク一覧となるul要素

しかしこうした要素を指定することは詳細度を高めるだけに過ぎず、セレクタとしては省略しても問題ないはずです。

もしマークアップとCSSの関係を明示したいのであれば、セレクタでそれを表すのではなく、コメントで表現するほうが、セレクタの詳細度を上げずに、別の開発者に意図を伝えることができます。
.title { /* h2要素に適用する */
    font-size: 1.4em
    font-weight: bold;
}
/* ul */.link-list li {
    padding-left: 20px;
    background: url(bullet.png) no-repeat left center;
}
ただし多くの場合、そうした要素を指定すること自体にもメリットはさほどなく、デザインやマークアップの変更によって要素が変わってしまうこともあるので、コード例にあるような「このクラスはh2要素に適用する」のようなガイドは不要かもしれません。

実際にはh2要素でなくとも、h1要素やh3要素でも機能するようにすべきです。