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

改行web関連

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

 

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:block;
}
.sp {
display:none;
}
}

 

SP時のみ改行する

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

 

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

 

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

コメント

タイトルとURLをコピーしました