改行にbrタグを使うのは周知

でもこういう感じで制御をしたかったです。

• PCの場合 : 普通に改行表示する
• スマホの場合 : 改行を非表示に

もちろんこの逆もそうです。

この切り替え、意外と簡単にできます。

ということで自分用のメモも兼ね、
brタグの表示をスマホのみ表示・消す方法を紹介。

Bootstrapでのやり方もメモしときます。

方法１．CSSで改行のdisplayを制御する

まず１つめはdisplayプロパティによる方法

こういうブレークポイントを考えます。

• 画面幅が768px以下
  ＝＞ この場合はスマホとみなし、改行を非表示にする。
• 画面幅が768px異常
  ＝＞ この場合はPCとみなし、普通に改行表示

こういう改行表示基準を作っておきます。

もちろんブレークポイントは任意でもOK

そして実際に次のコードを書いてみました。

▼ このようなCSSコード

▼ あとはbrタグにクラス指定するだけ

これだけ。これで改行を消せます。

この方法だと768pxをブレークポイントに設定していますが、そこは絶対的な正解などありません。ただ768pxが１つの基準であることも多いようです。（ちなみにそれ関係の参考記事 : https://www.algorism.co.jp/posts/breakpoint-mediaquery/）

方法２．Bootstrapで改行のPC・スマホ表示制御

蛇足というか、むしろこっちが本題

今度はBootstrapによるやり方です。

コチラの方がかなり簡単にできました。

そのコード例はこんな感じです。

▼ CSSを書かずHTMLだけでできる

こういうクラス指定だけで十分。

ブレークポイントごとにdisplayを変えるだけです。

▼ ちなみにブレークポイントは次の５つ

• デフォルト
  例えば d-block  のように何も指定しないと、全端末で同じ表示になる。ただし他ブレークポイントが指定されているなら、最大コンテナ幅はなしで、576px未満の端末のみで反映される
• *-sm
  画面幅が576px以上のデバイスでのみ反映される。最大コンテナ幅は540px
• *-md
  画面幅が768px以上のデバイスのみで反映される。最大コンテナ幅は720px
• *-lg
  画面幅が992px以上のデバイスのみで反映される。最大コンテナ幅は960px
• *-xl
  画面幅が1200px以上のデバイスのみで反映される。最大コンテナ幅は1140px

今回の例では d-block  によって一旦全端末でbrを表示させ、そのあと d-md-none  によって画面幅768px以上の端末（PC）で改行を非表示にさせてます。

もちろんスマホだけ表示、ということも可能。

Bootstrapだとクラス指定だけで便利です。

ここまでのまとめ

ここで紹介した方法は２つ

• CSSで改行のdisplayを制御する
  いわゆるブレークポイントを設定し、768pxより大きいなら display: block;  、768px以下なら display: none;  などとする。メディアクエリ使用。
• Bootstrapで改行のPC・スマホ表示制御
  もしBootstrapを使っているならコチラが簡単。例えば class="d-block d-md-none"  とクラス指定で768px以上で改行非表示、768px以下で改行表示させられる

もし間違いがあればご指摘ください。

以上、PC・スマホごとの改行表示制御でした。