HTML で複数のクラスを作成する

1. HTML でコンテナに複数のクラスを割り当てる
2. 効率的な CSS を作成するために、HTML のコンテナに複数のクラスを割り当てる

この記事では、HTML で複数のクラスを作成する方法を紹介します。この記事では、HTML で複数のクラスを使用する利点について説明します。

HTML でコンテナに複数のクラスを割り当てる

HTML では、コンテナに 1つのクラスが割り当てられているのをよく見かけます。class 属性を使用して HTML 要素にクラスを割り当て、値を書き込むことができます。ブロックレベルのインライン要素でクラスを作成できます。<img>、<p>、<h1> などのさまざまな HTML タグのクラスを作成できます。通常、コンテナを作成してクラスを割り当て、CSS を使用してコンテナのスタイルを設定できます。. でコンテナクラスを選択できます CSS セレクター。その例を見てみましょう。

<div class ="box">
    <p> Hello World </p>
</div>

.box{
    border: 2px solid black;
    height:200px;
    width:200px;
}

上記の例では、クラス box を持つ div 要素を作成しました。div の中にいくつかのコンテンツがあります。CSS では、box クラスを選択し、それにいくつかのスタイルを適用しました。高さと幅のあるボックスを作成しました。境界線は黒です。

HTML のコンテナに 2つのクラスを割り当てることもできます。そのためには、クラスの 2つの名前を空白で区切って次々に記述する必要があります。次に、同じコンテナを含むクラスを個別にスタイル設定できます。

たとえば、上記の例に示すように、div を作成します。div の空白で区切られた 2つのクラス box と wrapper を記述します。CSS では、最初に box クラスを選択し、border プロパティを記述します。border プロパティの値を 2px solid black として指定します。次に、200px の高さと幅を指定します。次に、wrapper クラスを選択し、margin プロパティに 20px の値を指定します。

以下の例では、2つのクラスを使用して、コンテナに 20px のマージンを追加しました。

サンプルコード：

<div class ="box wrapper">
    <p> Hello World </p>
</div>

.box{
    border: 2px solid black;
    height:200px;
    width:200px;
}

.wrapper{
    margin:20px;
}

効率的な CSS を作成するために、HTML のコンテナに複数のクラスを割り当てる

コンテナ内で複数のクラスを使用する方法を学びました。ここで、このアプローチに従うことの利点を理解する必要があります。一部のクラスが同じ属性を持っている場合、コンテナ内で複数のクラスを使用できます。共通クラスのスタイルを 1 回設定し、個々のクラスのスタイルを個別に設定できます。したがって、CSS を効率的に記述できます。

たとえば、HTML で 3つの div 要素を作成します。要素ごとに、最初のクラス名として box を記述します。次に、最初の div にクラス名 redBox、2 番目に greenBox、3 番目の div に blueBox を記述します。次に、CSS で、box クラスを選択し、200px の高さと幅を指定します。20px のマージンを設定します。次に、個々のクラス名を選択し、それぞれの背景色を指定します。クラス redBox を選択し、background-color プロパティを red に設定します。それぞれの色を背景色として、残りのクラスについても同じことを繰り返します。

以下の例では、これら 3つのボックスの共通の属性を識別し、共通のクラス box を作成しました。このため、各ボックスに繰り返しスタイルを記述する必要はありません。また、コンテナに個別のクラスを割り当て、ボックスを独自の色でスタイル設定できるようにしました。このようにして、複数のクラスを使用して効率的な CSS コードを記述できます。

サンプルコード：

<div class ="box redBox"></div>
<div class ="box greenBox"></div>
<div class ="box blueBox"></div>

.box{
    height:200px;
    width:200px;
    margin:20px;
}

.redBox{
    background-color:red;
}

.greenBox{
    background-color:green;
}

.blueBox{
    background-color:blue;
}