読者です 読者をやめる 読者になる 読者になる

JavaScript勉強会

JavaScriptの学習日記

CSSセレクターとは?

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

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

 

 

CSS

CSSとは?-CSSの基本

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

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

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

 

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

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

 

f:id:jsstudy:20170513231648p:plain

 

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

 

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

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

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

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

 

f:id:jsstudy:20170514011412j:plain

 

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

 

セレクターとは?

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

selectorとは

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

 

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

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

 

CSSセレクタ

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

 

qiita.com

 

h1 { color: red; }

セレクタとはスタイルを適用する対象を指定するものです

 

  • h1 … セレクタ
  • color … プロパティ
  • red … (プロパティの)値

 

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

  1. セレクタ
  2. プロパティー

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

 

  1. Where (どこに) → セレクタ
  2. What (何を) → プロパティー
  3. How (どのように) → 値

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

 

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

 

CSSセレクターの分類

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

 

www.htmq.com

 

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

 

要素セレクター(タイプセレクター)

スタイルを適用する対象が、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」の設計手法
 

(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要素でも機能するようにすべきです。

 

  • デザインやHTMLは変更されることもあるので、要素セレクターはなるべく使わない。
  • 要素セレクターの代わりに、クラスセレクターなどを活用する。

 

まとめ

 

CSSの用語を理解して、CSSの使い方に慣れるようにしたいです。

 

 

最強のCSS設計 チーム開発を成功に導くケーススタディ

最強のCSS設計 チーム開発を成功に導くケーススタディ