ぽんきち
brタグを設定しているのに改行されない。。。
HTMLコーディング中、文章の改行のために記述するbrタグ。なぜだか効かない事象に出会うことがあったので備忘も兼ねて記載します。
親要素にflexが設定されている
極端な例を出すとこんな感じ↓
<p style="display:flex">
<span>こんにちは僕は元気です</span>
<br>
<span>さようなら</span>
</p>このような記述を行うと、brタグ自体もflexボックス内の一つのアイテムとみなされてしまうので本来の役割である改行が効かなくなります。
CSS設計をきちんとしていればあまり起こり得ないと思うのですが、クラスを広く使い回したり、追加でスタイルを変えたりしていると起こることがあります。
この場合は、pタグのflexを解除したり、spanを区切らず記述するなどして解消させましょう。
// flexを解除
<p>
<span>こんにちは僕は元気です</span>
<br>
<span>さようなら</span>
</p>
// spanを区切らない
<p style="display:flex">
<span>こんにちは僕は元気です<br>さようなら</span>
</p>通常のコーディングを行っていればこのパターンに遭遇することは殆どないと思います。豆知識程度に覚えておくといいかもしれません。
あとがき
HTMLコーディング中にbrタグってわりと使用しますよね。
間隔開ける為に使うなとか画面幅によってズレるから使うな。とか色々ありますが、テキストベースでデザインされているサイトなら必須だと思いますし、以前出会った方の中には”br使っちゃいけない概念”に囚われすぎて不自然なところでpタグで区切っている方もいらっしゃいました。（SEO的に大丈夫？と思いましたが、、、）
画面幅もレスポンシブ対応すれば問題ないので、まあ正しく使いましょうね。ってことだと思います。
ぽんきち
小難しく考えずコーディングしたいにゃ！
勉強中
プログラマーさん
プログラマーさん
雑になってもいけないし、悩まずきれいなコードが書けるようになりたいね。
コメント