【レスポンシブ基本】スマホ閲覧の時だけ表示またはパソコンの時だけ表示するCSS最短テクニック
2019-04-04 775 1897レスポンシブでサイトを制作することは今や当たり前ですよね。
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);あとはhtml側でimport.cssにリンクするだけでレスポンシブが実現します。
@import url(smart.css) screen and (max-width: 768px);
index.html
<!----><!----><link href="css/import.css" rel="stylesheet" type="text/css">「パソコン版のみ表示をしたい」「スマホ版のみ表示したい」その際の簡単で便利なCSSの記述法でした。
