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

HTML要素に複数のCSSクラスを適用する方法

HTML要素に複数のCSSクラスを適用したい場合は、class属性を使用します。class属性の値として、適用したいクラス名を半角スペースで区切って列挙することで、1つの要素に対して複数のスタイルを同時に反映させることができます。

基本的な書き方

複数のクラスを指定する際の基本構文は次のとおりです。カンマではなく、必ず半角スペースで区切る点に注意してください。

<h2 class="myClass1 myClass2">サンプルテキスト</h2>

実装例

以下のコードを実行すると、HTML要素に複数のCSSクラスを適用する方法を実際に確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         h2.myClass1 {
            background-color: black
         }
         .myClass2 {
            color: red;
         }
      </style>
   </head>
   <body>
      <h2 class="myClass1 myClass2">Tutorialspoint</h2>
      <h3>Simply Easy Learning</h3>
   </body>
</html>

コードの解説

この例では、<h2>要素に「myClass1」と「myClass2」という2つのクラスを指定しています。

  • myClass1：背景色を黒（black）に設定します。セレクタが「h2.myClass1」となっているため、h2要素にのみ適用されます。
  • myClass2：文字色を赤（red）に設定します。こちらは特定の要素に限定しない汎用的なクラス定義です。

その結果、「Tutorialspoint」という見出しには黒い背景と赤い文字の両方が適用され、複数のクラスのスタイルが同時に反映されていることがわかります。一方、<h3>要素にはクラスを指定していないため、スタイルは適用されません。

押さえておきたいポイント

  • 複数のクラスを指定する場合は、クラス名を半角スペースで区切ります。カンマを使うと正しく認識されません。
  • 異なるクラス間で同じプロパティ（例：color）が競合した場合、CSSの詳細度（specificity）やスタイルの記述順序に基づいて、優先されるスタイルが決まります。
  • 共通のスタイルを持つクラスと、要素固有のスタイルを持つクラスを組み合わせることで、CSSの再利用性と保守性が大きく向上します。
  1. CSSをHTMLにリンクする方法――マークアップをすっきり整理して読みやすくしよう

    Web制作を学び始めたばかりの頃、多くの人が最初に取り入れるのがインラインスタイルです。style属性を使って、HTML要素に直接CSSを記述します。 <!DOCTYPE html> <html> <head> <title>Inline Style</title> </head> <body> <h1 style=color:blue;text-align:center;>Star Wars</h1> <h4 style=color:red;text-align:cente

  2. HTMLの引用タグの使い方を解説！q要素とblockquote要素の違いとは

    HTMLには、他の情報源から引用した文章を適切に表現するための専用タグが用意されています。代表的なものが、短い引用を定義する<q>タグと、別ソースから引用したセクション全体を定義する<blockquote>タグです。両者の大きな違いは要素の種類にあります。<q>タグはインライン要素として機能し、文章中に自然な形で引用文を埋め込めます。一方、<blockquote>タグはブロックレベル要素で、独立した引用ブロックとして表示されます。多くのブラウザでは、<q>タグで囲んだテキストには二重引用符（ ）が自動的に付与され、<blockq