はじめに
概要
この記事では、セレクタの種類(子孫セレクタ、子セレクタ) クラスセレクタとの違いについてについて、役割、基本的な進め方、実装後に確認したいポイントを初心者にも分かりやすく解説します。手順をそのまま試すだけでなく、なぜ必要なのかを理解して、自分の制作環境へ合わせて判断できることを目指します。
※本記事の情報は執筆時点のものです。ソフトウェアやサービスの仕様は変更される場合があるため、実際の画面や公式情報も合わせてご確認ください。
読者セレクタの種類(子孫セレクタ、子セレクタ) クラスセレクタとの違いに…は、最初にどこを理解するとよいですか？
木村どの要素を基準にするか、どの状態で見た目を変えるか、画面幅が変わっても崩れないかを順番に確認することが大切です。
読者実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？
木村はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。
まずは子孫セレクタと子セレクタの違いについて解説いたします。
test1
test4
test1
test4
子孫セレクタを使用すると、bodyタグ内のすべてのPタグに対して値が適用されることがわかります。続いて子セレクタを見てみましょう。
test4
こちらは先程とは異なり、bodyタグの直下に配置されたPタグにのみ適用されていることがわかります。したがって、上記の指定はまったく異なるものであることが明らかになり、内容をしっかりと理解したうえ使用しデザインを形成する必要があります。
子孫セレクタと子セレクタの違いについて
子孫セレクタと子セレクタの違いについてでは、セレクタの種類(子孫セレクタ、子セレクタ) クラスセレクタとの違いについてを理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
簡単なコードを元に考えていきます。
HTML:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<p>test1</p>
<div>
<p>test2</p>
</div>
<div>
<div>
<p>test3</p>
</div>
</div>
<p>test4</p>
</body>
</html>※上記のコードを表示
test1
test2
test3
CSSにて子孫セレクタを記述
body p{
color: red;
}※上記の結果
test1
test2
test3
CSSにて子セレクタを記述
body>p {
color: red;
}※上記の結果
test1
test2
test3
クラスセレクタとの違いを理解しましょう。
クラスセレクタとの違いを理解しましょう。では、セレクタの種類(子孫セレクタ、子セレクタ) クラスセレクタとの違いについてを理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
要素の後にスペースを入れるかどうかで、意味合いが変わります。
以下のコードを確認ください。<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<p>test1</p>
<p class="test">test2</p>
</body>
</html>※上記のコードを表示
test1
test2
body p.test{
color: red;
}※上記の結果
test1
test2
【重要】
body p ※bodyの中の全てのPタグを指定
body p.test ※bodyの中のp.testというクラスセレクタのみ指定
body p test ※bodyの中のPタグの中の全てのtestクラスを指定
上記の指定は別の指定になることに注意が必要です。
【統括】
子孫セレクタの注意点：
親要素と子孫要素を結びつけるために使用する。
スペースを使ってセレクタとセレクタをつなぐ。
ネスト構造を指定する際に使用するが、過剰な使用は避ける。
クラスセレクタの注意点：
クラス属性を指定するために使用する。
ピリオド（.）を使ってセレクタを指定する。
クラス名は他の要素と重複しないようにする。
クラスセレクタとの違いを理解しましょう。で押さえたいポイント
クラスセレクタとの違いを理解しましょう。は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
まとめ
- セレクタの種類(子孫セレクタ、子セレクタ) クラスセレクタとの違いに…は、目的と役割を理解してから手順を試すと応用しやすい
- 変更前の状態を残し、一つずつ反映すると問題の原因を切り分けやすい
- スマートフォン、タブレット、PCの幅で確認し、横スクロールや文字の重なりがないかを見ます。マウス操作だけでなく、キーボードフォーカスや文字拡大時の見え方も確認してください。
COMMENTS
コメント（2件）