特定の画面サイズでのCSSスタイル

2024-02-16 18:08 CSS メディアクエリ
  1. メディアクエリを使用する方法: メディアクエリは、特定の画面サイズやデバイスの条件に基づいてスタイルを変更するためのCSSの機能です。以下は、画面幅が600px未満の場合に適用されるスタイルの例です。
@media (max-width: 600px) {
  /* 600px未満の画面幅に適用されるスタイル */
  body {
    background-color: lightblue;
  }
}
  1. CSS Gridを使用する方法: CSS Gridを使用すると、グリッドレイアウトを作成し、要素を特定のセルに配置することができます。以下は、画面幅が900px以上の場合に2列のグリッドレイアウトを適用する例です。
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) {
  .container {
    grid-template-columns: 1fr;
  }
}
  1. JavaScriptを使用する方法: JavaScriptを使用すると、画面サイズに応じてCSSクラスを動的に追加または削除することができます。以下は、画面幅が700px未満の場合に要素に特定のクラスを追加する例です。
<div id="myElement">This is a div element</div>
<script>
  window.addEventListener('resize', function() {
    var element = document.getElementById('myElement');
    if (window.innerWidth < 700) {
      element.classList.add('small-screen');
    } else {
      element.classList.remove('small-screen');
    }
  });
</script>
<style>
  .small-screen {
    background-color: lightyellow;
  }
</style>

これらは、特定の画面サイズで異なるスタイルを適用するための一般的な方法のいくつかです。必要に応じて、これらの例をカスタマイズして使用することができます。