br要素を使った改行には問題がたくさん
PCページの時はbr要素を使った改行をCSSのdisplay:none;で消したりはしませんが、レスポンシブWEBデザインで作成したページの場合、PCで見た時とスマートフォンで見た時の改行位置を変えたい！なんて思う事もあるはずです。
そんな時にはbr要素をCSSを使って、非表示にすることで改行を無くして対応します。
CSSを一行書いただけでカンタンに対応できる！！と思っている方・・・
残念ながらそれは間違いです。
意外な動作をするので、もう少し対策が必要になります。
主に出てくる不具合は「br要素の次に来る言葉の前に半角スペースが生まれてしまう」という点です。
この原因と対策についてお話していきます。
半角スペースが生まれてしまうHTML構造
こんな構造になっている場合、br要素を消す事で半角スペースが生まれてしまいます・・・
まずホームページ制作です。<br>
しかし、そこで終わりにしない。<br>
それがアテンドと一般の制作業者との違いです。<br>
そこから５ヵ年計画でホームページを育て、<br>
目的を達成する事がお客様と私たちの目的。<br>
アテンドが目指すのはWeb制作だけではないのです。</p>
こんな風にbr要素の後ろで改行を入れる場合、こんなHTMLで作った文章のbr要素を消すと、半角スペースが「おぎゃー」と産声を上げて生まれます。
半角スペースなんて入れていないのに、変な空白ができるのを見て、こちらも「おぎゃー」と悲鳴を上げるわけですが、これにはちゃんと原因があります。
br要素の後ろで改行していることが最大の原因
HTMLを見やすくしようとしてbr要素の後ろで改行を入れますよね。これに原因があります。
br要素を消したことでbr要素がなかったことになります。なので文章の途中で改行した時にも半角スペースが入るのと同じ現象が起こるんです。
これを防ぐには全て続けて1行で書く事が簡単な対処方法です。
HTMLが読みにくくなってしまいますが、HTMLよりも人目に晒される表示の方が大切ですのでガマンなのです。
ちなみにbr要素を先頭に配置したこんな構造もアウトです。
<br>まずホームページ制作です。
<br>しかし、そこで終わりにしない。
<br>それがアテンドと一般の制作業者との違いです。
<br>そこから５ヵ年計画でホームページを育て、
<br>目的を達成する事がお客様と私たちの目的。
<br>アテンドが目指すのはWeb制作だけではないのです。</p>
それはソースコードの途中で改行が挟まるからですね。
これくらい許容して欲しいものですが、HTMLとはこういう物です。残念ながらこの根本的なルールを無理やり変える事はできません・・・
他にもこんな方法もあります。
>まずホームページ制作です。<br
>しかし、そこで終わりにしない。<br
>それがアテンドと一般の制作業者との違いです。<br
>そこから５ヵ年計画でホームページを育て、<br
>目的を達成する事がお客様と私たちの目的。<br
>アテンドが目指すのはWeb制作だけではないのです。</p>
要素の閉じを先頭に持ってくる方法です。
全てを1行にして書いてしまうと、後からの文章校正が大変ですが、これなら少しは作業し易そうですね。
HTMLが汚くなってしまう事が許せない！そんな方へ
br要素の後ろで改行しない、要素の閉じを先頭に持ってくる・・・これで解決できますが、HTMLが汚くなることには変わりありません。
普段は誰からも見られない部分ですが、「ソースを表示」とか「自分以外の作業者が作業する時」なんかは恥ずかしくなったり、作業の手間が増えたりしてしまいます。
どうしてもHTMLを綺麗に書きたい！そんな方の為にCSSだけで綺麗に整える方法を紹介します。
content: “”;
}
br:after {
margin-right: -.333em;
content:””;
}
この方法ならHTMLに手を加えることなく、br要素が綺麗に消すことができます！
・・・・・ただしIEやFireFoxでは効きません・・・・・
つまり一部のブラウザのみにしか対応していない方法なので、まったくおすすめができません・・・
なので他の方法も探してみました。
<span>まずホームページ制作です。</span><br>
<span>しかし、そこで終わりにしない。</span><br>
<span>それがアテンドと一般の制作業者との違いです。</span><br>
<span>そこから５ヵ年計画でホームページを育て、</span><br>
<span>目的を達成する事がお客様と私たちの目的。</span><br>
<span>アテンドが目指すのはWeb制作だけではないのです。</span></p>
p {
font-size: 0;
}
p span {
font-size: 13px;
}
br {
display: none;
}
br要素を含んだ親要素の文字サイズを一度「0」にしてあげる事で、br要素後の改行に入る文字サイズを完全になくします。
そしてspan要素などを使って、見せたい文字の大きさを戻すんです。これならなんとか対応できました。
でも結局無駄な要素が増えてしまうので、人によっては逆に見づらく思うかもしれません。
簡単そうに見えて、実は対応がとても難しいですね。
brを消す作業は思ったほど厄介ですが、要望に合わせて作り込んでいきましょう。
「1行ごとにp要素にして、display:inline-block;を使えばいいじゃない」という声もどこかから聞こえてきそうですが、p要素はひとつの文章を表す要素です。
なので中途半端な部分までをp要素で囲むのは、文法上おかしなことになるので控えましょう。
br要素を使った改行をおすすめできない理由
読みにくくなることもある「改行」
最近の流れではbr要素を使った改行はあまり推奨されていません。というのもタブレットやスマートフォンを使ってホームページを見る方が増えたから。
機器によって画面の大きさには差があります。一言で「タブレット」と言ってもサイズがまちまちですし、スマートフォンも含めれば画面幅は未知数です。
これからさらに種類が増えるかもしれない事を考えると、横幅をガシッと決めてレイアウトを組むよりも、横幅が可変する事を前提に作り込む方が得策です。
でもそうやってホームページを作ると、一体どの位置で文章が折り返されるのかが全くわかりません・・・なのでbr要素を使って改行をさせる事ができませんね。そんな状態で改行を強制的に入れると、中途半端な文章構成になることも想定されます。
読みやすくしたくて改行したつもりが、見る人によっては読みにくくなってしまう・・・なんてことも十分ありえるんです。
この辺りは過去のこちらの記事も合わせて読んでみてください。
見る人によって文字サイズが違う事も！
文字の大きさは、必ず作り手が設定した大きさになる・・・なんてことはありません。
スマートフォンやホームページブラウザの設定で大きくしたり、逆に小さくすることもできてしまいます。
文字の大きさが変わるという事は、一文字の横幅が変わってしまいますよね。
そうなれば一行に収まる文字数も変わってしまいます。
・・・・・br要素での改行位置がおかしなことになる事は容易に想像できますね・・・・・
どうしても改行して文章を見せたい！
なんだかbr要素を使って改行する事が嫌になってきましたが、形式ばった文章を掲載する時にはbr要素で改行を入れてあげる作業が必要になります。
またお客様からの強い要望で、せめてPC表示のときは改行を入れて整えたい！なんて方もいるでしょう。
そんな時はHTMLの構造に注意するか、CSSを調整して対応しましょう。
手間が増えてしまう事は事実ですが、文章全体が見やすくなるという事もまた事実です。
一番大切なのは受け手、つまりページを見てくれる方がどう思うかが最優先です。その人が読みやすい文章構成にするには改行が必要なら使いましょう。逆に不必要なら使用は控えるべきです。
作り手や情報の発信者がどういった文章構成で情報を発信したいかよりも、正しく相手に伝えるには、ストレスなく読んでもらえるにはどうしたらいいのかを優先して考えるようにしてみてください。
まとめ
・br要素の後ろで改行している場合、br要素をCSSを使って消すと余計なスぺースが生まれる
・スペースを消すにはHTMLを続けて書く
・CSSやHTMLを書き足して対応することもできるが、HTMLが汚く見える場合もある
