br要素を使った改行には問題がたくさん PCページの時はbr要素を使った改行をCSSのdisplay:none;で消したりはしませんが、レスポンシブWEBデザインで作成したページの場合、PCで見た時とスマートフォンで見た時の改行位置を変えたい!なんて思う事もあるはずです。 そんな時にはbr要素をCSSを使って、非表示にすることで改行を無くして対応します。 CSSを一行書いただけでカンタンに対応できる!!と思っている方・・・ 残念ながらそれは間違いです。 意外な動作をするので、もう少し対策が必要になります。 主に出てくる不具合は「br要素の次に来る言葉の前に半角スペースが生まれてしまう」という点です。 この原因と対策についてお話していきます。 半角スペースが生まれてしまうHTML構造 こんな構造になっている場合、br要素を消す事で半角スペースが生まれてしまいます・・・ <p>アテンドがお手伝
![brをdisplayで隠した時に空白ができる原因と対策](https://cdn-ak-scissors.b.st-hatena.com/image/square/8451d790c777fb4513f1135f9bbc1a6c601bcff2/height=288;version=1;width=512/https%3A%2F%2Fwww.attend.jp%2Fwp-content%2Fuploads%2F2017%2F05%2Fblog_045_tit.jpg)