CSS
brタグで特定のデバイスのときだけ文章の改行を設定したいときのCSS
2020年05月04日 9:00 2020年06月01日
こんにちは、社員Kです。
本日は、指定のデバイスで改行のON/OFFを切り替えるシンプルなCSSの紹介です。
ではさっそくCSSの定義から
/* 指定デバイスでON・OFFを切り替える */
/* PCサイズ */
@media (min-width:1024px){
.tb:not(.pc){
display: none;
}
.sp:not(.pc){
display: none;
}
}
/* タブレットサイズ */
@media (min-width:768px) and (max-width:1023px){
.pc:not(.tb){
display: none;
}
.sp:not(.tb){
display: none;
}
}
/* スマホサイズ */
@media (max-width:767px){
.pc:not(.sp){
display: none;
}
.tb:not(.sp){
display: none;
}
}
「pc（パソコン）」「tb（タブレット）」「sp（スマホ）」と3種類のサイズでクラス名を用意しています。
ここは任意のデバイスサイズで調整が可能です。
PCのときだけ改行したい場合
おはようございます。<br class="pc">今日も良い天気ですね！
PCとタブレットで改行したい場合
おはようございます。<br class="pc tb">今日も良い天気ですね！
上記のように複数のデバイスを同時に指定することも出来ます。
また、brでの改行以外にも利用できるCSSなので、参考になれば幸いです。
関連記事
この記事を書いた人
社員K
福岡でWebプログラマー・フロントエンドエンジニアとして10年目。まだまだ勉強することが沢山あるなぁと最近良く思います。日本語には自信があります。すぐに効くダイエット情報募集中！
