CSSでbrタグの改行を無効化する方法を解説!

CSSでbrタグの改行を無効化する方法を紹介します。レスポンシブデザインなどでPCは改行させたいがスマホは改行させたくない(あるいはその逆)などの場合にご利用下さい。

コンテンツ [表示]

  1. 1CSSでbrタグの改行を無効化する方法
  2. 1.1改行の無効化
  3. 1.2改行を有効にしたい場合
  4. 2まとめ

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: blockdisplay: inlinebrタグに設定し改行を有効化します。

改行を有効化する

br {
  display: inline;
}

まとめ

いかがでしたでしょうか。レスポンシブデザインでは要素単位でPCとスマホで見た目を変えたり、表示・非表示を切り替えるというのはかなり使われるテクニックですが、今回のような文章中の改行の有効・無効を切り替えたいという場合も結構あります。

ぜひ今回のテクニックを覚えておいて下さい!

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次