CSS - 文法

こんにちは、未来のウェブデザイナーたち！今日は、CSSの文法の魅力的な世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、この旅を案内するのが楽しみです。最初は誰もが初心者ですから、まずは心配しないでください。一歩一歩進めていきましょう。そのうち、プロのようにウェブページをスタイルを付けることができるようになるでしょう！

CSS - Syntax

タイプセレクタ

まずは基本から始めましょう。タイプセレクタはCSSセレクタの中で最もシンプルな形式です。特定のHTMLタグタイプのすべての要素をターゲットにします。

p {
  color: blue;
}

この例では、ウェブページ上のすべての<p>（段落）要素が青色に塗り替えられます。まるで魔法の杖を振って、「すべての段落、青色に変えろ！」と言うようなものです。

ユニバーサルセレクタ

ユニバーサルセレクタはセレクタの中のスーパーヒーローです。ページ上のすべての要素をターゲットにします。アスタリスク（*）で表されます。

* {
  margin: 0;
  padding: 0;
}

このスニペットは、すべての要素のマージンとパディングをリセットします。まるで整个ページに新たな始まりを与えるようなものです。

子孫セレクタ

子孫セレクタを使うと、他の要素の中に埋め込まれた要素をターゲットにできます。まるでCSSに、「

タグの中のすべてのタグを見つけて」と言っているようなものです。

p a {
  text-decoration: none;
}

このルールは、段落（<p>タグ）の中にあるすべてのリンク（<a>タグ）の下線を取り除きます。

クラスセレクタ

クラスセレクタは非常に柔軟です。特定のクラス属性を持つ要素にスタイルを適用することができます。クラスはHTML要素の名札のように考えられます。

.highlight {
  background-color: yellow;
}

現在、class="highlight"を持つすべての要素が黄色の背景を持つようになります。まるで特定の要素に黄色い背景のVIPパスを与えるようなものです。

IDセレクタ

IDセレクタはクラスセレクタに似ていますが、ユニークな要素に使うことを意図しています。各IDはページごとに1回だけ使用するべきです。

#header {
  font-size: 24px;
  font-weight: bold;
}

このスタイルは、id="header"を持つ要素に適用されます。ページ上のユニークな要素に最適です。

子要素セレクタ

子要素セレクタは子孫セレクタよりも特定です。親要素の直接の子要素だけをターゲットにします。

ul > li {
  list-style-type: square;
}

このルールは、<ul>要素の直接の子要素である<li>要素のリストのポイントを四角形に変更します。

属性セレクタ

属性セレクタは要素の属性や属性値に基づいて要素をターゲットにできます。まるでHTMLにX線視能力を持っているようなものです。

input[type="text"] {
  border: 1px solid blue;
}

このルールは、すべてのテキスト入力フィールドに青色のボーダーを適用します。

複数のスタイルルール

同じセレクタに複数のスタイルルールを適用することができます。各ルールは読みやすさのために新しい行に書かれるべきです。

h1 {
  color: navy;
  font-size: 20px;
  text-align: center;
}

ここでは、<h1>要素にナビ色の文字、20ピクセルのサイズ、中央寄せを適用しています。まるでヘッダーに完全なリニューアルを施しているようなものです。

セレクタのグループ化

時々、複数のセレクタに同じスタイルを適用したい場合があります。その場合、セレクタを繰り返すのではなく、グループ化することができます。

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

このルールは、<h1>、<h2>、<h3>要素すべてにArialフォント（Arialが利用できない場合は任何のサンセリフフォント）を適用します。

これで、すべてのセレクタの種類を便利な表にまとめます：

セレクタの種類	例	説明
タイプ	`p { }`	指定されたタイプのすべての要素を選択
ユニバーサル	`* { }`	すべての要素を選択
子孫	`p a { }`	`<p>`要素の中のすべての`<a>`要素を選択
クラス	`.highlight { }`	指定されたクラスを持つすべての要素を選択
ID	`#header { }`	指定されたIDを持つ要素を選択
子要素	`ul > li { }`	`<ul>`要素の直接の子要素であるすべての`<li>`要素を選択
属性	`input[type="text"] { }`	指定された属性を持つ要素を選択

練習は完璧を生みます！これらのセレクタをさまざまな方法で組み合わせて試してみてください。CSSを弄ぶほどに、それが直感的になるでしょう。

最後に、小さな話を共有したいと思います。私が最初にCSSを学び始めたとき、まるで野生の獣を飼いならすような気がしていました。しかし、時間と練習を重ねるうちに、その獣は私の忠実なウェブデザインのパートナーになりました。美しくスタイルを付けられたウェブサイトを見ると、微笑んで思わずにはいられません、「あなたの秘密を知っています！」

それで、未来のウェブ魔術師たち、続けましょう！そのうち、経験豊富なデザイナーさえも「哇、どうやったんだ？」と言わせるような素晴らしいウェブページを作れるようになるでしょう。ハッピーコーディング！

Credits: Image by storyset