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

CSSでdiv要素とp要素をまとめて選択する方法（グループセレクタの使い方）

CSSで複数の要素を同時に選択する基本

CSSで複数の要素に同じスタイルを適用したい場合は、セレクタをカンマ（,）で区切って指定します。この書き方は「グループセレクタ」と呼ばれ、1つのルールセットを複数の要素にまとめて適用できる便利な手法です。

例えば、ページ内のすべての <div> 要素と <p> 要素に同じデザインを適用したいときは、次のように記述します。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         div, p {
            color: blue;
            background-color: orange;
         }
      </style>
   </head>
   <body>
      <h1>Demo Website</h1>
      <h2>Fruits</h2>
      <p>Fruits are good for health.</p>
      <div>
         <p>This is demo text.</p>
      </div>
   </body>
</html>

実行結果のポイント

このHTMLをブラウザで開くと、「Fruits are good for health.」という段落と、div要素内にある「This is demo text.」という段落の両方に、文字色が青（blue）・背景色がオレンジ（orange）のスタイルが適用されます。

一方、<h1> や <h2> の見出しはセレクタに含まれていないため、スタイルの対象外になります。このように、カンマで区切ったセレクタに一致する要素だけがまとめて装飾される仕組みです。

グループセレクタを使うメリット

  • 同じスタイル定義を何度も書く必要がなく、コードの重複を減らせる
  • デザイン変更の際に修正箇所が1か所で済み、保守性が向上する
  • 見た目の一貫性を保ちやすくなる

注意点

セレクタを並べるときは、最後のセレクタの後ろにカンマを付けないようにしましょう。余分なカンマがあるとCSSが正しく解釈されず、スタイル全体が適用されなくなることがあります。

  1. 【CSS】Flexboxで作る高度なレイアウト！基本プロパティと実装サンプルを解説

    Flexbox（フレックスボックス）とは？ CSS3には「Flexible Box Layout（フレキシブルボックスレイアウト）」と呼ばれるレイアウトモードが用意されており、一般的にはFlexbox（フレックスボックス）として知られています。Flexboxを活用することで、従来のfloatやpositionを使った手法よりもはるかに簡単かつ柔軟に、複雑なWebアプリケーションやWebページのレイアウトを構築できます。 Flexboxは「フレックスコンテナ」（親要素）と「フレックスアイテム」（子要素）という2つの概念で構成されます。親要素にdisplay: flex;を指定するだけで、その直下

  2. CSSだけで実現するスムーススクロールの書き方

    CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。 scroll-behaviorプロパティの主な値 auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。 smooth:滑らかなアニメーションを伴ってスクロールします。 このプロパティはChrome、Firefox、Edge、Safariなどの主要ブ