IORI online School

JavaScript、html、css の無料学習サイト

【WEB 入門講座】CSSのセレクタを学習する

Web入門講座
[WEB 入門講座]CSSのセレクタを学習する
目次
  1. タグを指定してスタイルを設定する
  2. class属性とid属性
  3. まとめ

本講座で、セレクタを学習する。 Web入門講座の目標の1つは、「JavaScriptを学習するために必要な Web知識を習得する事」である。 こんかい学習する「セレクタ」はJavaScriptで頻繁に利用する。 是非マスターしてほしい。

タグを指定してスタイルを設定する

001<!DOCTYPE html><html lang="ja">
002<head><meta charset="UTF-8">
003<title>IORI</title>
004<link rel="stylesheet" href="style.css">
005</head>
006<body>
007  
008  <p>走るIORI</p>
009  <ol>
010    <li>iori</li>
011    <li>iori</li>
012  </ol>
013  <p>歩くIORI</p>
014  
015</body>
016</html>

sample.htmlである。 しばらくこのファイルを利用して、学習する。 まず4行目で、利用するCSSを設定する。 こんかい、style.cssファイルをCSSとして利用する。 bodyタグの中を解説する。 bodyタグの子要素として、pタグ、olタグ、pタグが存在する。 olタグの下にliタグが2つあり、 文字列「iori」が記述されている。 画面の表示を見る。

CSS適用前の画面

走るIORI

  1. iori
  2. iori

歩くIORI

シンプルな画面である。この画面にCSSを適用する。

001/* pタグを設定 */
002p {
003  background : #ff5 ;
004}

pタグの背景色を「#ff5」にする。

CSS適用後の画面

走るIORI

  1. iori
  2. iori

歩くIORI

CSSでpタグを選択して背景色を設定すると、 2つのpタグの背景色が変更する。 もう一度CSSを見る。

001/* pタグを設定 */
002p {
003  background : #ff5 ;
004}

p { } と記述されている。 これは「pタグのスタイルを設定する」という意味である。 この記述方法では、olタグやliタグにスタイルは設定されない。

CSSのスタイルをタグに設定する セレクタ {
　　　[スタイルを設定]
}

CSSでスタイルを設定する場合、 タグを指定してスタイルを設定する。 スタイルを設定するタグは「セレクタ」 という部分で指定する。 この講座で学習する事は、「セレクタ」のルールである。

p { } と記述すると、HTMLファイルに存在する全てのpタグにスタイルが 適用される。 こんかい、HTMLファイルにpタグが2つあるので、 2つのpタグの背景色が黄色になる。

では次にliタグにスタイルを設定する。

001/* pタグを設定 */
002p {
003  background : #ff5 ;
004}
005/* liタグを設定 */
006li {
007  color : red ;
008}

6行目で、セレクタに「li」と指定した。 これは「liタグのスタイルを設定する」という意味である。 スタイルを見ると、「color : red ;」とある。 liタグの文字の色を赤色に設定する。

走るIORI

  1. iori
  2. iori

歩くIORI

liタグの文字列「iori」の色が赤色になる。 セレクタにliタグを指定して、スタイルを設定したからである。 解説は以上である。

次のサンプルを見る。

001<!DOCTYPE html><html lang="ja">
002<head><meta charset="UTF-8">
003<title>IORI</title>
004<link rel="stylesheet" href="style.css">
005</head>
006<body>
007  
008  <p>走る<span>IORI</span></p>
009  <ol>
010    <li><span>iori</span></li>
011    <li>iori</li>
012  </ol>
013  <p>歩くIORI</p>
014  
015</body>
016</html>

8行目と10行目にspanタグを追加した。 spanタグは特に意味の無いタグであり、特定の文または文字を 装飾するために利用する。 こんかい、spanタグで囲まれた文字の背景色を黄色に変更する。

走るIORI

  1. iori
  2. iori

歩くIORI

001/* spanタグを設定 */
002span {
003  background : #ff5 ;
004}

セレクタの部分に「span」と記述して、 spanタグのスタイルを設定する。 pタグ内のspanタグと、liタグ内のspnaタグの2つの範囲に スタイルが設定される。 解説は以上である。

次のサンプルを見る。 先ほど、pタグとliタグのspanタグにスタイルを設定した。 こんかいは、pタグのspanタグだけにスタイルを設定する。

001/* pタグを設定 */
002p span {
003  background : #ff5 ;
004}

走るIORI

  1. iori
  2. iori

歩くIORI

pタグ内のspanタグのみ背景色が黄色になる。

タグAの中のタグBにスタイルを設定 タグA タグB {
　　　[スタイル]
}

タグAの中に存在するタグBに「スタイル」を設定する場合、

セレクタに「タグA タグB」と指定する。

001/* pタグを設定 */
002p span {
003  background : #ff5 ;
004}

CSSのセレクタに「p span」と記述されている。 これは、pタグの中のspanタグを設定する記述である。 こんかい、liタグの中にもspanタグが存在するが、 ここで設定するスタイルはliタグの中のspanに影響しない。

解説は以上である。

class属性とid属性

タグのclass属性とid属性を学習する。

001<!DOCTYPE html><html lang="ja">
002<head><meta charset="UTF-8">
003<title>IORI</title>
004<link rel="stylesheet" href="style.css">
005</head>
006<body>
007  
008  <p class="iori">走るIORI</p>
009  <ol>
010    <li>iori</li>
011    <li class="iori">iori</li>
012  </ol>
013  <p>歩くIORI</p>
014  
015</body>
016</html>

ファイルを解説する。8行目で、pタグにclass属性を設定する。 class属性の値は「iori」である。 「pタグに、ioriクラスを設定する」などと言う。 11行目でliタグのclass属性に「iori」を設定する。

class属性 CSSのスタイルを、まとめて設定する時に便利

複数のタグに同じスタイルを設定する場合、 class属性を利用する。こんかい、 class属性の値が「iori」のタグにCSSを適用する。

001/* ioriクラスのタグ */
002.iori {
003  background : #ff5 ;
004}

ioriクラスを持つタグにスタイルを設定する。

classを指定してスタイルを設定 .クラス名 {
　　　[スタイル]
}

セレクタに注目する。クラス名の前に「.（ドット）」を記述する。 ドットの後にクラス名を記述すると、 「指定したクラス名を持つタグ」にスタイルを設定する。

こんかいCSSに「.iori」と記述したので、 セレクタは、class属性の値がioriのタグを意味する。

走るIORI

  1. iori
  2. iori

歩くIORI

class属性の値が「iori」のタグの背景色が黄色になる。 解説は以上である。

つぎのサンプルを見る。 今度は、「iori」クラスのliタグの背景色のみ変更する。

001<!DOCTYPE html><html lang="ja">
002<head><meta charset="UTF-8">
003<title>IORI</title>
004<link rel="stylesheet" href="style.css">
005</head>
006<body>
007  
008  <p class="iori">走るIORI</p>
009  <ol>
010    <li>iori</li>
011    <li class="iori">iori</li>
012  </ol>
013  <p>歩くIORI</p>
014  
015</body>
016</html>

sample.htmlは変更しない。 いま、8行目のpタグと11行目のliタグが、「iori」クラスである。 この2つのioriクラスの内、「liタグ」を指定してスタイルを設定する。

001/* ioriクラスのliタグ */
002li.iori {
003  background : #ff5 ;
004}

特定のタグのクラスを指定 タグ名.クラス名 {
　　　[スタイル]
}

セレクタに「タグ名.クラス名」と記述すると、 特定のタグの内、クラス名に一致するタグを選択できる。

こんかい、CSSのセレクタで「li.iori」と指定した。 これは「liタグのioriクラス」を意味する。

走るIORI

  1. iori
  2. iori

歩くIORI

class属性の値が「iori」のタグは、pタグとliタグの2つあるが、 CSSのセレクタで「li.iori」と指定したので、 liタグの背景色のみ黄色になる。 解説は以上である。

class属性の学習は終了である。 つぎにid属性を学習する。 これまでCSSのセレクタに「タグ名」や 「クラス名」を指定してスタイルを設定した。 こんかい学習するid属性は、 タグを一意に指定する。 つまり、「このタグのスタイルを設定する」という記述方法である。 サンプルを見る。

001<!DOCTYPE html><html lang="ja">
002<head><meta charset="UTF-8">
003<title>IORI</title>
004<link rel="stylesheet" href="style.css">
005</head>
006<body>
007  
008  <p id="iori">走るIORI</p>
009  <ol>
010    <li>iori</li>
011    <li class="iori">iori</li>
012  </ol>
013  <p>歩くIORI</p>
014  
015</body>
016</html>

8行目のpタグにid属性を設定した。 id属性の値は「iori」である。 id属性はタグを一意に指定するため、 同じファイル内でid属性の値が重複してはいけない。 11行目のliタグはclass属性が「iori」だが、 こちらはclass属性なので、id属性とは異なる。 では、「idがiori」のタグのスタイルを設定する。

001/* idがiori */
002#iori {
003  background : #ff5 ;
004}

セレクタに「#iori」と記述する。

idを指定する #id {
　　　[スタイル]
}

idを指定してスタイルを設定する方法である。 指定するidの前に「 # 」を記述する。 こんかいCSSのセレクタに「#iori」と記述したので、 id属性の値が「iori」のタグを意味する。

走るIORI

  1. iori
  2. iori

歩くIORI

id属性がioriのタグは1つ目のpタグなので、 このような画面になる。

解説は以上である。

まとめ

CSSのスタイルをタグに設定する セレクタ {
　　　[スタイルを設定]
}

タグAの中のタグBにスタイルを設定 タグA タグB {
　　　[スタイル]
}

class属性 CSSをまとめて設定する時に便利

classを指定してスタイルを設定 .クラス名 {
　　　[スタイル]
}

特定のタグのクラスを指定 タグ名.クラス名 {
　　　[スタイル]
}

idを指定する #id {
　　　[スタイル]
}