スマホとPCでコンテンツの表示/非表示を切り替え

PCやタブレットなどの大型端末では閲覧できて、スマートフォンなど小型のモバイル端末ではコンテンツ(画像や表など)を表示させない方法をご紹介します。

1.まずは任意のclassを作成
ホームページ作成ソフトで、新規CSSを作成して、
セレクトタイプ:クラス(HTMLエレメントに適用可能)
セレクタ名:.spNone
OKボタンを押す。

カテゴリ > ブロック > Display(D):noneを指定してください。

2.CSSにMedia Queriesを記述
次に、CSS内にメディアクエリを記述します。
今回は、横幅480px以下の端末では非表示にしたいと思います。

すでにCSSの一番下に、

.spNone {
display: none;
}

が、記載されていると思いますが、その下に下記のタグを入れてください。

@media screen and (max-width: 480px){
.spNone { display: none;}
}

3.class名を指定
次にHTMLファイル内に、小型のモバイル端末では表示させたくないコンテンツにclassを指定します。下記のように、

タグで囲んでください。

小型端末で表示させたくないコンテンツ

スマホの狭い領域では、見せないようにした方がいい細かな写真やコンテンツなどは、このようにして非表示にしてしまった方がよい場合もあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です