【CSS】PCのみ、スマホのみで表示する方法

スマホ対応させるとき特定の要素を消して表示させたくないときありますよね。

「でも、PC･スマホで要素の表示・非表示の切り替えってどうやるんだろう？」

そんなPCのみ、スマホのみで表示する方法を解説します。

【結論】メディアクエリとdisplay:none

下記は実装例です。ブラウザの幅を変えると表示・非表示が変化します。

<style>
.example>div{
    border: 1px solid #999;
    background: #f2f2f2;
    padding: 10px;
    margin: 10px;
}
@media(min-width:751px){
    .sp{
        display: none !important;
    }
}
@media(max-width:750px){
    .pc{
        display: none !important;
    }
}
</style>
<div class="example">
    <div class="sp">PCのとき非表示</div>
    <div class="pc">スマホのとき非表示</div>
    <div>どちらでも表示</div>
</div>

下記で詳しく解説します。

【ポイント1】メディアクエリ

メディアクエリはCSSが有効になる条件を指定するものです。

「@media(min-width:751px)」はブラウザ幅は751px以上のとき、

「@media(max-width:750px)」はブラウザ幅は750px以下のときという条件です。

境界線を何pxにするかは任意ですが、ここでは751px以上をPC版、750px以下をスマホ版と定義して指定しています。

メディアクエリについて詳しくはこちら↓

【ポイント2】display:none

「display:none」は要素を表示させないCSSです。

表示させない要素に「display:none」を指定します。

!importantを指定するかは任意ですが、表示させない要素にdisplayの指定があるとCSSの優先度で負けてdisplay:noneが効かなくなることがあります。

「display:none !important」と指定するとほぼ必ず非表示になるのでおすすめです。

まとめ

• PC･スマホの切り替え判定にはメディアクエリを利用する
• 要素を表示させないCSSはdisplay:noneを指定する

以上、PCのみ、スマホのみで表示する方法でした。