話題のウェアラブルスピーカー開封レビューはこちら

【Bootstrap4】画面サイズによって表示する要素を出し分ける方法

Bootstrap4

画面幅が広いときは自分の好きな位置で文章の改行を指定して、スマホなどの幅が狭い画面では改行をなくす、そういう表現がしたい。

今回はそういった希望を実現するための方法です。

スポンサーリンク

サンプル

See the Pen Bootstrap4 new line controll by enicalpha (@enicalpha) on CodePen.

PCなどの幅が広い画面では、文章の区切りを意識して読みやすいところで改行を入れています。

サンプルじゃわかりにくいときのための画像

画面幅が広いとき

画面幅が狭い/スマホ表示

どうでしょう。

幅狭の文章表示も悪くないですね。

スマホ表示の方では最下の領域を追加しています。

この最下部の領域は、今回紹介する改行への対応をしなかった場合の表示ですね。

そうじゃないと画面幅が狭くなったと

きにこんなふうに

変なところで改行される箇所ができて

しまい、

なんだかかっこ悪いのです。

なんだか変な改行になってしまって文章が格好悪く見えるのがわかると思います。

ソースコードを解説

ポイントは以下の部分です。

HTML
<br class="d-none d-sm-block">

<br>タグに対して、前回も紹介した「基本は非表示(.d-none)だけどsm以上の大きさではblock表示する(.d-sm-block)」方式を取っています。

これによってスマホなどのxsサイズでは<br>タグによる改行が無くなって変なところで改行されなくなります。

問題点としては、果たして改行を無くした文章が読みやすいと言えるのか
それから<br>タグを使うのは推奨されるのか、ですかね。

いずれにしても、画面幅によって表現を出し分けるのは簡単だよ、というのがわかってもらえたら今回の記事としては満足です。

以上、参考になりましたでしょうか。

コメントを残す

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