【レスポンシブ基本】スマホ閲覧の時だけ表示またはパソコンの時だけ表示するCSS最短テクニック

2019-04-04    260   365

レスポンシブでサイトを制作することは今や当たり前ですよね。
googleが推奨していることもありますし、なによりサイトのメンテナンスがラクです。
レスポンシブ最高!というわけで早速表題の件に。

<レスポンシブの1番お手軽な組み方(CSSを三つ用意する)>


レスポンシブでサイトを作る場合、スマホで表示するボタンをパソコン版では表示しないようにしたい部分がでてきます。ですので、分かりやすい名前のクラスをつけておくと便利です。
pc.css
.sp-only{ display:none;}
逆にスマホ用のCSSにパソコン版だけの部分を非表示にするクラスを用意しておきます。
smart.css
.pc-only{ display:none;}
そして下記ファイルがレスポンシブの肝です。
import.css
@import url(pc.css) screen and (min-width: 769px);
@import url(smart.css) screen and (max-width: 768px);
あとはhtml側でimport.cssにリンクするだけでレスポンシブが実現します。
index.html
<link href="css/import.css" rel="stylesheet" type="text/css">
「パソコン版のみ表示をしたい」「スマホ版のみ表示したい」その際の簡単で便利なCSSの記述法でした。

カテゴリ: CSS

comment 登録なしでご自由にご入力いただけます(^^)ぜひぜひ記事のご感想をお聞かせ下さい。

お名前とコメントは入力必須です。

コメントの文字数が短すぎます。

この内容でコメントを送る
コメントをする
この記事がお役に立てましたら是非シェアのご協力お願いします。