読み込み中...

CSSクラスを複数使う方法と使い方のサンプルコード

CSSクラスを複数使う方法と使い方について解説 CSS
2023.12.22
この記事は約5分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

Webページをデザインする際、CSSは欠かせないツールとなっています。

特に、CSSクラスを利用することで、デザインの再利用や効率化が可能となります。

本記事では、初心者の方でも手軽にCSSクラスの複数利用ができるよう、基本的な使い方から応用テクニックまでを解説します。

●CSSクラスを複数使う方法

CSSクラスを複数使うには、クラス名を半角スペースで区切って複数指定します。

例えば、次のようにクラス名を指定すると、idが”sample”の要素とclassが”box”の要素に、同じスタイルが適用されます。

#sample, .box {
  color: red;
}

このように、複数の要素に同じスタイルを適用する場合には、CSSクラスを複数使うことができます。

また、CSSクラスは、同じスタイルを適用するだけでなく、異なるスタイルを適用するためにも利用できます。

●CSSクラスの使い方の例

次に、CSSクラスの使い方の例をいくつか紹介します。

【例1】 idが”sample”の要素に、背景色と文字色を指定する場合。

HTML

<div id="sample">Hello World!</div>

CSS

#sample {
  background-color: yellow;
  color: blue;
}

【例2】 classが”box”の要素に、マージン、パディング、枠線を指定する場合。

HTML

<div class="box">This is a box.</div>

CSS

.box {
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

【例3】 classが”btn”の要素に、ボタン用のスタイルを指定する場合。

HTML

<button class="btn">Click me!</button>

CSS

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

これらの例を参考にして、自分でCSSクラスを作成して使ってみましょう。

●CSSクラスを複数使う際の注意点

複数のCSSクラスを使う場合、スタイルの優先順位によって、どのクラスが適用されるかが変わります。

具体的には、次のような優先順位があります。

  1. !importantが指定されたスタイル
  2. インラインスタイル
  3. idセレクタによるスタイル
  4. classセレクタによるスタイル
  5. タグセレクタによるスタイル
  6. ユニバーサルセレクタによるスタイル

つまり、idセレクタで指定されたスタイルは、classセレクタで指定されたスタイルよりも優先されます。

また、同じセレクタで複数のスタイルが指定されている場合は、後に指定されたスタイルが優先されます。

このような優先順位に気をつけて、適切にCSSクラスを使いましょう。

●応用例：レスポンシブWebデザインにおけるCSSクラスの使い方

最近は、スマートフォンやタブレットなどのモバイル端末でもWebサイトを閲覧することが一般的になってきました。

このような端末に対応するために、レスポンシブWebデザインが注目されています。

レスポンシブWebデザインとは、端末の画面サイズに合わせてWebサイトのレイアウトを自動的に変化させる技術です。

この技術には、CSSクラスを使ったスタイルの切り替えが欠かせません。

次に、レスポンシブWebデザインにおけるCSSクラスの使い方の例を紹介します。

【例4】 PC版とスマートフォン版で表示する画像を切り替える場合。

HTML

<div class="img-wrapper">
  <img src="pc.jpg" class="pc-img">
  <img src="sp.jpg" class="sp-img">
</div>

CSS

.pc-img {
  display: block;
}

.sp-img {
  display: none;
}

@media (max-width: 768px) {
  .pc-img {
    display: none;
  }
  
  .sp-img {
    display: block;
  }
}

この例では、クラス名に”pc-img”と”sp-img”を使って、PC版とスマートフォン版の画像を切り替えています。

また、@mediaルールを使って、画面幅が768px以下の場合には、PC版の画像を非表示にし、スマートフォン版の画像を表示するようにしています。

このように、CSSクラスを使って、レスポンシブWebデザインを実現することができます。

まとめ

CSSクラスを複数使うことで、スタイルの適用範囲を絞り込むことができます。

また、レスポンシブWebデザインにおいても、CSSクラスを使ったスタイルの切り替えが欠かせません。

しかし、複数のCSSクラスを使う場合は、優先順位に注意しなければなりません。

適切にCSSクラスを使って、美しいWebサイトを作り上げましょう。