【CSS】改行の基本的な作り方と画面幅による表示、非表示の方法を解説

「brで改行できるのは分かったけど、スマホだと改行させたくない。。」

こんな悩みを解決するべく今回は基本的な改行の作り方とCSSを使った改行位置の調整方法を解説していきます。

基本的な改行方法

まずは基本的な改行方法から解説していきます。

See the Pen Untitled by masata (@masata_lm) on CodePen.

このように改行位置にbrタグを記述して改行させます

では、次は画面幅によって改行のありなしを切り替えていきます。

画面幅によって改行のありなしを切り替える方法

下記のようにbrタグにクラスをつけて、CSSでメディアクエリによって表示非表示を切り替えると良いです。

See the Pen Untitled by masata (@masata_lm) on CodePen.

CSSを解説すると、通常はdisplay: block;でbrタグを表示させるけど、画面幅が768px以下になったらdisplay: none;でbrタグを非表示にするような形ですね。

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

逆に画面幅769px以上だと改行させないけど、768px以下だと改行させる場合はこんな感じです。

See the Pen Untitled by masata (@masata_lm) on CodePen.

.u-md-show {
  display: none;
}
@media screen and (max-width: 768px) {
  .u-md-show {
    display: block;
  }
}