CSSでbrタグの改行を無効化する方法を解説！
CSSでbrタグの改行を無効化する方法を紹介します。レスポンシブデザインなどでPCは改行させたいがスマホは改行させたくない（あるいはその逆）などの場合にご利用下さい。
HTMLのbrタグを入れた箇所では強制的に改行が入ります。しかしこのbrタグでの改行を無効化したいという場合があります。
例えば最近のレスポンシブデザインではPCとスマホで同じHTMLで作ることが多いですが、「PCで改行させたいけど、スマホだけ改行させたくない」といった場合です。
以下のサンプルコードを見てみましょう。
h1の文章中でbrタグがありますが、このbrタグで「PCでは改行させて、スマホでは改行を無効化する」といったやり方を解説していきます。
CSSでbrタグの改行を無効化する方法
brタグの改行の無効化は実は簡単です。下記のようにします。
改行の無効化
brタグの改行の無効化
display: none;つまりbrタグを非表示にすることで、改行を無効化します。
上記を使ってPCの際に改行を表示するが、スマホの場合に改行を無効化していきます。
上記のサンプルコードのindex.cssを見てみましょう。
index.css
@media screen and (max-width: 1000px) {
br {
display: none;
}
}この記述によりメディアクエリーを使ってmax-widthが1,000pxつまりスマホなどウィンドウサイズが小さい端末では改行は非表示となります。
実際に本当に非表示になるか試したい方は下記のリンクをクリックしてみましょう。
※サンプルコードのプレビューページが別タブで開きます。
改行を有効にしたい場合
逆に改行を有効にするにはdisplay: blockやdisplay: inlineをbrタグに設定し改行を有効化します。
改行を有効化する
br {
display: inline;
}まとめ
いかがでしたでしょうか。レスポンシブデザインでは要素単位でPCとスマホで見た目を変えたり、表示・非表示を切り替えるというのはかなり使われるテクニックですが、今回のような文章中の改行の有効・無効を切り替えたいという場合も結構あります。
ぜひ今回のテクニックを覚えておいて下さい！
