レスポンシブで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）時飲みに表示させたいコンテンツがある際に応用できます。
コメント