コーディングをしていると、brタグ（改行タグ）を解像度ごとに適用させたいといった場面があると思います。
brタグは改行を入れるもので、これ自体にスタイルを適用させる機会は少ないです。ただbrタグも他のタグと同様、クラス指定やスタイルを付与することができますので、その点を利用して今回は、解像度ごとに改行を適用、無効化させる方法を紹介させて頂きます。
br／改行タグを端末ごとに適用を切り替える方法
例えば、PCサイズの画面のみで文章などに改行タグを適用させたいとき、いつも通りbrタグを入れて、タブレット、スマホサイズで非表示にするCSSを入れるだけで問題ありませんが、改行タグ以外の他のコンテンツにもPCとスマホ版でCSSを切り替えるコンテンツがある場合は、PC／スマホで表示を切り替えるためのクラスを追加する方が使い勝手も良いので、そちらの方法で説明していきます。
それぞれの記述及び見た目は下記の通りになります。
/*pcでは表示、スマホでは非表示させるためのクラスを設定*/
.pc{ display:block; }
.sp{ display:none; }
/*pcでは非表示、スマホでは表示させるためのクラスを設定*/
@media screen and (max-width:767px){
.pc{ display:none; }
.sp{ display:block; }
}※例ではブレイクポイントをipad miniにしていますが、自身の環境に合わせて適宜変更してください。
上記のように「pc」「sp」というクラスを作成し、pcをクラスとして設定するとその要素はPC（ipad mini縦向き以上）サイズでのみ表示させ、spをクラスとして設定するとその要素はスマホサイズでのみ表示されます。
クラス名も自身の分かりやすいものにしてください。pcとspで区別させるようなクラス名にするとわかりやすいです。
次に作成したクラスをHTMLに適用していきます。HTMLは下記の通りになります。
<!--PC版-->
<p>テキスト１テキスト１<br class="pc">テキスト１テキスト１</p>
<!--スマホ版-->
<p>テキスト２テキスト２<br class="sp">テキスト２テキスト２</p>
・PC版
テキスト１テキスト１
テキスト１テキスト１
・スマホ版
テキスト２テキスト２
テキスト２テキスト２
上記の結果を、画面幅768px以上の端末で見るとPC版が改行されスマホ版が改行されずに表示されます。逆に767px以下の端末で見るとPC版が改行されずにスマホ版の方が改行されて表示されます。
また、ここで使われているbrタグは以前まで「<br />」と記述していましたが、現在では「/」が必要ありません。スラッシュを入れて記述すると、バリデーションチェックで引っかかってしまいますので、気を付けましょう。
前へ
