40代高卒者がIT転職に成功するためのデザインスキル【CSSセレクタ】

こんにちは、フローです。

今回は、CSSのセレクタについて書いて行きたいと思います。

前回の記事はこちらです。

1 CSSのセレクタとは
- 1.1 HTML
- 1.2 CSS
2 まとめ

CSSのセレクタとは

CSS（Cascading Style Sheets）のセレクタは、HTML要素を対象としてスタイルを適用するために使用されるパターンです。以下に、いくつかの一般的なセレクタとその説明を示します。

まずはコード例を見ていきましょう。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample HTML for CSS Selectors</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>これは通常の段落です。</p>

  <p class="example">これはクラス "example" を持つ段落です。</p>

  <div>
    <p>これは div 要素内の段落です。</p>
    <div>
      <p>これは div 要素内の別の div 要素内の段落です。</p>
    </div>
  </div>

  <h1>見出し1</h1>
  <p>これは見出し1の直後にある段落です。</p>

  <input type="text" data-attribute="example" />

  <a href="https://example.com">これは HTTPS リンクです。</a>

  <img src="image.png" alt="これは .png 画像です。" />

  <p title="これは example を含むタイトル属性を持つ段落です。">example を含むタイトル属性を持つ段落です。</p>
</body>
</html>

CSS

p {
  color: red;
}

.example {
  font-size: 16px;
}

#unique-element {
  background-color: blue;
}

div p {
  text-align: justify;
}

div > p {
  margin-left: 20px;
}

h1 + p {
  font-weight: bold;
}

[data-attribute] {
  border: 1px solid black;
}

[type=text] {
  background-color: lightgrey;
}

[class~=example] {
  font-weight: bold;
}

[lang|=en] {
  color: blue;
}

[href^="https"] {
  font-style: italic;
}

[src$=".png"] {
  border: 2px solid red;
}

[title*=example] {
  text-decoration: underline;
}

p { color: red; }

すべての<p>(段落)要素のテキスト色を赤に設定します。

.example { font-size: 16px; }

.exampleクラスを持つすべての要素のフォントサイズを16pxに設定します。

#unique-element { background-color: blue; }

id=”unique-element”を持つ要素の背景色を青に設定します。

div p { text-align: justify; }

<div>要素内のすべての<p>要素のテキストを両端揃えに設定します。

div > p { margin-left: 20px; }

<div>要素の直接の子である<p>要素の左マージンを20pxに設定します。

h1 + p { font-weight: bold; }

<h1>要素の直後にある<p>要素のフォントウェイトを太字に設定します。

[data-attribute] { border: 1px solid black; }

data-attribute属性を持つすべての要素のボーダーを1pxの実線で、色は黒に設定します。

[type=text] { background-color: lightgrey; }

type属性が”text”であるすべての要素の背景色をライトグレーに設定します。

[class~=example] { font-weight: bold; }

class属性が”example”を含むすべての要素のフォントウェイトを太字に設定します。

[lang|=en] { color: blue; }

lang属性が”en”で始まるすべての要素のテキスト色を青に設定します。

[href^=”https”] { font-style: italic; }

href属性が”https”で始まるすべての要素のフォントスタイルをイタリックに設定します。

[src$=”.png”] { border: 2px solid red; }

src属性が”.png”で終わるすべての要素のボーダーを2pxの実線で、色は赤に設定します。

[title*=example] { text-decoration: underline; }

title属性が”example”を含むすべての要素のテキストに下線を引きます。

まとめ

前述の13のCSSルールは、

HTMLドキュメント内の特定の要素、

または特定の状態にある要素に対してスタイルを適用します。

CSSのセレクタと属性を利用して特定の要素を選択し、

それらに対してスタイルを定義します。

これらのセレクタを使うことで、

あなたのウェブページは

より一貫したデザインと使いやすいインターフェースを提供できます。

セレクタは強力なツールであり、

それぞれが特定の目的に適しています。

CSSは非常に柔軟性があり、

個々のプロジェクトに応じてカスタマイズすることができます。

今回紹介したセレクタは、基本的なものであり、

さらに複雑なセレクタやプロパティを学ぶための出発点となることを期待しています。

レッツチャレンジ！

カテゴリー