こんにちは！今回は、Webデザインに欠かせない CSSセレクタ について解説します。CSSセレクタは、HTML要素にスタイルを適用するための基本的な仕組みです。これを理解することで、より効果的にWebページをデザインすることができます。
1. CSSセレクタとは？
CSSセレクタとは、HTML要素を選択し、その要素にスタイルを適用するためのルールです。セレクタにはいくつかの種類があり、それぞれ異なる要素をターゲットにします。
要素セレクタ (element)
要素セレクタは、HTMLの特定の要素を選択してスタイルを適用します。例えば、すべての p 要素の文字色を青にしたい場合、次のように記述します。
p { color: blue; }
この例では、ページ内のすべての段落（p 要素）が青色で表示されます。
クラスセレクタ (.class)
クラスセレクタは、特定のクラスが付けられた要素にスタイルを適用します。クラス名はドット (.) で始まります。
.myClass { color: red; }
次のHTMLでは、myClass クラスが適用された要素が赤色で表示されます。
<p class="myClass">このテキストは赤色です。</p> <p>このテキストはデフォルトの色です。</p>
2. 子孫セレクタとは？
子孫セレクタは、特定の要素の中に含まれる別の要素に対してスタイルを適用するためのセレクタです。
ul li の解説
ul li というセレクタは、無秩序リスト (ul) 内のリスト項目 (li) にスタイルを適用します。例えば、リスト項目を青色にしたい場合、以下のように記述します。
ul li { color: blue; }
この例では、リスト内のすべての項目が青色で表示されます。
ul li div の解説
ul li div というセレクタは、ul 要素の中にある li 要素のさらにその中にある div 要素にスタイルを適用します。
ul li div { color: red; }
例えば、以下のようなHTML構造があった場合、このCSSはリスト項目内の div 要素に赤色のスタイルを適用します。
<ul> <li> <div>このテキストは赤色です。</div> </li> <li> <div>このテキストも赤色です。</div> </li> </ul>
3. form と form input、form button とは？
form とは？
form は、ユーザーからの入力を収集するためのHTML要素です。フォーム内には、テキストボックス、ボタン、ラジオボタンなどの入力フィールドが含まれます。
<form action="/submit" method="POST"> <input type="text" name="username"> <button type="submit">送信</button> </form>
この例では、form 要素はフォーム全体を囲み、input 要素と button 要素が含まれています。
form input や form button とは？
form input や form button は、CSSで form 要素内にある特定の要素に対してスタイルを適用するための子孫セレクタです。
form { display: grid; grid-template-columns: 100px 1fr; gap: 10px; } form input, form button { font-size: 30px; }
このコードでは、form 要素をグリッドレイアウトにし、内部の input と button 要素のフォントサイズを30pxに設定しています。
まとめ
CSSセレクタを理解することは、Webデザインの基礎を築く上で非常に重要です。要素セレクタやクラスセレクタ、そして子孫セレクタを使いこなすことで、より柔軟で強力なスタイル設定が可能になります。ぜひ、これらのセレクタを活用して、自分のWebページを思い通りにデザインしてみてください！
