HTMLのbrタグをCSSで非表示にするやり方

HTMLのbrタグをCSSで非表示にするやり方

HTMLのbrタグで改行した部分をCSSで非表示にするやり方使用例を紹介します。

brタグをCSSで非表示にするやり方については細かい説明が必要ないくらい簡単です。

 

brタグをCSSでdisplay:noneにする

 

<p>brは行頭に復帰するためのキャリッジリターンという機能が働くようです。<br class="br-none">そのため、brの後のテキストは、テキストブロックの次の行の先頭から再開されます。</p>

 

上記のHTMLには文章の途中でbrタグをクラス付けして記述しています。これによりHTMLのbrタグの後の文章は改行されて次の行先頭からスタートします。

 

.br-none{display: none;}

 

このときHTMLのbrタグで改行された文章をCSSで非表示にするやり方は、brに付与したクラス名をCSSでセレクタにしてdisplay:noneを適用すると、brタグで形成された改行を非表示にすることができます。

 

brタグを非表示にする使用例

 

HTMLのbrタグを非表示にする使用例も紹介します。

 

 

たとえば五十音順の文章をインラインで表示するときに文章の中間でbrタグを記述して改行を行うと上の画像のように表示することができます。

インラインで表示した文章なのでブラウザの画面を狭くしたりスマホで見ると要素の幅に応じて改行されますが、狭い画面で縦並びにすることになった場合にCSSでdisplay:blockを適用すると以下の画像のようにHTMLのbrタグを記述している部分に隙間ができることがあります。

 

 

このときの隙間はbrタグにCSSでdisplay:noneを適用すると消えるのでHTMLのbrタグで形成された隙間なことがわかります。

ただbrタグにCSSでdisplay:noneを適用するだけだと、PC画面でもスマホ画面でもHTMLのbrタグ改行が非表示になってしまうので、brタグに適用するCSSはメディアクエリを作成してレスポンシブ化するやり方にします。

 

Advertisement

 

@media screen and (max-width:768px){
    .br-none{
        display: none;
    }
}

 

CSSで@media screen and (max-width:768px)とメディアクエリを記述した場合を使用例にしますが、この場合ブラウザの画面幅が768pxより小さくなると、br-noneのクラスを付与しているHTMLのbrタグがCSSのdisplay:noneの適用によって非表示になります。

 

 

そのため上の画像のようにHTMLのbrタグが形成していた隙間がなくなり、キレイに縦並びの五十音順を表示することができます。

HTMLのbrタグをCSSで非表示にするやり方としてひとつの使用例にはなりますが、HTMLのbrタグをPC画面では表示して改行を行い、スマホ画面では非表示にして改行を行わないときには役立つと思います。

CSSカテゴリの最新記事