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

CSSの要素セレクタを使って<p>などの特定の要素を選択する方法

CSSでHTML要素にスタイルを適用するには、要素セレクタ（タイプセレクタ）を使用します。要素セレクタは、指定したタグ名と一致するすべての要素を一括で選択できるため、ページ全体の基本スタイルを設定する際に非常に便利です。

要素セレクタの基本的な使い方

たとえば、ページ内のすべての <p> 要素に対してスタイルを適用したい場合は、セレクタとして p を指定します。以下のコードを実行して、その動作を確認してみましょう。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: blue;
            background-color: orange;
         }
      </style>
   </head>
   <body>
      <h1>デモサイト</h1>
      <h2>学習コンテンツ</h2>
      <p>Web開発、プログラミング、データベース、ネットワークなどのチュートリアルを掲載しています。</p>
      <p>すべてのチュートリアルには、図解付きのレッスンが含まれています。</p>
   </body>
</html>

コードの解説

この例では、<style> タグ内で p { ... } というスタイルルールを定義しています。

  • color: blue; — 段落内の文字色を青色に設定します。
  • background-color: orange; — 段落の背景色をオレンジ色に設定します。

このスタイルは、<body> 内にあるすべての <p> 要素に自動的に適用されます。つまり、2つの段落のどちらにも同じ文字色と背景色が反映されるのが確認できます。

ポイント

  • 要素セレクタは「タグ名」だけで記述するため、class属性やid属性をHTML側に追加する必要がありません。
  • 同じタグ名を持つ要素すべてに影響するため、特定の要素だけを対象にしたい場合は、クラスセレクタやIDセレクタの併用を検討しましょう。

このように、要素セレクタを使うことで、シンプルな記述だけで効率的にスタイルを適用できます。まずは基本となる要素セレクタをマスターし、その後、より高度なセレクタへと学習を進めていきましょう。

  1. CSSで子要素を選択する方法｜子結合子と子孫結合子の違いを解説

    CSSの子結合子（child combinator）は、親要素の直下にある子要素のみを選択するために使用します。記号「>」を用いて表現します。子結合子の基本的な構文は以下の通りです。セレクタ > セレクタ { プロパティ: /*値*/; }一方、子孫結合子（descendant combinator）は、親要素に含まれるすべての子孫要素（子・孫・ひ孫など、階層の深さに関係なく）を選択します。セレクタ同士を半角スペースで区切って記述します。子孫結合子の基本的な構文は以下の通りです。セレクタ セレクタ { プロパティ: /*値*/; }使用例1：子結合子の基本的な使い方

  2. CSSで兄弟要素を選択する方法｜隣接兄弟セレクタ（+）と一般兄弟セレクタ（~）の違いを解説

    CSSには、同じ親要素を持つ「兄弟要素」を選択するための結合子が2種類用意されています。1つは隣接兄弟結合子（+）、もう1つは一般兄弟結合子（~）です。それぞれの動作の違いを理解して、目的に応じて使い分けましょう。 隣接兄弟結合子（+）とは 隣接兄弟結合子（+）は、最初のセレクタで指定した要素の直後に隣接している要素だけをマッチさせたい場合に使用します。2つのセレクタは、必ず同じ親要素の子要素である必要があります。 CSSにおける隣接兄弟結合子の構文は以下の通りです。 Selector + Selector { attribute: /*値*/ } 一般兄弟結合子（~）とは 一方、2つ