プログラミングを勉強中のみなさん、こんにちは!
今回は、レスポンシブデザイン。
ブレイクポイントで改行する方法を御紹介します。
サイト模写でレスポンシブデザインを作成しているとよく見かけます。
ブレイクポイントになると「あ!ここで改行されてる!」と気づくことは多いのではないでしょうか。
でもこれってどうやるんだろ、と疑問に思った方に向けて改行方法を御紹介します。
初心者向けのメモ書きとして執筆しておりますので、あしからず。
それでは見ていきましょう。
目次
クリックできる目次
コードの紹介と使い方
コード
例えばこんなケース。
<PC>
今日はいい天気です。しかし明日は雨です。
<スマホ>
今日はいい天気です。
しかし明日は雨です。
としたいとき。
使うのはやはり <br>
です。
使い方
HTML
<PC>
今日はいい天気です。<br class="spbr">
しかし明日は雨です。
※このように、スマホ時に改行させたい箇所に<br>
を入れます。
そしてわかりやすいように 「class」を与えます。(もちろんクラス名は何でも構いません)
CSS
このままだと常時改行されますので、CSSには下記のようなコードを書きます。
---------------------------------------------------------------------------------
.spbr {
display: none; →PCサイズのときは <br>
を非表示にします。
}
@media screen and (max-width: (スマホサイズ)px) {
.spbr {
display: block; →メディアクエリで、スマホサイズのときに<br>
を表示させます。
}
}
---------------------------------------------------------------------------------
こうすることで、下記のようなスマホ表示になります。
<スマホ>
今日はいい天気です。
しかし明日は雨です。
まとめ
- 使うのは
<br>。
- 「class」を与える。
- メディアクエリを使って
<br>
の表示/非表示を切り替える。
是非みなさんもやってみてください。
改行に関連する記事も紹介しておきます。 続きを見る
【HTML】普段何気なく使っている改行タグ< br > inline-blockにも使えるんです