【超カンタン】レスポンシブでスマホサイトの時だけ、非表示にするときのコード記述

2017-01-03 22:38:17 | 日記

スマホサイトはもはやサイト運営で一般的ですが
PC画面とスマホ画面で一番困るのが当然ながら画面の大きさ。

PC画面では問題なくても、スマホ(の小さい)画面だと邪魔になるので
特定の画像やフレーズを非表示にしたい、
なんていう時もあるでしょう。

簡単です。CSSにコードを記述して、htmlで指定してあげるだけです。

記述例:450px以下のサイズで、表示を消す場合
---------------------------------
▼CSS(※↓kokokesuは好きな文字列に)

@media screen and (max-width: 450px){
.kokokesu {display:none}
}


▼html

<div class="kokokesu">
ここに表示させたくない文言。画像なら画像ソースを記述
</div>



---------------------------------

記述できたら、スマホで閲覧してみてください。
PCでは表示されていても、スマホで見たときだけ、消えていると思います。

 

 


こんな写真も無料でダウンロード
商用可能なフリー素材、フリー素材ドットコム
http://free-materials.com/

ジャンル:
ウェブログ
コメント   この記事についてブログを書く
この記事をはてなブックマークに追加
« 年越しそばdeスリットアニメ... | トップ | 「株価・為替レート・景気動... »
最近の画像もっと見る

コメントを投稿

日記」カテゴリの最新記事

トラックバック

この記事のトラックバック  Ping-URL
  • 30日以上前の記事に対するトラックバックは受け取らないよう設定されております。
  • 送信元の記事内容が半角英数のみのトラックバックは受け取らないよう設定されております。
  • このブログへのリンクがない記事からのトラックバックは受け取らないよう設定されております。
  • ※ブログ管理者のみ、編集画面で設定の変更が可能です。