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

HTMLでCSSクラスを使う方法を解説！基本の書き方から複数クラス指定まで

HTMLでは、要素のclass属性に基づいてスタイルルールを定義できます。そのクラスを持つすべての要素は、定義したルールに従って表示されます。この仕組みをクラスセレクターと呼びます。

クラスセレクターの基本的な書き方

特定のクラスを持つ要素を選択するには、ピリオド（.）+ クラス名の形式で記述します。たとえば、.black のように書きます。

.black {
    color: #000000;
}

上記のルールにより、ドキュメント内でclass="black"が設定されたすべての要素のテキストが黒色（#000000）で表示されます。

特定のタグに限定してスタイルを適用する

クラスセレクターをタグ名と組み合わせると、特定の要素だけにスタイルを限定できます。たとえば、class="black"を持つ<h3>要素のみを黒色で表示したい場合は、次のように記述します。

h3.black {
    color: #000000;
}

実践例：<p>タグにクラスでスタイルを適用する

もう少し具体的な例として、<p>タグへのスタイル適用を見てみましょう。次のコードでは、class="device"が設定された<p>要素のみに背景色と文字色が適用されます。

<!DOCTYPE html>
<html>
<head>
<style>
p.device {
    background: #000000;
    color: #ffffff;
}
</style>
</head>
<body>
<p>This is demo text</p>
<p class="device">Information about devices.</p>
<p>This is demo text</p>
</body>
</html>

この例では、2つ目の段落だけが黒背景・白文字になり、他の段落は通常のスタイルのまま表示されます。クラスセレクターを使わない場合と比較すると、同じタグでも柔軟に見分けをつけられるのがメリットです。

1つの要素に複数のクラスを指定する方法

HTMLでは、1つの要素に複数のクラスを同時に適用することも可能です。class属性の値として、スペース区切りで複数のクラス名を並べるだけです。次の例では、<p>タグに対してdeviceとaccessoriesという2つのクラスを組み合わせています。

<!DOCTYPE html>
<html>
<head>
<style>
p.device {
    background: #000000;
    color: #ffffff;
}
p.accessories {
    text-align: center;
}
</style>
</head>
<body>
<p class="device accessories">DEVICE DETAILS</p>
<p class="device">Information about devices.</p>
</body>
</html>

このコードでは、最初の<p>要素に両方のクラスが適用されるため、「黒背景・白文字」かつ「中央揃え」というスタイルになります。一方、2つ目の要素にはdeviceのみが適用されます。

まとめ

  • クラスセレクターは「.クラス名」の形式で記述する
  • 「タグ名.クラス名」とすれば、特定の要素だけにスタイルを限定できる
  • class="A B"のようにスペース区切りで複数クラスを併用できる

クラスセレクターを正しく使いこなせば、HTMLの構造を変えることなく、ページ内のデザインを効率的に管理できるようになります。

  1. HTMLのlist属性とは？datalist要素で入力候補を表示する方法を解説

    HTMLのlist属性とはHTMLでは、<datalist>要素を使用して、あらかじめ定義された選択肢のリストを作成できます。このリストは<input>要素（入力欄）に対して適用され、ユーザーが文字を入力すると、定義済みの選択肢が候補として自動的に表示されます。<input>要素のlist属性は、対応する<datalist>要素のidを参照することで、入力欄と選択肢リストを関連付けます。このlist属性は、HTML5で新たに導入された機能です。list属性の基本的な使い方list属性を使うには、以下の2つのステップを行います。<datali

  2. HTMLの1つのrange入力で異なるstep属性を使い分ける方法

    HTMLのinput要素におけるstep属性は、入力できる数値の間隔（刻み幅）を定義するための属性です。たとえば「0、2、4、6、8、10」のように、一定間隔で数値が増減する仕組みを作れます。また、min属性やmax属性と組み合わせることで、有効な値の範囲を柔軟に設定することも可能です。 本記事では、まずstep属性の基本的な使い方を確認したうえで、1つのrange入力の中で条件に応じて異なるstep属性を動的に切り替える方法を、JavaScript（jQuery）を使った実装例とともに解説します。 step属性の基本的な使い方 次のコードは、step属性を使って数値の刻みを作成するシンプルな