CSSで改行をスマホのみ表示あるいは消すには

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

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

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

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

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

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

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

方法1.CSSで改行のdisplayを制御する

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

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

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

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

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

 

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

▼ このようなCSSコード

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

ここまでのまとめ

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

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

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

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

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください