あるあるネタですが、感動したのでメモがでてら記事に。
＜br＞タグとは おさらい
＜br＞タグは文中の改行に使用するタグです。
＜p＞タグで区切って改行する場合もありますが、
＜p＞タグ自体にpadding-bottoのcssがあてがわれてるため、
「なんかこの改行ひろすぎじゃね？」と思うときとかに使われてますね。
もともとは
＜p＞タグは段落
＜br＞タグは改行
らしいっすよ。
へぇ～
＜br＞タグ小技
＜br＞タグもclassが使えるらしく、これを下記のようなclass付
タグにします。
<br class="ps-br">
<br class="sp-br">
各画面幅で、この＜br＞が出たり消えたりするように下記のようなcssを書きます。
/* 画面幅が1024px以上の時は */
@media screen and (min-width: 1024px) {
.ps-br{
display: block; /* PCを改行して */
}
.sp-br{
display: none; /* SPの改行を隠す */
}
}
/* 画面幅が560px以下の時は */
@media screen and (max-width: 560px) {
.ps-br{
display: none; /* PCの改行を隠して */
}
.sp-br{
display: block; /* SPを改行する */
}
}
こうすることで、画面幅による改行の有無を指定することができます。
今まで空の＜span＞に同様のcssつけてたのですが、＜br＞にclassつけたほうがすっきりして良いですよね。
＜br＞ってこれ単体で使うイメージが強くてclassつけるなんて考えたことなかったんだけど、
これ見つけた人ビューティフォーだなって感動したんです。
こんな時に便利です。
文章内の改行は基本的にはそこまでナーバスにならず、PC・SP兼用の場合がおおいです。（こういう場合は普通に＜br＞を使う）
しかし、見出しの中の文言やタイトルの文言は、大きな太字などになっていて意図しない箇所で折り返してしまう場合があり、
デカくて太いぶん、見栄えの悪さが目立ってしまうことがあります。
こういうときにちょっとした気遣いで改行を入れるとクオリティアップします。
変なところで改行されると困る文言とかあるじゃないですか。
ハーゲ
ン〇ッツ
とかね。
ヤッターマン
...いや、なんでもないです
- 細かいところを作り込みができる
- 改行位置を気にしすぎるクライアント対策
という点がミソなので、必須なテクニックではないです。
こういうテクニックがあるのか。とふんわり覚えておいて必要になった時にピカンとくれば幸いです。
レスポンシブサイトってなんだっけ おさらい
レスポンシブサイトとは、PC・タブレット・SPがすべて同じURLで見れて、
その環境（画面幅）ごとに見栄えが変わるサイトのこと。
最近は大体のサイトがコレでできてるんじゃないでしょうか。
メリットはPCサイトとSPサイトで同じ文章で書かなくていいことです。
単純な時間短縮ですね。同じこと2回しなくていい。
PC・SPでURL分かれているサイトはユーザーエージェントで切り替えているので、
システム上や無負えないところはこれ採用してるらしいですが、最近はあまり見かけませんね。
ユーザーエージェントの説明は割愛。
PCとSPでどうやって切り替えているの？
CSSメディアクエリというものを使っています。
「画面幅が〇〇px以下の場合は、このcssが適用される。」
というような条件分岐がなされていると思っていただければわかりやすいかと。
この画面幅の分岐する値をブレイクポイントというらしいです。
画面幅は端末によって異なるので、すべての機種に対応することは不可能です。
なので、調べる際はだいたい、
ブレイクポイント css 2019 定番 
こんな感じの検索ワードで、新しい情報を参考にして設定するのが良いと思います。
「この３～４つのブレイクポイントで区切れば、ほとんどの端末でキレイに見えるんじゃね？」
というような記事がでてくると思うので参考に。
CSSで書くとこんな感じ
下記のような塊を対応するブレイク
ポイントごとに作ります。
@media screen and (max-width: 560px) {
/* この中に書いたcssは画面幅560px以下の場合のみ適用される */
p{
padding-bottom: 10px;
}
}
参考記事
レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版]
https://hashimotosan.hatenablog.jp/entry/2019/05/28/164834