CSS - セレクター: スタイリッシュなウェブページへの扉
こんにちは、未来のウェブデザインスーパースター！私は、このエキサイティングな旅であなたのガイドを務めることができることを嬉しく思います。10年以上にわたってコンピュータサイエンスを教えてきた者として、セレクターをマスターすることはウェブデザインの可能性を開く宝箱を解錠することのようなものだと言えます。それでは、一緒にあなたのウェブページを輝かせましょう！
セレクターの種類
冒険を始める前に、私たちが探求するさまざまなセレクターの種類を簡単に見てみましょう：
| セレクターの種類 | 例 | 説明 |
|---|---|---|
| ユニバーサル | * | すべての要素を選択 |
| 要素 | p | すべての 要素を選択 |
| クラス | .classname | class="classname" を持つ要素を選択 |
| ID | #idname | id="idname" を持つ要素を選択 |
| 属性 | [attribute] | 指定された属性を持つ要素を選択 |
| グループ | selector1, selector2 | いずれかのセレクターに一致するすべての要素を選択 |
| ポセイドン | :hover | 特定の状態にある要素を選択 |
| ポセイドンの要素 | ::first-line | 要素の一部を選択 |
| 子孫 | div p | 要素内のすべての 要素を選択 |
| 子要素 | div > p | 親が 要素であるすべての
要素を選択 |
| 隣接兄弟 | div + p | 要素の直後にくる最初の 要素を選択 |
| 一般兄弟 | div ~ p | 要素の兄弟要素であるすべての 要素を選択 |
それでは、これらを詳細に見ていきましょう！
CSS ユニバーサルセレクター
ユニバーサルセレクターはCSSのスイスアーミーナイフのようなものです - すべてを選択します！アスタリスク(*)で表されます。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}このコードはすべての要素の余白とパディングをリセットし、ボックスサイズプロパティを設定します。これはスタイルシートの開始時に使用されて、クリーンな状態を作成するためによく使用されます。
CSS 要素セレクター
要素セレクターは特定のHTML要素をターゲットにします。シンプルですが強力です。
p {
font-size: 16px;
line-height: 1.5;
}
h1 {
color: #333;
font-family: 'Arial', sans-serif;
}ここでは、すべての
要素に16ピクセルのフォントサイズと1.5の行間を適用し、すべての
要素に暗灰色の色とArialのフォントを設定しています。
CSS クラスセレクター
クラスセレクターは非常に多様です。同じクラスを持つ複数の要素にスタイルを適用することができます。
.highlight {
background-color: yellow;
font-weight: bold;
}
.error-message {
color: red;
border: 1px solid red;
padding: 10px;
}この例では、class="highlight"を持つすべての要素に黄色の背景と太字のテキストを適用し、class="error-message"を持つ要素に赤いテキスト、赤いボーダー、以及パディングを適用します。
CSS IDセレクター
IDセレクターは単一のユニークな要素をスタイル化するために使用されます。ハッシュ(#)記号で始まります。
#header {
background-color: #f0f0f0;
padding: 20px;
}
#main-content {
max-width: 800px;
margin: 0 auto;
}このコードはid="header"を持つ要素とid="main-content"を持つ要素をスタイル化します。IDはページ内でユニークである必要があります！
CSS 属性セレクター
属性セレクターは要素の属性や属性値に基づいて要素を選択します。
[type="text"] {
border: 1px solid #ccc;
padding: 5px;
}
[href^="https"] {
color: green;
}
[class*="btn"] {
cursor: pointer;
}ここでは、type="text"を持つすべての要素、httpsで始まるリンク、およびclassに"btn"を含むすべての要素を選択しています。
CSS グループセレクター
グループセレクターは複数のセレクターに同じスタイルを適用することができます。カンマで区切られます。
h1, h2, h3 {
font-family: 'Georgia', serif;
color: #333;
}
.error, .warning {
font-weight: bold;
}このコードはh1、h2、h3要素に同じフォント族と色を適用し、.errorおよび.warningクラスを太字にします。
CSS ポセイドンセレクター
ポセイドンセレクターは特定の状態にある要素を選択します。
a:hover {
text-decoration: underline;
}
input:focus {
outline: 2px solid blue;
}
li:nth-child(odd) {
background-color: #f0f0f0;
}これらのスタイルは、リンクをホバー状態にすると下線を追加し、フォーカスされた入力フィールドに青いアウトラインを追加し、奇数番目のリストアイテムにライトグレイの背景色を適用します。
CSS ポセイドンの要素セレクター
ポセイドンの要素セレクターは要素の特定の部分をスタイル化することができます。
p::first-letter {
font-size: 2em;
font-weight: bold;
}
h1::before {
content: "? ";
}
div::selection {
background-color: yellow;
}このコードは、段落の最初の文字を大きく太字にし、h1要素の前に指さす手のエモジを追加し、div要素内で選択されたテキストに黄色の背景色を適用します。
CSS 子孫セレクター
子孫セレクターは他の要素の子孫である要素を選択します。
article p {
line-height: 1.6;
}
.container .box {
border: 1px solid #ccc;
}ここでは、article要素内のすべてのparagraph要素と、class "box"を持つ要素がclass "container"を持つ要素内にある場合にスタイルを適用します。
CSS 子要素セレクター
子要素セレクターは親要素の直子女要素を選択します。
ul > li {
list-style-type: square;
}
div > p {
margin-bottom: 10px;
}このコードは、unordered list要素の直子女要素であるすべてのlist itemに四角形のリストマーカーを適用し、div要素の直子女要素であるparagraph要素に下余白を追加します。
CSS 隣接兄弟セレクター
隣接兄弟セレクターは他の要素の直後にくる要素を選択します。
h1 + p {
font-size: 1.2em;
font-weight: bold;
}
.button + .button {
margin-left: 10px;
}このコードは、h1要素の直後にくる最初のparagraph要素を大きく太字にし、buttonクラスを持つ要素が他のbutton要素の直後にくる場合に左余白を追加します。
CSS 一般兄弟セレクター
一般兄弟セレクターは他の要素の兄弟要素を選択します、たとえ直접的に隣接していなくても。
h1 ~ p {
color: #666;
}
.highlight ~ li {
font-style: italic;
}このコードは、h1要素の兄弟要素であるすべてのparagraph要素の色を変更し、class "highlight"を持つ要素の後ろにくるすべてのlist itemをイタリックにします。
CSSのネストされたセレクター
ネストされたセレクターは、セレクターを他のセレクター内にネストすることで、より簡潔で読みやすいCSSを書くことができます。
.container {
max-width: 1200px;
margin: 0 auto;
.header {
background-color: #f0f0f0;
padding: 20px;
h1 {
color: #333;
}
}
.content {
padding: 20px;
p {
line-height: 1.6;
}
}
}このネスト構造は、要素間の関係を明確に示し、CSSをより整理された状態にします。
CSSネストされたセレクターの特性
- 読みやすさの向上：ネストはHTMLの構造を反映しています。
- 繰り返しの削減：親セレクターを繰り返す必要がなくなります。
- メンテナンスのしやすさ：親セレクターの変更はネストされたセレクターにも自動的に適用されます。
- スコープの制限：スタイルは自然に親のコンテキストにスコープされます。
ネストは強力ですが、深くネストしないように注意してください。深すぎるネストはCSSを理解しにくく、メンテナンスが困難になります。
そして、あなたのエネルギッシュなウェブデザインの弟子様！あなたは刚刚CSSセレクターの whirlwind tourを完了しました。これらのツールを手に入れたことで、美しくスタイル化されたウェブページを作成する道筋が開けました。練習は完璧への道ですので、さまざまなセレクターとその組み合わせを試してみてください。ハッピーコーディング！
Credits: Image by storyset