HTMLでdivに複数のクラスを追加する方法

HTMLでdivに複数のクラスを追加したい時があります。

classを複数追加するにはどうしたら良いのでしょうか？

この記事では、HTMLでdivに複数のクラスを追加する方法を紹介します。

方法
まとめ

方法

HTMLでは、1つの要素に複数のクラスを設定することで、異なるスタイルや機能を組み合わせることができます。

これにより、同じ要素に対してさまざまなCSSスタイルやJavaScriptの機能を適用できるようになります。

複数のクラスを追加するには、クラス名を半角スペースで区切ります。

基本構文

複数のクラスを追加する場合、class属性の値にクラス名をスペースで区切って記述します。

<div class="class1 class2 class3">コンテンツ</div>

上記の例では、class1、class2、class3の3つのクラスがdiv要素に適用されています。

CSSで複数クラスを適用する

複数のクラスが指定された要素に対して、CSSでそれぞれのクラスに異なるスタイルを適用できます。

例:

<div class="box highlighted">Hello, World!</div>

.box {
    padding: 20px;
    border: 1px solid #000;
}

.highlighted {
    background-color: yellow;
}

.box クラスは、要素にパディングとボーダーを追加します。
.highlighted クラスは、要素に背景色を追加します。

この結果、divは20pxのパディングとボーダーを持ち、背景色が黄色になります。

全てのクラスを一度に全部指定する必要はありません。

指定したクラスのどれかを指定すれば大丈夫です。

JavaScriptで複数クラスを利用する

JavaScriptでも複数クラスを指定している要素を操作できます。

<div class="box highlighted">Hello, World!</div>
<button onclick="toggleHighlight()">Toggle Highlight</button>

<script>
function toggleHighlight() {
    const element = document.querySelector('.box');
    element.classList.toggle('highlighted');
}
</script>