もじゃもじゃラボ/CSSデザインの基礎を学ぼう！Webデザインに最低限必要な知識/セレクタ
HTMLCSSJavaScriptJava
HTMLCSSJavaScriptJava

セレクタ

CSSデザインの基礎を学ぼう！Webデザインに最低限必要な知識
JavaScriptでプログラミングの基本的概念を学ぼう！
Webページに動きをつけるプログラミングを学ぼう！
ライン公式アカウント
オンラインレッスンのお得なクーポン配信しています！
 
このチャプターの目次

セレクタ

セレクタはページの中のどの要素にスタイルを適用するか、要素を特定するためのものです。セレクタの書き方にはいくつかの種類がありますので、代表的なセレクタについて説明します。
  • タグセレクタ
      • タグセレクタとは、HTMLタグの要素名を指定することを言います。同じ要素に共通したスタイルを適用したい場合に使用します。
      この例では、すべてのp要素にスタイルを適用します。
  • id セレクタ
      • HTMLタグのid属性を利用します。id属性は、HTML文書の中で1つの要素を特定するための属性です。値には、その文書内で一意なid名を指定する必要があります。ページ内の1つの要素にのみスタイルを適用したい場合に使用します。
      この例では、pタグが3行あります。そのうちの1行目にはid属性が付けられており、値は"onamae"となっています。この時、セレクタは"#onamae"となります。"#"という記号はid属性を指し示し、"onamae"はその値を指していることを意味します。
  • class セレクタ
      • class属性の値に一致する要素にスタイルを適用します。HTMLタグのclass属性を使用します。class属性は、要素を分類するための属性で、特性などを値として持ちます。その要素の特性を表すものを指定しますので、class名が重複していても問題ありません。同じ特性を持つ要素が複数ある場合もあるからです。
      また、class属性には複数の値を指定することもできます。特性を複数持つ要素もあるからです。
      classセレクタは複数の要素にスタイルを適用したい場合に使用します。同じ分類の要素にスタイルを適用したい場合も使用します。パターン化されたスタイルなどに使います。
      文字揃えが右寄せの特性を持つ要素があるとしましょう。例えば「right」という値です。この場合、セレクタは「.right」となります。「.」はclass属性を指し示し、「right」はその値を指していることを意味します。
      を使用して文字の水平方向の配置位置をrightにすると、class名に「right」という名前の要素すべてが右寄せに配置されます。

id属性とclass属性の記述ルール

値の指定の仕方でOKなもの、NGなものを整理しておきます。

id属性

値の指定書式可否
1つの属性で1つの値を指定○
1つの属性で複数の値を指定×
HTML内で重複して指定×

class属性

値の指定書式可否
1つの属性で1つの値を指定○
1つの属性で複数の値を指定○
HTML内で重複して指定○
  • 1つの属性で値が1つの場合
      • idの場合もclassの場合も問題ありません。
  • 1つの属性に複数の値が指定されている場合
      • 例えば「bold」と「right」のような複数の値が指定されている場合です。classの場合、複数の特性を持つこともありますので問題ありませんが、idの場合、複数の値を指定することはできません。
  • 属性の値が1つのHTMLドキュメント内で重複している場合
      • 同じ値がabcというタグとdefというタグの、複数のタグに指定されている場合です。特性を値とするclassの場合は問題ありませんが、要素に名前をつけるidの場合、ドキュメント内で一意でなければならないため、指定することがはきません。