CSS: ルール、セレクター、プロパティ

CSS – カスケード スタイル シート (Cascading Style Sheets) は、Web ページのデザインに使用されるスタイル言語です。これにより、ページのコンテンツをプレゼンテーションから分離できるため、レイアウトやデザインの操作が容易になります。

CSS は一連のルールで構成されており、各ルールは Web ページ上の特定の要素をどのようにスタイル設定するかを決定します。ルールには、セレクターを使用した要素の選択と、それらの要素のプロパティの設定が含まれます。 CSS の主要コンポーネントであるルール、セレクター、プロパティを見てみましょう。

ルール

CSS ルールはセレクターとプロパティ ブロックで構成されます。このルールは、Web ページのどの要素をスタイル設定するか、およびそれらの要素をどのようにスタイル設定するかをブラウザーに指示します。各ルールは要素を選択するセレクターで始まり、選択された要素に適用されるプロパティのブロックで終わります。

簡単なルールの例を次に示します。

ここで `p` はページ上のすべての段落を選択するセレクターです。プロパティ ブロック内で、段落のスタイルが設定されます: 青色のテキスト色とフォント サイズ 16 ピクセル。

セレクター

セレクターを使用すると、Web ページ上の 1 つ以上の要素を選択して、特定のスタイルを適用できます。セレクターは非常に単純なものもあれば、より複雑なものもあり、タイプ、クラス、ID、属性、さらにはページ上の位置に基づいて要素を選択できます。

単純なセレクターの例:

• `p` – すべての段落を選択します。
• `.header` – クラス「header」を持つすべての要素を選択します。
• `#logo` – ID が「logo」の要素を選択します。

より複雑なセレクターの例:

• `ul li` – `ul` 要素の子である `li` リストのすべての要素を選択します。
• `input` – ページ上のすべてのテキスト フィールドを選択します。

プロパティ

プロパティは、セレクターを使用して選択された要素の外観を決定します。各プロパティには、要素の外観を指定する値があります。

プロパティの例:

• `color` – 要素のテキストの色を定義します。
• `font-size` – フォント サイズを設定します。
• `background-color` – 要素の背景色を設定します。
• `border` – 要素の境界線のスタイル、太さ、色を定義します。

プロパティの使用例を次に示します。

このルールは、すべての h1 見出しを選択し、テキストの色を赤、フォント サイズ 24 ピクセル、背景を黄色、枠線の太さを 1 ピクセルに設定します。

コンビネータ

CSS のコンビネーターを使用すると、セレクターを組み合わせて、より具体的なルールを作成できます。以下にコンビネータの例をいくつか示します。

• `div p` – `div` 要素の子であるすべての `p` 要素を選択します。
• `.menu-item > a` – クラス `.menu-item` の直接の子孫であるすべての `a` 要素を選択します。
• `h2 + p` – `h2` 要素の直後にあるすべての `p` 要素を選択します。

コンビネータを使用すると、ページ上の要素にスタイルを適用する方法を微調整できます。

疑似クラスと疑似要素

疑似クラスと疑似要素を使用すると、特定の状態にある要素、または特定の部分を持つ要素を選択できます。これらはメイン セレクターの後に指定され、コロンで示されます。

疑似クラスの例:

• `:hover` – カーソルが要素上にあるときにスタイルを適用します。
• `:active` – 要素がアクティブなとき (ボタンをクリックしたときなど) にスタイルを適用します。
• `:focus` – 要素にフォーカスがあるときにスタイルを適用します (たとえば、クリックされた入力フィールドなど)。

疑似要素の例:

• `::before` – 選択した要素のコンテンツの前にコンテンツを追加します。
• `::after` – 選択した要素のコンテンツの後にコンテンツを追加します。
• `::first-line` – 要素内のテキストの最初の行にスタイルを適用します。
• `::first-letter` – 要素内のテキストの最初の文字にスタイルを適用します。

CSS ファイルをインポートする

コードをより構造化し、保守しやすくするために、CSS を使用して他のファイルからスタイルをインポートできます。これは、CSS ファイルの先頭に配置できる「@import」コマンドで実現されます。

このようにして、スタイルを異なるファイルに分割すると、編集が容易になり、それぞれのファイルのサイズが小さくなります。

カスケードと優先順位

CSS はカスケードの原則に基づいています。つまり、スタイルはさまざまな場所やソースで定義でき、ブラウザーは優先順位に基づいてどのスタイルを適用するかを決定します。カスケードには次のものが含まれます。

• セレクターの優先順位: ブラウザはセレクターの特異性を尊重します。セレクターが具体的であればあるほど、優先順位が高くなります。
• スタイルの順序: 2 つのルールの詳細性が同じ場合、最後のルールが要素に適用されます。
• スタイルの重要性: `! important` を使用してスタイルの重要性を設定できます。これにより、スタイルが優先されます。

将来のコードのメンテナンスの問題を避けるために、`! important` を慎重に使用することが重要です。

メディアクエリ

CSS を使用すると、画面の幅や解像度などのデバイス設定に基づいてスタイルを適応させることができます。メディア クエリを使用すると、携帯電話からデスクトップまで、さまざまなデバイスで見栄えの良いレスポンシブ デザインを作成できます。

メディアクエリの例:

この例では、画面幅が 768 ピクセルを超えない場合にスタイルがページ要素に適用されます。

CSS は強力な Web スタイリング ツールであり、これらの基本は、CSS を使用して美しく機能的なデザインを作成するのに役立ちます。練習と経験はスキルを向上させ、経験豊富なフロントエンド開発者になるのに役立ちます。