スマホと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を指定します。下記のように、
タグで囲んでください。
小型端末で表示させたくないコンテンツ
スマホの狭い領域では、見せないようにした方がいい細かな写真やコンテンツなどは、このようにして非表示にしてしまった方がよい場合もあります。