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

プログラミングを勉強中のみなさん、こんにちは！

今回は、レスポンシブデザイン。

ブレイクポイントで改行する方法を御紹介します。

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

でもこれってどうやるんだろ、と疑問に思った方に向けて改行方法を御紹介します。

初心者向けのメモ書きとして執筆しておりますので、あしからず。

それでは見ていきましょう。

コードの紹介と使い方

コード

例えばこんなケース。

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

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

としたいとき。

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

使い方

HTML

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

※このように、スマホ時に改行させたい箇所に<br>を入れます。

そしてわかりやすいように 「class」を与えます。（もちろんクラス名は何でも構いません）

CSS

このままだと常時改行されますので、ＣＳＳには下記のようなコードを書きます。

---------------------------------------------------------------------------------

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

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

---------------------------------------------------------------------------------

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

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

まとめ

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

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

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