CSSでデバイスの横幅に応じて要素の表示・非表示を切り替える

スマホの普及で、今やレスポンシブデザインは当たり前になりましたね。
今回は、使用しているデバイスの画面の横幅に応じて、CSSで特定の要素を表示したり、非表示にする方法をご紹介します。
デモならAdminLTEのサイドバーが参考になります。

横幅で表示する要素を切り替え

CSSのメディアクエリー（@media）を使用して、パソコンで表示するものをスマホでは非表示にし、逆にスマホで表示するものをパソコンでは非表示してみます。

2つのデバイス用にCSSを準備

まずは、パソコンとスマホのどちらかを表示する設定にしておきます。
ここではパソコンをデフォルトとして表示しておき、スマホを非表示にしておきます。

.main-header .logo .logo-lg {
  display: block;
}
.main-header .logo .logo-mini {
  display: none;
}

メディアクエリーで横幅に応じたCSSを適用

次に、CSSのメディアクエリー（@media）を使用して、デバイスの横幅が768pxを起点に、上記で設定した要素の表示と非表示を切り替えます。
以下の設定では、デバイスの横幅の最短が768px以上ならパソコン用で、横幅の最長が768px以下ならスマホ用の要素が表示されます。

@media (min-width: 768px) {
  .main-header .logo > .logo-lg {
    display: block;
  }
  .main-header .logo > .logo-mini {
    display: none;
  }
}
@media (max-width: 768px) {
  .main-header .logo > .logo-lg {
    display: none;
  }
  .main-header .logo > .logo-mini {
    display: block;
  }
}

要素を含むHTMLを作成

最後に、実際に表示するためのHTMLを用意します。
パソコンの大きい画面で見ると「WordPress」のみ表示され、スマホの小さい画面で見ると「WP」のみ表示されるCSSになっていることがわかります。

<header class="main-header">
    <a href="/home/" class="logo">
        <!-- パソコン -->
        <span class="logo-lg">WordPress</span>
        <!-- スマートフォン -->
        <span class="logo-mini">WP</span>
    </a>
</header>

デバイスの種類と画面の向き

今回は横幅を指定して紹介しましたが、実際にはパソコンやスマホの他にもタブレット等の他にもデバイスの種類があったり、画面の大きさが異なる、あるいは、画面の向きによって横幅が変わってしまいます。

デバイス別の横幅

下記のサイトを参考に、一般的な画面の横幅を紹介しますが、あまり細かくなると作る方も大変ですので、ある程度まとめた方が賢明だと思います。

/*------------------------------------------
  Responsive Grid Media Queries - 1280, 1024, 768, 480
   1280-1024   - デスクトップ（デフォルトのグリッド）
   1024-768    - タブレット横長
   768-480     - タブレット縦長
   480-less    - スマホ
--------------------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) { }
 
@media all and (min-width: 768px) and (max-width: 1024px) { }
 
@media all and (min-width: 480px) and (max-width: 768px) { }
 
@media all and (max-width: 480px) { }

• Original:https://minory.org/css-media-display.html
• Source:Minory
• Author:管理者

Amazonベストセラー