はじめに
どんなウェブデザイナーでも、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の条件分岐を簡単に実装することができます。
初心者の方も、これらのサンプルコードを参考にして、自分のプロジェクトに取り入れてみてください。
これらの方法を使いこなせるようになると、ウェブページのデザインがより柔軟で効率的になります。
最後まで読んでいただき、ありがとうございました！
