【CSS】レスポンシブデザイン　ブレイクポイントで改行する方法

Web制作を勉強中のみなさん、こんにちは！

今回は、レスポンシブデザイン。
ブレイクポイントで改行する方法を御紹介します。

サイト模写でレスポンシブデザインを作成しているとよく見かけます。
ブレイクポイントになると「あ！ここで改行されてる！」
と気づくことは多いのではないでしょうか。

それにしても、改行するCSSなんてあるのかな・・・。
と疑問に思った方に御紹介します。

コードの紹介と使い方

コード

例えばこんなケース。

＜ＰＣ＞
今日はいい天気です。しかし明日は雨です。

＜スマホ＞
今日はいい天気です。
しかし明日は雨です。

としたいとき。

使うのはやはり　<br>　です。

使い方

HTML

＜ＰＣ＞
今日はいい天気です。<br class="spbr">しかし明日は雨です。

<br>はみなさんも知っている通り改行タグです。
上記のように、スマホ時に改行させたい箇所に<br>を入れます。

そしてここがポイントです。

<br>に「class」を与えます。（クラス名は何でも構いませんがわかりやすいものをおすすめします）

今回の例ですと、

スマートフォン（SmartPhone）の時に改行(br)したいので「spbr」としました。

CSS

さて、CSSです。

このままだと常時改行されてしまいますので、<br class="spbr">に対して下記のようなCSSを書きます。

.spbr {
display: none;　→PCサイズのときは　<br>を非表示にします。
}

@media screen and (max-width: （スマホサイズ）px) {
.spbr {
display: block;　→メディアクエリで、スマホサイズのときに<br>を表示させます。
}
}

こうすることで、下記のようなスマホ表示になります。

＜スマホ＞
今日はいい天気です。
しかし明日は雨です。

まとめ

• 使うのは<br>。
• 「class」を与える。
• メディアクエリを使って<br>の表示／非表示を切り替える。

是非みなさんもやってみてください。

改行に関連する記事も紹介しておきます。