【CSS】条件分岐の方法10選!初心者にもわかりやすく解説 – JPSM

【CSS】条件分岐の方法10選!初心者にもわかりやすく解説

CSS条件分岐のサンプルコードと応用例を示すイメージCSS

 

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

このサービスは複数のSSPによる協力の下、運営されています。

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

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

また、理解しにくい説明や難しい問題に躓いても、JPSMがプログラミングの解説に特化してオリジナルにチューニングした画面右下のAIアシスタントに質問していだければ、特殊な問題でも指示に従い解決できるように作ってあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

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

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

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

はじめに

どんなウェブデザイナーでも、CSSの条件分岐を使いこなせるようになると、ウェブページのデザインがぐんと楽しくなります。

しかし、初心者にとっては、CSSでの条件分岐の作り方や使い方が難しく感じることもあるでしょう。

そこで、この記事ではCSSでの条件分岐の方法を10選ご紹介し、初心者でもわかりやすいように詳しく徹底解説していきます。

さらに、サンプルコードと応用例も準備しましたので、ぜひ参考にしてみてください。

●CSSの条件分岐とは?

CSSの条件分岐とは、ウェブページ上で特定の条件を満たす場合にだけ、特定のスタイルを適用させる技術です。

これにより、ブラウザやデバイスによって異なるスタイルを適用することができます。

○方法1:メディアクエリを使った条件分岐

メディアクエリを使うと、デバイスの画面サイズや解像度に応じて、異なるスタイルを適用することができます。

@media screen and (max-width: 600px) {
  body {
    background-color: blue;
  }
}

このコードでは、画面幅が600px以下の場合、背景色が青になります。

○方法2:クラスを使った条件分岐

HTML要素にクラスを追加し、そのクラスに対してスタイルを適用することで、条件分岐を実現できます。

<div class="box blue-bg">Blue background</div>
<div class="box red-bg">Red background</div>
<!-- HTML -->
.blue-bg {
  background-color: blue;
}

.red-bg {
  background-color: red;
}
/* CSS */

このコードでは、blue-bgクラスがついた要素には青の背景色が、red-bgクラスがついた要素には赤の背景色が適用されます。

○方法3:nth-childを使った条件分岐

nth-childセレクタを使うことで、特定の順番にある子要素に対してスタイルを適用することができます。

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<!-- HTML -->
li:nth-child(2) {
  color: red;
}
/* CSS */

このコードでは、2番目のリストアイテムのテキスト色が赤になります。

○方法4:属性セレクタを使った条件分岐

属性セレクタを使って、特定の属性を持つ要素に対してスタイルを適用することができます。

<input type="text" placeholder="Text input">
<input type="submit" value="Submit">
<!-- HTML -->
input[type="submit"] {
  background-color: blue;
  color: white;
}
/* CSS */

このコードでは、type属性が”submit”のinput要素に、青の背景色と白いテキスト色が適用されます。

○方法5:notセレクタを使った条件分岐

notセレクタを使って、特定の条件を満たさない要素に対してスタイルを適用することができます。

<button class="primary">Primary button</button>
<button>Secondary button</button>
<!-- HTML -->
button:not(.primary) {
  background-color: grey;
  color: white;
}
/* CSS */

このコードでは、primaryクラスがついていないbutton要素に、灰色の背景色と白いテキスト色が適用されます。

○方法6:JavaScriptを使った条件分岐

JavaScriptを使って、動的にスタイルを適用することができます。

<button id="change-color">Change color</button>
<div id="box">This is a box</div>
<!-- HTML -->
document.getElementById('change-color').addEventListener('click', function() {
  document.getElementById('box').style.backgroundColor = 'red';
});
/* CSS */

このコードでは、ボタンをクリックすると、box要素の背景色が赤に変わります。

○方法7:CSS変数を使った条件分岐

CSS変数を使って、スタイルを動的に変更することができます。

<div class="box" style="--bg-color: blue;">Blue background</div>
<div class="box" style="--bg-color: red;">Red background</div>
<!-- HTML -->
.box {
  background-color: var(--bg-color);
}
/* CSS */

このコードでは、それぞれのbox要素に、指定された背景色が適用されます。

○方法8:CSS :hover疑似クラスを使った条件分岐

:hover疑似クラスを使って、マウスオーバー時に特定のスタイルを適用することができます。

<button>Hover me!</button>
<!-- HTML -->
button:hover {
  background-color: blue;
  color: white;
}
/* CSS */

このコードでは、ボタンにマウスを乗せると、背景色が青くなり、テキスト色が白くなります。

○方法9:CSS :focus疑似クラスを使った条件分岐

:focus疑似クラスを使って、フォーカスが当たっている要素に特定のスタイルを適用することができます。

<input type="text" placeholder="Focus me!">
<!-- HTML -->
input:focus {
  border-color: blue;
}
/* CSS */

このコードでは、input要素にフォーカスが当たっているとき、枠線の色が青くなります。

○方法10:CSS :checked疑似クラスを使った条件分岐

:checked疑似クラスを使って、チェックされた要素に特定のスタイルを適用することができます。

<label>
  <input type="checkbox">
  <span>Check me!</span>
</label>
 <!-- HTML -->
input:checked + span {
  color: blue;
}
/* CSS */

このコードでは、チェックボックスがチェックされたとき、隣接するspan要素のテキスト色が青くなります。

まとめ

以上の10の方法を使えば、CSSの条件分岐を簡単に実装することができます。

初心者の方も、これらのサンプルコードを参考にして、自分のプロジェクトに取り入れてみてください。

これらの方法を使いこなせるようになると、ウェブページのデザインがより柔軟で効率的になります。

最後まで読んでいただき、ありがとうございました!