CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSセレクターと宣言の基本をわかりやすく解説！構文と主要セレクター早見表

CSSセレクターとは

CSSセレクターは、指定したパターンに一致するHTML要素を選択するための仕組みです。セレクターの中にプロパティとその値を宣言することで、対象となる要素へスタイルを定義できます。

基本構文

スタイルを宣言するときの基本的な書式は以下の通りです。

Selector {
  property: value;
}

CSSには、単純セレクター、属性セレクター、擬似クラス、擬似要素などが用意されており、標準の結合子（コンビネータ）を使えば複数のセレクターを柔軟に組み合わせることも可能です。代表的なセレクターを以下の表にまとめました。

セレクター種類説明
*全称セレクター（ユニバーサルセレクター）すべての要素に一致します
eタイプセレクターeという型（タグ名）を持つすべての要素に一致します
e1 e2子孫セレクターe1要素の子孫にあたる任意のe2要素に一致します
e1>e2子セレクターe1要素の直接の子であるe2要素に一致します
e[bar="demo"]属性セレクター"bar"属性の値が"demo"と完全に一致するe要素に一致します
#idIDセレクターIDが"id"である要素に一致します

サンプルコード①：擬似要素 ::first-line の活用例

次の例では、擬似要素 ::first-line を使って、段落の最初の行だけに背景色・文字色・上線（オーバーライン）のスタイルを適用しています。

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
    background-color: lightgreen;
    color: white;
    text-decoration: overline black;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is our demo text. Only the first line will have a different style. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
</body>
</html>

出力結果

上記のコードを実行すると、次のように表示されます。

CSSセレクターと宣言の基本をわかりやすく解説！構文と主要セレクター早見表

サンプルコード②：span要素とIDセレクターの組み合わせ

続いて、p::first-line に加えて、span 要素へのフォントサイズ指定と、IDセレクター #demo を使った内側の影（inset box-shadow）の指定を組み合わせた例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
    background-color: lightgreen;
    color: white;
    text-decoration: overline red;
}
span {
    font-size: 1.4em;
}
#demo {
    box-shadow: inset 0 0 20px orange;
}
</style>
</head>
<body>
<h2>Student Details</h2>
<p><span>Student</span>details would be mentioned here. <span id="demo">Student Marks</span> includes the score of students in the final semester held July 2018. With that the ranks are also displayed.</p>
</body>
</html>

出力結果

このコードを実行すると、次のような表示になります。

CSSセレクターと宣言の基本をわかりやすく解説！構文と主要セレクター早見表

このように、セレクターの種類と宣言ブロックの書き方を押さえることで、ページ内の特定の要素だけをピンポイントに装飾できるようになります。まずはタイプセレクターやIDセレクターといった基本から試してみてください。

  1. CSSのborder（ボーダー）とoutline（アウトライン）の違いを徹底解説

    CSSで要素に枠線を表示したいとき、borderプロパティとoutlineプロパティという2つの選択肢があります。どちらも要素の周囲に線を描くためのプロパティですが、挙動や使い方には明確な違いがあります。本記事では、それぞれの特徴と違いをサンプルコード付きでわかりやすく解説します。borderプロパティとはborderは、要素の境界線を定義するためのプロパティです。border-width（太さ）、border-style（スタイル）、border-color（色）の一括指定ができるショートハンドとして機能します。主な特徴は以下の通りです。レイアウト上のスペース（領域）を占有します上下左右の各

  2. CSSメディアタイプとメディアクエリの基本を徹底解説

    CSSのメディアタイプ(Media Types)とメディアクエリ(Media Queries)は、デバイスの一般的な種類(スクリーン、プリントなど)や特性(画面解像度、ビューポートの寸法など)に応じて特定のスタイルを定義するための仕組みです。レスポンシブWebデザインを実現するうえで欠かせない技術といえます。 メディアクエリの構文 メディアクエリの基本構文は以下のとおりです。 @media not | only mediatype and (expressions) {    CSS-Code; } このメディアクエリが適用されるのは、主に次のようなケースです。 med