スマホとPCでコンテンツの表示／非表示を切り替える！
いよいよゴールデンウィークも最終日となりました。
みなさんはいかがお過ごしでしょうか？
今日は、PCやタブレットなどの大型端末では閲覧できて、スマートフォンなど小型のモバイル端末ではコンテンツ（画像や表など）を表示させない方法をご紹介します。
今回は、下の画像をPCなどの大型デバイスでは表示、スマホなどの小型デバイスでは非表示になるようにしたいと思います。
「チーバくん」です。かわいいでしょ！
１．まずは任意のclassを作成
ホームページ作成ソフトで、新規CSSを作成して、
セレクトタイプ：クラス（HTMLエレメントに適用可能）
セレクタ名：.spNone
OKボタンを押す。
カテゴリ ＞ ブロック ＞ Display（D）:noneを指定してください。
２．CSSにMedia Queriesを記述
次に、CSS内にメディアクエリを記述します。
今回は、横幅480px以下の端末では非表示にしたいと思います。
すでにCSSの一番下に、
.spNone {
display: none;
}
が、記載されていると思いますが、その下に下記のタグを入れてください。
@media screen and (max-width: 480px){
.spNone { display: none;}
}
3.class名を指定
次にHTMLファイル内に、小型のモバイル端末では表示させたくないコンテンツにclassを指定します。下記のように、<div>タグで囲んでください。
<div class="spNone">小型端末で表示させたくないコンテンツ</div>
この後データをアップロードすると、
PCでは上記のままで、スマホプレビューすると「チーバくん」の画像は表示されなくなっています。
スマホの狭い領域では、見せないようにした方がいい細かな写真やコンテンツなどは、このようにして非表示にしてしまった方がよい場合もあります。
お役に立てましたでしょうか？
それでは、また・・・。
