ミギムキ

[CSS] PC、タブレット、モバイルそれぞれの端末で要素の表示・非表示を切り替えたい

公開日:2018/09/08 更新日:2019/07/31

やりたいこと

PCで見るときには表示したいけど、スマホで見るときは消したい。またはスマホで見るときは表示したいけど、PCで見るときは消したい
そんなときにすぐ使えるスタイルを書いてみました

サンプルコード

@media screen and (max-width: 991px) {
    .pc {
        display: none !important;
    }
}
@media screen and (max-width: 767px) {
    .tb {
        display: none !important;
    }
}
@media screen and (min-width: 768px) {
    .mb {
        display: none !important;
    }
}

仕組み、解説、補足など

原則、ユーザーに提示するコンテンツはPC、タブレット、スマホどの媒体でも同じであるべきです
端末の違いは、アイコンや画像などのデザイン的な要素だけに留めましょう

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。