PCのみ改行・SPのみ改行をCSSで実装する方法【レスポンシブデザイン】

レスポンシブでPC・SPで改行位置を切り替える方法

レスポンシブでサイトを作る際にPCで見たときのみいい位置で改行したけど、SP時には改行してほしくない！ってときがありますよね。
画面サイズでどうしても変わってしまうので、テキストを流すほうがいいような気がしますが・・・

今回は簡単にCSSだけで改行位置を変更する方法を紹介します。
デザイン通りの実装や読みにくい文章を読みやすく改善しよう！

PCのみ・SPのみで改行させる方法

※ブレイクポイントを680pxとした場合

680px以下の時「.pc」は非表示、「.sp」は表示。
680px以下の時「.pc」は表示、「.sp」は非表示。
となるように下記のようにCSSを書きます。

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

これを改行する「br」のclassして追加するだけです。
（※今までdisplay:blockで紹介していましたが、もともとinlineであること、blockにすると場合によってはスペースが入ってしまうので修正しました。）

例として

<p>PCのみで改行したいな〜！<br class="pc">わーい！</p>

<p>SPのみで改行したいな〜！<br class="sp">わっしょい！</p>

これだけ！

どちらかのみ改行したい時試してみてください。

ABOUT ME

シラツキ

Web制作会社で働くフロントエンドエンジニア（コーダー）。HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中！ お気軽にご相談ください。