どうも7noteです。レスポンシブで表示非表示を切り換える簡単な方法。

「スマホの時はこのブロックを非表示にして、違う場所にこのブロックを表示する」
「スマホの時は改行を非表示にする。」

など、レスポンシブサイトを作る際によくあるシチュエーションの対策方法についてまとめていきます。
インライン要素にも対応させますよ。

共通のCSSを作成し、出し分け専用のクラスを作る方法。

/* PC専用 */.pc{display:block;}.sp{display:none;}/* スマホ専用 */@mediascreenand(max-width:820px){.pc{display:none;}.sp{display:block;}}

これだけだと、インライン要素に対応できなくなってしまうので・・・

.pc{display:block;}.sp{display:none;}/* インライン要素の時 */.pcinline{display:inline;}.spinline{display:none;}@mediascreenand(max-width:820px){.pc{display:none;}.sp{display:block;}/* インライン要素の時 */.pc{display:none;}.sp{display:inline;}}

これで、出し分けたい要素にpcやspinlineのクラスを付けるだけで簡単に出し分けが可能になります。
CSSで出し分ける際は画面サイズによって切り分けています。

SEOに注意！！

一般的にPCとスマホは同じ内容が記載されている定なので、あまりにも出し分けが多くなり、PCとスマホで全然異なる内容になってしまうとSEOに影響がでる可能性があるらしい・・・

デザイン上必要で使う分くらいは大丈夫だろうなと思いますが、必要最低限の使用回数で済むようにCSSで工夫して作れるところはCSSで頑張りたいところ。

他の方法は？

・javascriptを使う方法

・phpを使う方法

これらの方法はユーザーエージェント（訪問者のデバイスの種類）によって切り分ける方法になります。
開発環境（PC）で確認するには、ユーザーエージェントを切り換えられる拡張機能等が必要になるので注意！

まとめ。

これは本当によく使うので常にcommon.cssに入れてます。

ただ、displayがblockやinline以外の要素を出し分けしたい時にたまに困る。無理やり.hoge.pc { display: flex; }とか書けば別に問題はないのですが、なんとなく負けた気分になってしまう・・・。せっかく共通化したのに結局個別で指定しているのが腑に落ちない感じが。親要素を1つ追加するとか対策はいろいろあるんですけどね。
いい方法ご存知の方がいればぜひコメントなどで教えてください！

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ