レスポンシブでPCのみ改行、スマホのみ改行する方法【CSSのみ】

公開日： 更新日：

web制作

レスポンシブでPCのみのみ改行したい！とかタブレット時のみ改行したい！スマホ時のみ改行したい！とか思うときありますよね。
そんなときCSSだけで簡単に改行する方法を紹介します！

 

Contents
  1. PCのみで改行、スマホ（SP）ののみで改行を実装する

PCのみで改行、スマホ（SP）ののみで改行を実装する

それでは実際にコードを紹介していきます。

HTMLを書く

まずは、HTMLを書いていきます。
実際に使うのは改行のタグ「br」です。
「br」にclassをつけ、メディアクエリで制御を行います。
実際に書いてみるとこんな感じ。

<p>PCのみで<br class="pc">改行する。</p>
<p>SPのみで<br class="sp">改行する。</p>

これでHTMLの準備は整いました。
続いてCSSについて解説します。

 

PC時のみ改行する

PCのみ時のみ改行する際のコードです。
今回は、メディアクエリで640px以上になると「pc」のClassのついた「br」が表示され、改行されるようになります。
このとき「sp」とclassのついた「br」は非表示になります。

@media screen and (min-width: 640px){	
/* PC時 */
.pc {
display:inline;
}
.sp {
display:none;
}
}

SP時のみ改行する

こちらでは逆にメディアクエリで640px以下になると「sp」とclassのついた「br」が表示され、改行されるようになります。
このときの「pc」とclassのついた「br」は非表示になります。

@media screen and (max-width: 640px){
/* SP時 */
.pc {
display:none;
}
.sp {
display:inline;
}
}

「br」にclassをつけることで簡単にPC、SP時に改行箇所を変えることができるようになります。
改行以外にもPC時飲みに表示したいコンテンツやスマホ（SP）時飲みに表示させたいコンテンツがある際に応用できます。

関連記事