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

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

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

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

 

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

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

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

 

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

 

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

「.sp」を例に見てみると、ブレイクポイントが750以下のときは、brを利かして改行させる、ブレイクポイント7501以上のときはbrを非表示にし、改行させないようにしています。
PCも同様の手段で切り替えを行っています。

 

下記が実際のHTMLの記述例です。

 

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

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

 

これだけ！

レスポンシブで、PCのみ改行、SPのみ改行どちらかのみ改行したい時、試してみてください。

 

細かくPCのみ・タブレットのみ・SPのみで改行させる方法

更に細かく、PC・タブレット・スマホに対応するパターンです。

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

 

<p>PCのみで改行したいな〜！<br class="pc">わーい！</p>
<p>タブレットのみで改行したいな〜！<br class="tb">すごーい！</p>
<p>SPのみで改行したいな〜！<br class="sp">わっしょい！</p>

 

 

レスポンシブでPCとSPで画像を切り替えたい場合は下記の記事が参考になります。
「レスポンシブ 画像切り替え方法！PC SPの切り替えとRetina対応する【HTMLのみで対応可】」

 
web制作・コーディングを勉強中の方はぜひこちらも参考にしてみてください。
web制作の勉強にオススメの書籍を紹介します！