【WEB 入門講座】CSSのセレクタを学習する
本講座で、セレクタを学習する。 Web入門講座の目標の1つは、「JavaScriptを学習するために必要な Web知識を習得する事」である。 こんかい学習する「セレクタ」はJavaScriptで頻繁に利用する。 是非マスターしてほしい。
タグを指定してスタイルを設定する
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を適用する。
pタグの背景色を「#ff5」にする。
CSSでpタグを選択して背景色を設定すると、 2つのpタグの背景色が変更する。 もう一度CSSを見る。
p { } と記述されている。 これは「pタグのスタイルを設定する」という意味である。 この記述方法では、olタグやliタグにスタイルは設定されない。
CSSのスタイルをタグに設定する
セレクタ {
[スタイルを設定]
}
CSSでスタイルを設定する場合、 タグを指定してスタイルを設定する。 スタイルを設定するタグは「セレクタ」 という部分で指定する。 この講座で学習する事は、「セレクタ」のルールである。
p { } と記述すると、HTMLファイルに存在する全てのpタグにスタイルが 適用される。 こんかい、HTMLファイルにpタグが2つあるので、 2つのpタグの背景色が黄色になる。
では次にliタグにスタイルを設定する。
6行目で、セレクタに「li」と指定した。 これは「liタグのスタイルを設定する」という意味である。 スタイルを見ると、「color : red ;」とある。 liタグの文字の色を赤色に設定する。
走るIORI
- iori
- iori
歩くIORI
liタグの文字列「iori」の色が赤色になる。 セレクタにliタグを指定して、スタイルを設定したからである。 解説は以上である。
次のサンプルを見る。
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
- iori
- iori
歩くIORI
セレクタの部分に「span」と記述して、 spanタグのスタイルを設定する。 pタグ内のspanタグと、liタグ内のspnaタグの2つの範囲に スタイルが設定される。 解説は以上である。
次のサンプルを見る。 先ほど、pタグとliタグのspanタグにスタイルを設定した。 こんかいは、pタグのspanタグだけにスタイルを設定する。
走るIORI
- iori
- iori
歩くIORI
pタグ内のspanタグのみ背景色が黄色になる。
タグAの中のタグBにスタイルを設定
タグA タグB {
[スタイル]
}
タグAの中に存在するタグBに「スタイル」を設定する場合、
セレクタに「タグA タグB」と指定する。
CSSのセレクタに「p span」と記述されている。 これは、pタグの中のspanタグを設定する記述である。 こんかい、liタグの中にもspanタグが存在するが、 ここで設定するスタイルはliタグの中のspanに影響しない。
解説は以上である。
class属性とid属性
タグのclass属性とid属性を学習する。
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を適用する。
ioriクラスを持つタグにスタイルを設定する。
classを指定してスタイルを設定
.クラス名 {
[スタイル]
}
セレクタに注目する。クラス名の前に「.(ドット)」を記述する。 ドットの後にクラス名を記述すると、 「指定したクラス名を持つタグ」にスタイルを設定する。
こんかいCSSに「.iori」と記述したので、 セレクタは、class属性の値がioriのタグを意味する。
走るIORI
- iori
- iori
歩くIORI
class属性の値が「iori」のタグの背景色が黄色になる。 解説は以上である。
つぎのサンプルを見る。 今度は、「iori」クラスのliタグの背景色のみ変更する。
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タグ」を指定してスタイルを設定する。
特定のタグのクラスを指定
タグ名.クラス名 {
[スタイル]
}
セレクタに「タグ名.クラス名」と記述すると、 特定のタグの内、クラス名に一致するタグを選択できる。
こんかい、CSSのセレクタで「li.iori」と指定した。 これは「liタグのioriクラス」を意味する。
走るIORI
- iori
- iori
歩くIORI
class属性の値が「iori」のタグは、pタグとliタグの2つあるが、 CSSのセレクタで「li.iori」と指定したので、 liタグの背景色のみ黄色になる。 解説は以上である。
class属性の学習は終了である。 つぎにid属性を学習する。 これまでCSSのセレクタに「タグ名」や 「クラス名」を指定してスタイルを設定した。 こんかい学習するid属性は、 タグを一意に指定する。 つまり、「このタグのスタイルを設定する」という記述方法である。 サンプルを見る。
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」のタグのスタイルを設定する。
セレクタに「#iori」と記述する。
idを指定する
#id {
[スタイル]
}
idを指定してスタイルを設定する方法である。 指定するidの前に「 # 」を記述する。 こんかいCSSのセレクタに「#iori」と記述したので、 id属性の値が「iori」のタグを意味する。
走るIORI
- iori
- iori
歩くIORI
id属性がioriのタグは1つ目のpタグなので、 このような画面になる。
解説は以上である。