CSSの条件分岐について

CSSにおけるif/else条件文について

CSSでは、直接的なif/else条件文を使用することはできません。

CSSは主にスタイルの定義に使用され、プログラミング言語のような制御フローの機能は備えていません。そのため、if/elseのような条件分岐を用いて、異なる条件に基づいてスタイルを動的に変更することはできません。

代替方法: メディアクエリやクラスの活用

しかし、CSSでは以下のような方法を用いて、条件的なスタイルの適用を実現することができます。

1. メディアクエリ
   

   • 画面サイズやデバイスの種類に基づいてスタイルを調整します。
   • 例えば、スマートフォンとデスクトップで異なるレイアウトやフォントサイズを適用することができます。

   @media screen and (max-width: 768px) {
       /* スマートフォン用のスタイル */
   }
   

2. クラスの活用
   

   • HTML要素にクラス属性を付与し、そのクラスに基づいてスタイルを適用します。
   • JavaScriptや他のスクリプト言語を使用して、条件に基づいてクラスを動的に追加または削除することで、異なるスタイルを適用することができます。

   <div class="element">...</div>
   

   .element {
       /* 標準のスタイル */
   }
   
   .element.active {
       /* アクティブ状態のスタイル */
   }
   

   if (condition) {
       element.classList.add('active');
   } else {
       element.classList.remove('active');
   }
   

CSSにおける条件分岐の例

メディアクエリを用いた条件分岐

@media screen and (max-width: 768px) {
    /* スマートフォン用のスタイル */
    body {
        font-size: 14px;
    }
    .container {
        width: 90%;
    }
}

@media screen and (min-width: 769px) {
    /* デスクトップ用のスタイル */
    body {
        font-size: 16px;
    }
    .container {
        width: 80%;
    }
}

• 説明
  
  • 画面幅が768ピクセル以下の場合（スマートフォン）、スマートフォン用のスタイルが適用されます。
  • 画面幅が769ピクセル以上の場合は、デスクトップ用のスタイルが適用されます。

クラスの活用による条件分岐

<div class="element" id="myElement">...</div>

.element {
    /* 標準のスタイル */
    color: black;
}

.element.active {
    /* アクティブ状態のスタイル */
    color: red;
}

const myElement = document.getElementById('myElement');

if (condition) {
    myElement.classList.add('active');
} else {
    myElement.classList.remove('active');
}

• 説明
  
  • conditionが真の場合、myElement要素にactiveクラスが追加され、赤色のテキストになります。
  • conditionが偽の場合、activeクラスが削除され、標準の黒色のテキストになります。

メディアクエリ

• 例
  

  @media screen and (max-width: 768px) {
      /* スマートフォン用のスタイル */
  }
  

クラスの活用

• 例
  

  <div class="element">...</div>
  

  .element {
      /* 標準のスタイル */
  }
  
  .element.active {
      /* アクティブ状態のスタイル */
  }
  

  if (condition) {
      element.classList.add('active');
  } else {
      element.classList.remove('active');
  }
  

CSS変数

• 例
  

  :root {
      --color: blue;
  }
  
  .element {
      color: var(--color);
  }
  

  if (condition) {
      document.documentElement.style.setProperty('--color', 'red');
  } else {
      document.documentElement.style.setProperty('--color', 'blue');
  }