ウィンナスのプログラミング忘備録

アプリケーション制作をしている最中に発見したテクニックを忘備録としてまとめていきます。

【web】レスポンシブなサイトを作るテクニック②

前回に引き続き、CSSでレスポンシブサイトを作るためにはどうすればいいのかを紹介します!

 

今回は、PC版では表示させたいけどスマホ版では表示させたくない!という要素に対していい感じのテクニックを紹介します!

 

そもそも何をしたいのか?

結局何をしたいのか分かりづらかったので図を使って説明していきます!

f:id:win-friendof:20160719230650j:plain

例えば、上のようなレイアウトのサイトを作りたいとします。

どちらもよくあるようなレイアウトですね!

しかし、PC版には「コンテンツC」があり、SP版にはありません。

となるとメディアクエリを使って「コンテンツC」に「display : none ; 」を掛けるのが普通ですね!

今回の場合ではそれでいいですけど、表示したくないコンテンツが多くなると記述が大変になってきます><;

そんな処理を楽にするテクニックを紹介していきます!

 

表示非表示をひとまとめにするCSSの記述

なんだかんだ前置きが長くなってしまいましたが、仕組みとしては簡単です。

PC(SP)のときはnoneになり、SP(PC)のときはblockになるclass」を実装すればいいのです。

で、実装したのが↓↓です。

/*スマホのとき*/
@media screen and (max-width: 768px){
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
}

/*PCのとき*/
@media screen and (min-width: 769px){
  .sp {
    display: none;
  }
  .pc {
    display: block;
  }
}

今回はブレークポイントを768pxに設定してますが、ここは適宜変えてください!

これでPC版だけに表示させたいときは「class="pc"」

スマホ版だけに表示させたいときは「class="sp"」

HTML側のコンテンツに付けてあげればOKです!