レスポンシブ でPCだけ・SPだけ改行（br）する方法

レスポンシブデザインでもPC時だけ、SP時だけ改行したい！ってことありますよね。
CSSだけで簡単に実装できるので早速やっていきましょう！

レスポンシブ でPCだけ・SPだけ改行（br）する方法

今回はclassとCSSを使って、PCのみ改行、SPのみ改行を実装します。
まずはhtmlから書いていきます。

PCのみ海改行したいところはclassを「pc」、SPのみ改行したいところをclass「sp」とします。

<!-- PCのみ改行 -->
<p>テキストが入るよテキストが入るよテキストが入るよテキストが入るよ<br class="pc">
テキストが入るよテキストが入るよテキストが入るよ<br class="pc">
テキストが入るよテキストが入るよ</p>
<!-- /PCのみ改行 -->

<!-- SPのみ改行 -->
<p>テキストが入るよテキストが入るよテキストが入るよテキストが入るよ<br class="sp">
テキストが入るよテキストが入るよテキストが入るよ<br class="sp">
テキストが入るよテキストが入るよ</p>
<!-- /SPのみ改行 -->

こんな感じ！
では、CSSを書いていきましょう。
今回のブレイクポイントは「560px」。
ここは仕様に合わせて変更してください。

@media screen and (min-width: 560px){   
  .pc { display:block; }
  .sp { display:none; }
}
@media screen and (max-width: 560px){   
  .pc { display:none; }
  .sp { display:block; }
}

使用しない時に「display:none」とすることで、br（改行）を非表示にしています。
これを使えばブレイクポイントごとに改行位置を指定できます。
※レスポンシブ デザインで改行しすぎるとマルチ環境に対応できないので、どうしても改行したいときのみ使うほうがいいと思います。

もちろんブレイクポイントを増やしてタブレットのみ改行も実装可能です。
どうしても改行（br）が必要な時は使ってみてね！