Webサイトをコーディングしていて、「あれ？ちゃんとタグ書いたのに、なんかズレてる…」と困ったことはありませんか？

この“勝手に改行される現象”、実はHTMLの仕組みを知ると理由が見えてきます。

ホームページやブログの表示が崩れると、見た目のデザインに直結するので、初心者の方にとっては焦りポイントの一つかもしれません。

特に「ボタンが縦に並んじゃう」とか、「文字が勝手に改行される」といった現象は、タグの使い方や要素の並びに原因が潜んでいます。

まず、HTMLでは「ブロック要素」と「インライン要素」という種類の違いがあり、これがレイアウトに大きく関係します。

・ブロック要素（例：div, p, ulなど）

→横幅いっぱいに表示され、常に改行される性質があります。

・インライン要素（例：span, a, strongなど）

→テキストの流れに乗って表示されるので、基本的には改行されません。

この違いを知らずに使っていると、「なぜか上下に並ぶ」という現象に出くわします。

例えば、divタグを使ってボタンを並べようとすると、自動で改行されて縦に並びます。

これはブロック要素の性質によるものなんです。

「タグの中には何も変なことしてないのに…」というケース、よくありますよね。

そんな時は、実は目に見えない“空白”や“改行コード”が影響している可能性が高いです。

特に以下のような状況で意図しない改行が起こります。

1. タグとタグの間に改行やスペースが入っている

HTMLでは、<span>テキスト1</span> <span>テキスト2</span>

のように、インライン要素の間にスペースや改行を入れると、それがそのまま表示に影響してしまいます。

表示上は改行しているつもりがなくても、ブラウザはスペースと解釈して、次の要素を改行してしまうことがあります。

2. CSSの設定があいまい

意図せず余白が生まれる場合、CSSでのdisplayやmargin、paddingの指定も関係してきます。

特にinline-blockを使って横並びにしているとき、空白のせいで意図しない隙間ができてしまい、それが結果的に改行に見えるということも。

HTMLで明示的に改行したいときは、<br>タグを使うのが正解です。

でも逆に「brを入れてない＝改行されない」というわけではありません。

実際には、タグの種類や並び方によって自動で改行されることがあるため、brの有無だけではコントロールできません。

例えば、div同士を並べたつもりが、どうしても縦に並ぶというのはよくある話。

その裏には、ブロック要素の仕様や親要素との関係性が関わっています。

だからこそ、「改行したくない」ときは、“何を改行させないか”をはっきりさせた上でタグとCSSをセットで考えることが必要になります。

見た目がおかしいとき、「あれこれ書き直してなんとなく直す」よりも、まずは原因を特定することが重要です。

HTMLでレイアウトが崩れてしまったとき、「何をどう直せばいいのか分からない」と手が止まってしまうことってありますよね。

そんなときにまずチェックしたいのが、タグの種類と、それに付けるCSSのプロパティ指定です。

勝手に改行される理由は、見た目の表示だけでは判断できないことも多く、正しいタグとプロパティの使い方を知っているかどうかで修正のスピードが大きく変わります。

文字列が勝手に折り返されてしまう場面では、CSSの white-space プロパティが効果的です。

特に white-space: nowrap; を使うことで、テキストを強制的に1行で表示させることができます。

<div style=”white-space: nowrap;”>このテキストは改行されません</div>

この指定をすると、文字列がどれだけ長くても改行されず、横に続いていきます。

ただし、長い文章がスマホ画面の外にはみ出してしまう場合もあるので、「overflow: hidden;」 や 「text-overflow: ellipsis;」といったプロパティと組み合わせるのが現実的です。

要素を横に並べたいときに活躍するのが display: inline-block;。

ブロック要素のようにサイズ指定できて、インライン要素のように横並びになる…と、いいとこ取りに見えます。

ですが、タグの間にある「スペース」や「改行」が、意図せず余白として表示されてしまうことがあります。

<div style=”display:inline-block;”>A</div>
<div style=”display:inline-block;”>B</div>

この場合、AとBの間にちょっとした空白ができてしまうんです。

原因は、HTMLのタグの間にある目に見えないスペース。

このせいで、ピタッと並べたつもりでも、間にスキマができてしまいます。

・タグを詰めて書く

<div style=”display:inline-block;”>A</div><div style=”display:inline-block;”>B</div>

・HTMLの間にコメントを入れてスペースを打ち消す

<div style=”display:inline-block;”>A</div><!–
–><div style=”display:inline-block;”>B</div>

・CSSの font-size: 0; を親要素に指定して、スペースを無効化する方法もあります（子要素には再度フォントサイズを指定）

インライン要素（spanやaなど）は、自然にテキストの流れに沿って表示される性質があります。

そのため、親要素の幅が狭いと自動で改行されてしまうことがあります。

これは「余白や文字のバランスに合わせて、表示側が判断している」ためで、HTML側で制御しきれないケースもあります。

この挙動を防ぎたい場合は、spanの中に white-space: nowrap; を付けてやると、強制的に改行を防ぐことができます。