web関連

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

改行

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

ABOUT ME
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

イラスト制作、webサイト制作、商品のご紹介など様々なお仕事を募集しております! 下記リンクよりお気軽にご連絡ください!

お仕事・ご依頼について

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)